Skip to content

Commit 1a862c8

Browse files
author
Chris Owen
authored
Create style.css
1 parent 6bc3697 commit 1a862c8

File tree

1 file changed

+193
-0
lines changed

1 file changed

+193
-0
lines changed

‎zoo-css-challenge/style.css‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
* {
2+
font-family: sans-serif;
3+
}
4+
5+
header {
6+
background-color: #211A1D;
7+
color: #ffffff;
8+
width: 100%;
9+
padding: 20px;
10+
}
11+
12+
nav {
13+
display: inline-block;
14+
width: 100%;
15+
}
16+
17+
header ul {
18+
margin: 20px 0 0 0;
19+
padding: 0;
20+
}
21+
22+
header ul li {
23+
display: inline-block;
24+
margin-right: 10px;
25+
}
26+
27+
section {
28+
padding: 5%;
29+
background-color: #F8F0FB;
30+
}
31+
32+
img {
33+
border: 5px solid #8075FF;
34+
}
35+
36+
h1, h2, h3, h4, h5 {
37+
/*Purple*/
38+
color: #6320EE;
39+
margin-bottom: 1em;
40+
}
41+
42+
h1 {
43+
font-size: 250%;
44+
}
45+
46+
h2 {
47+
font-size: 175%;
48+
}
49+
50+
h3 {
51+
font-size: 150%;
52+
}
53+
54+
button {
55+
display: inline-block;
56+
border-radius: 3px;
57+
cursor: pointer;
58+
padding: 10px 20px;
59+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
60+
background-color: #372772;
61+
border: 2px solid black;
62+
color: #fff;
63+
}
64+
65+
footer {
66+
background-color: #211A1D;
67+
color: #ffffff;
68+
width: 100%;
69+
padding: 20px;
70+
display: flex;
71+
justify-content: space-between;
72+
}
73+
74+
.introduction {
75+
76+
}
77+
78+
#badge {
79+
height: 120px;
80+
width: 120px;
81+
background-color: #bbb;
82+
border-radius: 50%;
83+
display: inline-block;
84+
position: fixed;
85+
bottom: 20px;
86+
right: 20px;
87+
88+
display: flex;
89+
justify-content: center;
90+
align-content: center;
91+
flex-direction: column;
92+
}
93+
94+
#badge:hover {
95+
background-color: yellow;
96+
}
97+
98+
#badge p {
99+
text-align: center;
100+
font-size: 125%;
101+
}
102+
103+
.image-container img {
104+
vertical-align: top;
105+
border: 5px solid #747C92;
106+
}
107+
108+
.image-container img:first-of-type {
109+
vertical-align: bottom;
110+
}
111+
112+
.tigers {
113+
background-color: #0B3C49;
114+
color: #F0E100;
115+
}
116+
117+
.giraffe {
118+
background-color: #465775;
119+
color: #56E39F;
120+
}
121+
122+
.giraffe h2 {
123+
color: #EF6F6C;
124+
}
125+
126+
.card {
127+
display: inline-block;
128+
background-color: white;
129+
padding: 20px;
130+
margin: 10px;
131+
width: 30%;
132+
border: 1px solid black;
133+
border-radius: 10px;
134+
}
135+
136+
.card h4 {
137+
margin-bottom: 1em;
138+
}
139+
140+
.card a {
141+
text-decoration: underline;
142+
font-weight: bold;
143+
}
144+
145+
.card time {
146+
opacity: 0.5;
147+
display: inline-block;
148+
margin-bottom: 10px;
149+
}
150+
151+
152+
153+
/*Education*/
154+
155+
.education {
156+
height: 500px;
157+
background-image: url('https://source.unsplash.com/1200x900/?tiger');
158+
background-repeat: no-repeat;
159+
background-size: cover;
160+
background-position: center;
161+
padding: 100px 5%;
162+
}
163+
164+
.education-container {
165+
background-color: rgba(255,255,255,0.75);
166+
padding: 50px;
167+
max-width: 400px;
168+
}
169+
170+
.education-container h3, .education-container p {
171+
margin-bottom: 1em;
172+
}
173+
174+
/*Membership*/
175+
176+
.membership {
177+
text-align: center;
178+
background-color: #FFFFFC;
179+
}
180+
181+
.membership h2 {
182+
color: #FF3F00;
183+
}
184+
185+
.membership strong {
186+
color: #FF7F11;
187+
}
188+
189+
/*Programs*/
190+
191+
.programs .card {
192+
display: block;
193+
}

0 commit comments

Comments
 (0)