-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
58 lines (49 loc) · 2.73 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
*, *::before, *::after { /* For all elements inside the html file (including pseudo elements*/
box-sizing: border-box; /* ... standardize width and heights to conform to box */
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(to right, rgb(177, 178, 189), rgb(165, 168, 149));
}
.gallery-highlight { /* For the large highlight image: */
width: 80%;
height: 50%;
}
section { /* For the entire sectionc containing everything: */
display: flex; /* Set display to flex so everything is side-by-side */
height: 100vh; /* Set height to 100% of the viewport size */
}
.city-gallery { /* For the gallery side of the site: */
width: 50%; /* ... make it 50% of the width*/
display: flex;
flex-direction: column; /* and stack the elements one on top of each other */
justify-content: center; /* This will center all the elements vertically */
align-items: center; /* Align element vertically */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.city-description { /* For the description side of the site:*/
width: 50%; /* ... make it 50% of the width*/
display: flex; /* Use flex (which will align items side by side) */
flex-direction: column; /* and stack the elements one on top of each other */
justify-content: center; /* This will center all the elements vertically */
align-items: center; /* Align element vertically */
background: white;
}
.gallery-preview { /* For the preview images: */
display: flex; /* enable flex display */
width: 80%; /* size of the preview element relative to the parent container*/
border: 1px solid rgb(128, 128, 128); /* border Outline of the preview images*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.gallery-preview img { /* for each of the images in the preview */
height: 100px; /* make each of the images 100px high*/
flex-grow: 1; /* and match the width of the previewed images to the size of the galery preview element*/
opacity: 0.6; /* fade the images */
cursor: pointer;
transition: opacity 0.3s ease;
}
img.city-active {
opacity: 1;
}