Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
P
ProjectClient_Y1S1_tramshedTech_team15
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Locked files
Deploy
Releases
Model registry
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Arianne Bayliss
ProjectClient_Y1S1_tramshedTech_team15
Merge requests
!54
Separating CSS.
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
Separating CSS.
25-adding-a-basic-locations-template-route
into
development
Overview
0
Commits
2
Changes
5
Merged
Liam Driscoll
requested to merge
25-adding-a-basic-locations-template-route
into
development
2 years ago
Overview
0
Commits
2
Changes
5
Expand
Closes
#25 (closed)
0
0
Merge request reports
Compare
development
version 1
4446b80d
2 years ago
development (base)
and
latest version
latest version
9659dc99
2 commits,
2 years ago
version 1
4446b80d
1 commit,
2 years ago
5 files
+
277
−
91
Inline
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
5
Search (e.g. *.vue) (Ctrl+P)
static/CSS/ListLocations.css
0 → 100644
+
243
−
0
Options
/* #iD and .Class
font, color, text
padding, background, border, margin
width, height,
position, top/right/bottom/left
overflow, float, display
.my-class {
width: calc(100% - 20px);
height: calc(50% + 10px);
} */
*
{
font-family
:
Helvetica
,
Verdana
,
Arial
,
sans-serif
;
}
body
{
margin
:
0
;
padding
:
0
;
/* Below styling used for footer position. */
display
:
flex
;
min-height
:
100vh
;
flex-direction
:
column
;
}
ul
,
li
{
list-style-type
:
none
;
margin
:
0
;
padding
:
0
;
}
a
{
text-decoration
:
none
;
}
.Left
{
margin-right
:
auto
;
}
.Center
{
margin-left
:
auto
;
margin-right
:
auto
;
}
.Right
{
margin-left
:
auto
;
}
/* [#1] Page header styling. Uses [#2].
header #pageHeader
div #headerDiv
a #headerText #headerImg
nav #headerNav .navBar
ul .Right, ul .Left
li a
*/
#headerDiv
{
text-align
:
center
;
background-color
:
white
;
padding
:
20px
0px
;
display
:
flex
;
align-items
:
center
;
justify-content
:
flex-start
;
}
#headerDiv
a
{
font-size
:
30px
;
font-weight
:
bold
;
color
:
black
;
}
#headerText
{
width
:
100%
;
margin-left
:
-240px
;
}
#headerImg
{
width
:
200px
;
height
:
65px
;
margin-top
:
-10px
;
margin-right
:
20px
;
margin-bottom
:
-17.5px
;
margin-left
:
20px
;
}
#headerNav
{
width
:
100%
;
position
:
absolute
;
}
#headerNav
a
{
font-size
:
20px
;
padding
:
7.5px
10px
;
}
/* [#2] Page navigation styling. Used in [#1] and [#4]. */
.navBar
{
background-color
:
#282A35
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
}
.navBar
ul
,
.navBar
li
{
display
:
flex
;
align-items
:
center
;
}
.navBar
a
{
color
:
white
;
}
.navBar
a
:hover
{
background-color
:
#0B0C0F
;
}
/* [#3] Page main styling.
main #pageMain
form #recordForm
label
input .formTextInput
button #addButton
*/
#pageMain
{
/* Below styling used for footer position. */
flex
:
1
;
}
#recordForm
{
margin-left
:
5px
;
}
#recordForm
.formTextInput
{
margin-top
:
5px
;
width
:
50%
;
}
/* [#4] Page footer styling. Uses [#2].
footer #pageFooter
nav #footerNav .navBar
ul .Center
li a
*/
#footerNav
a
{
font-size
:
15px
;
padding
:
5px
10px
;
}
div
.contain
{
text-align
:
center
;
}
ul
.list
{
display
:
inline-block
;
list-style-type
:
none
;
margin
:
0
;
}
.container
{
display
:
flex
;
position
:
relative
;
padding
:
5px
660px
5px
5px
;
width
:
40%
;
height
:
50%
;
background-color
:
white
;
box-shadow
:
0
4px
8px
0
rgba
(
0
,
0
,
0
,
0.2
),
0
6px
20px
0
rgba
(
0
,
0
,
0
,
0.19
);
margin-bottom
:
25px
;
border-radius
:
10px
;
margin-left
:
20px
;
}
.image
{
opacity
:
1
;
display
:
block
;
transition
:
.5s
ease
;
backface-visibility
:
hidden
;
border-radius
:
10px
10px
10px
10px
;
float
:
left
;
width
:
300px
;
height
:
250px
;
object-fit
:
cover
;
}
h2
{
position
:
absolute
;
margin-left
:
320px
;
margin-top
:
30px
;
}
p
{
margin-top
:
80px
;
margin-left
:
50px
;
}
.checked
{
color
:
orange
;
}
.star
{
position
:
absolute
;
top
:
50%
;
left
:
40%
;
transform
:
translate
(
-50%
,
-50%
);
margin-top
:
80px
;
}
.middle
{
transition
:
.5s
ease
;
opacity
:
0
;
position
:
absolute
;
top
:
45%
;
left
:
10.5%
;
transform
:
translate
(
-25%
,
-25%
);
-ms-transform
:
translate
(
-25%
,
-25%
)
}
.container
:hover
.image
{
opacity
:
0.3
;
}
.container
:hover
.middle
{
opacity
:
1
;
}
.text
{
background-color
:
black
;
color
:
white
;
font-size
:
16px
;
padding
:
16px
32px
;
}
Loading