-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.css
245 lines (197 loc) · 17.3 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
@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 { /* For everything in the body of the HTML document: */
padding: 0; /* ... padding 0... */
margin: 0; /* ... margin 0... */
background: linear-gradient(to right, rgb(147, 147, 155), rgb(155, 158, 139));
font-family: 'Poppins', sans-serif; /* ... font family is poppins and a defaulty of san serif if there is an issue downloading... */
font-size: 1.2rem; /* ... default font size is font relative to the root html element... */
color: white; /* ... default text color is white... */
min-height: 100vh; /* ... sets the body to be 100% of the view of the screen (i.e. 100 view heights). */
}
.container { /* the "container" is the body of the html document. Below we want to */
max-width: 1200px; /* ... a max-width that the container cannot exceed... */
margin: 0 auto; /* ... margin of 0 (on top and bottom) AND auto (on left and right) which centers everything if wider than 1200px. */
padding: 0 40px; /* ... padding of 0 (top and bottom) AND 40px (left and right) to provide space between body and edge of screen*/
flex-grow: 1; /* ... ... */
}
.full-height-grow { /* For the sizing of the content on our page, */
display: flex; /* ... define as a flex container (elements will be put next to each other)... */
flex-direction: column; /* ... sections will now be stack one on top of each other (i.e. nav, etc.*/
}
/*// NAVIGATION //*/
.main-header { /* For the entire header element and all descendant elements: */
display: flex; /* ... line up everything side-by-side... */
justify-content: space-between; /* ... use "space-between" to push these two elements as far apart as possible (see "around" and "evenly" also). */
align-items: center; /* ... and both the brand logo and navigation sections are perfectly centered. */
height: 12vh; /* ... and adding height will put space between the top of the document and the header element of 12%. */
}
.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). */
}
.logo-resize { /* Logo size follows the following constraints:*/
max-width: 50px; /* ... max-width of the orginal image is limited to 50px wide ... */
max-height: 50px; /* ... max-length of the original image is limited to 50px tall */
}
.brand-logo-name { /* div element containing the brand name */
margin-left: 1rem; /* ... puts the given amount of space between the logo and the brand name text. */
}
.main-nav ul { /* for the main nav container with the anchor tags "Discover" and "Join": */
display: flex; /* ... put the elements next to each other... */
margin: 0; /* ... no margin ... */
padding: 0; /* ... no padding ... */
list-style: none; /* ... remove the list styling (i.e. bullet points) */
}
.main-nav a { /* Styling the anchor tags themselves (i.e. "Discover" and "Join" */
color: inherit; /* ... the anchor tags inherits the color white from the parent body... */
text-decoration: none; /* ... remove the underline from the default anchor text styling... */
padding: 1.5rem; /* ... add space between the anchor tags... */
letter-spacing: 2px; /* ... add spacing between letters... */
}
.main-nav a:hover { /* When hovering over the anchor tags:*/
color: #f0f0f0; /* ... the anchor tag text will darken slightly... */
}
/*// BURGER NAVIGATION //*/
.toggle-button { /* For the toggle button: */
display: none; /* ... display of none so it does not show on larger screen... */
position: absolute; /* ... position absolute so we can position to the extreme right of the screen... */
top: 1rem;
right: 1.5rem; /* ... position so itsnot quite at the right of the screen ... */
flex-direction: column; /* ... so all the spans line up on top of each other... */
justify-content: space-between; /* ... space between each link will be as far apart as possible ... */
width: 30px;
height: 21px;
}
.toggle-button .bar { /* For the styling of each bar: */
height: 3px;
width: 100%;
background-color: rgb(245, 245, 245);
border-radius: 10px;
}
@media (max-width: 768px) { /* if the screen is 768px or less: */
.toggle-button { /* For the toggle button when the screen is 768 or less: */
display: flex; /* ... the display is flex rather than none so it appears in smaller screen sizes... */
}
.main-nav { /* For links: */
display: none; /* ... remove the links so you only see the burger menu... */
width: 100%; /*... container spans 100% (also see main-nav ul to ensure that both are 100% width) ... */
}
.main-header { /* To style the active burger menu: */
flex-direction: column; /* ... stack all elements on top of each other ...*/
align-items: flex-start;
padding-top: 10px;
}
.main-nav ul { /* For the nav links in the burger menu: */
flex-direction: column; /*... stack one on top of each other ...*/
width: 100%; /*... with the width of the ul being 100%... */
}
.main-nav li { /* For the list items in the unordered list: */
text-align: center; /*... have all the links be aligned dead center ... */
}
.main-nav li a { /* For each link of the list item in the nav: */
padding: .5rem 1rem;
}
.main-nav.active { /* For when the burger nav is active: */
display: flex; /*... display flex ... */
}
}
/*// GLOBAL ELEMENT STYLING//*/
.title { /* For all "title" class elements: */
font-weight: 500; /* ... the text is medium thickness (see imported poppins google font at top)*/
font-size: 3em; /* ... font size of 3em (remember: em is x3 the size of the default 12pt font) ... */
margin-bottom: 1rem; /* ... spacing on the bottom of the title for consistent padding and margins */
margin-top: 0;
}
.subtitle { /* For all "subtitle class elements: "*/
font-weight: 500; /* ... font weight of 500 which is medium bold ... */
font-size: 1.2em; /* ... font size of 1.2em which is a bit smaller than the title ... */
margin-bottom: 2rem; /* ... spacing at the bottom of the subtitle ... */
}
.btn { /* For all buttons with the class "btn": */
color: white; /* ... text color is white... */
background-color: rgb(216, 156, 86); /* ... button back ground color is blue ... */
padding: .75rem 1.5rem; /* ... padding on the button is .75.rem (top and bottom) and 1.5rem (left and right) ... */
border-radius: .5rem; /* ... with rounded edges ...*/
text-decoration: none; /* ... and no default link underline ... */
font-size: .9rem; /* ... and a slightly smaller font size compared to the subtitle text. */
outline: none;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: rgb(206, 150, 86);
}
.btn:focus {
background-color: rgb(206, 150, 86);
}
.accent-text { /* for highlighted text in the h1 element: */
color: rgb(230, 183, 130);
}
.contact-main-section { /* For entire contact page: */
display: flex; /*... line everything up side by side ... */
justify-content: space-between; /* ... space everything out as far apart as they can (left from right)... */
align-items: center; /* ... centers the text with the form horizontally...*/
flex-grow: 1; /* ... centers the text and form vertically ... */
}
.contact-text { /* For h1 text on the left: */
font-weight: 500; /* ... the text is medium thickness (see imported poppins google font at top)*/
font-size: 3em; /* ... font size of 3em (remember: em is x3 the size of the default 12pt font) ... */
margin-bottom: 1rem; /* ... spacing on the bottom of the title for consistent padding and margins */
margin-top: 0; /* ... remove margins from header ... */
}
.contact-form { /* For the form styling: */
background-color: rgba(61, 61, 31, 0.23);
width: 50vw; /*... form will take up 50% of the view width... */
max-width: 50%; /*... and form will have a max-width of 50% of thge view width ...*/
padding: 2rem 4rem; /*... padding around the form content and the box...*/
border-radius: 10px;
}
.input-group {
display: flex; /*... line everything up side by side... */
flex-direction: column; /*... stack everything one on top of each other... */
margin-bottom: 2rem; /*... add a decent bottom margin buffer ... */
}
.input-group:last-child {
margin-bottom: 0; /*... removes last child element (i.e. contact now button) margin buffer for more appealing spacing... */
}
.input-group label {
font-weight: bold; /* ... bold the form labels ...*/
margin-bottom: .5rem; /* .. adds spacing between lale and input field... */
}
.input-group input {
outline: none; /*... removesdefault outline ... */
background: none; /*... removesdefault default white background color ... */
border: 1px solid rgb(185, 184, 184); /*... adds a custom thin border... */
font-size: 1em; /*... increases font size... */
padding: .5em; /*... increases padding in the input field... */
border-radius: 5px;
color: inherit;
}
.input-group input:focus {
border-color: rgb(214, 214, 214);
}
.input-group textarea {
outline: none; /*... removesdefault outline ... */
background: none; /*... removesdefault default white background color ... */
border: 1px solid rgb(185, 184, 184); /*... adds a custom thin border... */
font-size: 1em; /*... increases font size... */
padding: .5em; /*... increases padding in the input field... */
border-radius: 5px;
color: inherit;
}
.input-group textarea:focus {
border-color: rgb(214, 214, 214);
}
::placeholder {
color: rgb(194, 194, 194);
}