-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
129 lines (110 loc) · 2.9 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
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
body{ /* Made my CSS to logically follow HTML */
display: grid;
grid-template-areas: /* This sets the layout for the website */
"nav nav"
"header header"
"main aside"
"footer footer";
grid-template-rows: auto auto 4fr 1fr; /* Sets the proportions, */
background-color: #366D54; /* but doesn't work like I thought */
margin: 0px;
}
nav {
grid-area: nav; /* This tells the grid which area it is */
grid-template-columns: auto; /* and how much space to take up */
background-color: #143D6A;
}
.nav-list{
display: flex; /* I watched a video of how grid and */
justify-content: space-around; /* flex can be used together and aren't nemesis */
}
.navbar ul {
list-style-type: none;
background-color: #143D6A;
padding: 0px;
margin: 0px;
}
.navbar li {
font-size: 1.5em;
}
.navbar a {
color: white;
text-decoration: none;
padding: 15px;
display: block;
text-align: center;
padding-top: 25px;
padding-bottom: 23.5px;
}
.navbar a:hover { /* Add CSS interactivity. */
background-color: #345171; /* Makes things look clickable. */
}
.navbar a:active { /* When it is clicked */
color: #5B7797;
}
header {
grid-area: header;
grid-template-columns: auto;
height: 90vh; /* Makes it fill the window before scrolling */
background-color: #143D6A;
background-image: url("Assets/Header-pic.png"); /* Better to have blurred photo than using layered CSS */
background-repeat: no-repeat;
background-size: cover;
}
header section { /* Makes text pop from busy background */
color: white;
text-align: left;
text-shadow: 2.5px 2.5px 1px #143D6A;
margin-left: 1.8em;
}
header p {
font-size: 2.5em;
}
h1 {
font-size: 5em;
margin-top: 2.1em;
font-weight: 900;
letter-spacing: 5px; /* This made the short word fill the space better */
}
h2 {
font-weight: 900;
font-size: 2em;
text-shadow: 2.5px 2.5px 1px #143D6A; /* Made regular text also pop */
}
main {
grid-area: main;
grid-template-columns: 1fr; /* Tells grid what fraction to take up */
background-color: #366D54; /* in comparison to the aside. Unsure using right */
color: white;
margin-left: 1.6em;
}
main p {
margin: 1.5em;
margin-right: 3em;
font-size: larger;
text-shadow: 1.1px 1px 1px #143D6A;
}
aside {
grid-area: aside;
grid-template-columns: 5fr;
background-color: #BE6226;
color: white;
text-align: right;
padding-right: 1.9em;
}
aside img {
margin: .5em;
}
.images {
margin-right: 1.5em;
}
.images img {
border: 20px #BE6226; /* Hard coded space for photos */
}
footer { /* It's floating vs fixed. */
grid-area: footer; /* Just need to read more about it. */
grid-template-columns: auto;
background-color: #143D6A;
color: white;
padding: 2em;
}