-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.css
122 lines (104 loc) · 6.28 KB
/
index.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700'); /* imports the poppins font */
*, *::before, *::after {
box-sizing: border-box;
font-family: 'Poppins', sans-serif; /* all numbers Poppins with default of sans-serif*/
font-weight: normal; /* set font boldness to normal */
margin: 0; /* zero-out margin otherwise there will be a white margin on the sides of the window. */
padding: 0; /* zero-out padding otherwise there will be a white margin on the sides of the window. */
}
body {
background: linear-gradient(to right, rgb(147, 147, 155), rgb(155, 158, 139));
}
nav {
height: 10vh; /* nav bar relative to the rest of the viewport (90vh)*/
background: rgb(36, 35, 35);
display: flex; /* add display flex for logo*/
}
.brand-logo { /* section of header that holds the logo and brand name elements. */
display: flex; /* ... setting display to flex will put the elements (logo and brand name) next to each other...*/
align-items: center; /* ... text will line up in the center of the logo... */
font-size: 1.25em; /* ... font size of brand name will be larger... */
color: inherit; /* ... color will inherit from the parent (i.e. body) the color white.. */
text-decoration: none; /* ... remove underline from brand name (since it is a link to the home page). */
margin-left: 5%;
color: white;
}
.nav-links {
display: flex; /* display elements side by side */
list-style: none; /* remove default stylization (i.e. bullet points*/
width: 40%; /* make the wdith of nav-links 50% of the nav bar itself (i.e. XXXXXXXX--------*/
height: 100%; /* make it 100% of the nav-links box*/
align-items: center; /* position the links vertically in the center */
justify-content: space-around; /* space all the links so they are evenly spaced in the nav-links box */
margin-left: auto; /* margin-left auto will position the links to the far RIGHT of the nav-links section*/
}
.nav-links .link { /* For each link in the nav link... */
color: white; /* text is white...*/
text-decoration: none; /* remove deafult style (i.e. underline)*/
}
.landing {
display: flex;
height: 90vh;
justify-content: center;
align-items: center;
}
.landing > h1 {
font-size: 2.4rem;
color: rgb(236, 236, 236);
}
@media screen and (max-width: 768px) { /* media query when the screen is at or BELOW 768 px...*/
.line { /* for the lines that make the hamburger icon...*/
width: 30px;
height: 3px;
background: rgb(252, 252, 252);
margin: 5px;
border-radius: 1px
}
nav {
position: relative; /* since we want to place our burger menu on the far right we set position to relative...*/
}
.hamburger { /* and because the nav has a realtive position, the hamburger can be moved freely...*/
position: absolute; /* outside normal document flow */
cursor: pointer; /* on hover, a pointer will show */
right: 5%; /* and positioned 5% from the right of the window */
top: 50%; /* to center burger icon, set 50% (i.e. mid) */
transform: translate(-5%, -50%); /* and transform translate with offset*/
z-index: 1;
}
.nav-links {
position: fixed; /* with position: fixed, element is relative to viewport and stays in the same place even on scroll*/
background: rgb(36, 35, 35); /* color (same as the nav bar) */
height: 100vh; /* height is 100% if the viewport */
width: 100%; /* width is 100% of the viewport */
flex-direction: column; /* let the flex direction be stacked on top of each other*/
pointer-events: none; /* fo clickability */
clip-path: circle(100px at 90% -40%); /* add the clip-path property with a circle that starts at the top right*/
-webkit-clip-path: circle(100px at 90% -10%); /* and to ensure compatibility, add a webkit*/
transition: all 1s ease-out; /* animation effect */
}
/* on click of the burger icon*/
.nav-links.open {
clip-path: circle(1400px at 90% -10%); /* add the clip-path property with a circle that starts at the top right*/
-webkit-clip-path: circle(1400px at 90% -10%); /* and to ensure compatibility, add a webkit*/
pointer-events: all; /* for clickability */
}
/* For link animation on click*/
.nav-links li {
opacity: 0;
}
.nav-links > li > a {
font-size: 1.4rem;
}
.nav-links li:nth-child(1) { /* if you want to animate the links in the menu to fade in, selct the first child */
transition: all 0.5s ease 0.2s; /* transition all for .5 seconds with an ease with delay of 0.2 seconds*/
}
.nav-links li:nth-child(2) { /* if you want to animate the links in the menu to fade in, selct the second child */
transition: all 0.5s ease 0.35s;
}
.nav-links li:nth-child(3) { /* if you want to animate the links in the menu to fade in, selct the third child */
transition: all 0.5s ease 0.45s;
}
li.fade {
opacity: 1;
}
}