Skip to content

Commit c85739d

Browse files
ChrisOwen101ChrisOwen101
committed
Indentation fixes
1 parent 1a862c8 commit c85739d

File tree

4 files changed

+101
-95
lines changed

4 files changed

+101
-95
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
# HTML-CSS-Challenges
1+
# HTML-CSS-Challenges
2+
3+
In this repository you will find a selection of challenges to do with HTML & CSS.

‎zoo-css-challenge/README.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Give this section a white background.
1010

1111
Add a paragraph to this section with the following text:
1212

13-
‘The zoo is open every day of the year and features three major biomes: the Tropic Zone, Temperate Territory, and the Polar Circle. From tropical birds, to snow leopards, grizzly bears, and one of the nation’s largest colonies of Antarctic penguins, there are animals to enjoy in every season.’
13+
‘The zoo is open every day of the year and features three major biomes: the Tropic Zone, Temperate Territory, and the Polar Circle. From tropical birds, to snow leopards, grizzly bears, and one of the nation’s largest colonies of Antarctic penguins, there are animals to enjoy in every season.’
1414

1515
## 2) Bears:
1616

@@ -46,7 +46,7 @@ Give the paragraph a maximum width of 700 pixels, and keep in the middle by adju
4646

4747
## 7) Learning
4848

49-
The buttons are a little hard to read. We’d like the buttons to have larger text, and also to change colour when you hover over them.
49+
The buttons are a little hard to read. We’d like the buttons to have larger text, and also to change colour when you hover over them.
5050

5151
We don’t like the hard corners here. Can you give the container in the section some rounded corners?
5252

@@ -62,9 +62,8 @@ Make sure all the links open in a new tab.
6262

6363
The badge that says ‘Opening 2021’ we’d like to be on the top right instead of the bottom right.
6464

65-
When a user hovers over the badge, add a transition so the change in colour is smoother.
65+
When a user hovers over the badge, add a transition so the change in colour is smoother.
6666

6767
## 10) New section
6868

6969
If you have time, add a new section for your favorite animal.
70-

‎zoo-css-challenge/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<!DOCTYPE html>
2+
<html>
13
<body>
24
<header>
35
<img src='https://sharp-villani-e65ba8.netlify.app/zoo.svg'
@@ -128,3 +130,4 @@ <h3>Useful Links</h3>
128130
<p>Open Monday-Friday 7am-4pm</p><address>1 Birmingham Road</address>
129131
</footer>
130132
</body>
133+
</html>

‎zoo-css-challenge/style.css‎

Lines changed: 92 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,193 +1,195 @@
11
* {
2-
font-family: sans-serif;
2+
font-family: sans-serif;
33
}
44

55
header {
6-
background-color: #211A1D;
7-
color: #ffffff;
8-
width: 100%;
9-
padding: 20px;
6+
background-color: #211a1d;
7+
color: #ffffff;
8+
width: 100%;
9+
padding: 20px;
1010
}
1111

1212
nav {
13-
display: inline-block;
14-
width: 100%;
13+
display: inline-block;
14+
width: 100%;
1515
}
1616

1717
header ul {
18-
margin: 20px 0 0 0;
19-
padding: 0;
18+
margin: 20px 0 0 0;
19+
padding: 0;
2020
}
2121

2222
header ul li {
23-
display: inline-block;
24-
margin-right: 10px;
23+
display: inline-block;
24+
margin-right: 10px;
2525
}
2626

2727
section {
28-
padding: 5%;
29-
background-color: #F8F0FB;
28+
padding: 5%;
29+
background-color: #f8f0fb;
3030
}
3131

3232
img {
33-
border: 5px solid #8075FF;
33+
border: 5px solid #8075ff;
3434
}
3535

36-
h1, h2, h3, h4, h5 {
37-
/*Purple*/
38-
color: #6320EE;
39-
margin-bottom: 1em;
36+
h1,
37+
h2,
38+
h3,
39+
h4,
40+
h5 {
41+
/*Purple*/
42+
color: #6320ee;
43+
margin-bottom: 1em;
4044
}
4145

4246
h1 {
43-
font-size: 250%;
47+
font-size: 250%;
4448
}
4549

4650
h2 {
47-
font-size: 175%;
51+
font-size: 175%;
4852
}
4953

5054
h3 {
51-
font-size: 150%;
55+
font-size: 150%;
5256
}
5357

5458
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;
59+
display: inline-block;
60+
border-radius: 3px;
61+
cursor: pointer;
62+
padding: 10px 20px;
63+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
64+
background-color: #372772;
65+
border: 2px solid black;
66+
color: #fff;
6367
}
6468

6569
footer {
66-
background-color: #211A1D;
67-
color: #ffffff;
68-
width: 100%;
69-
padding: 20px;
70-
display: flex;
71-
justify-content: space-between;
70+
background-color: #211a1d;
71+
color: #ffffff;
72+
width: 100%;
73+
padding: 20px;
74+
display: flex;
75+
justify-content: space-between;
7276
}
7377

7478
.introduction {
75-
7679
}
7780

7881
#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;
82+
height: 120px;
83+
width: 120px;
84+
background-color: #bbb;
85+
border-radius: 50%;
86+
display: inline-block;
87+
position: fixed;
88+
bottom: 20px;
89+
right: 20px;
8790

88-
display: flex;
89-
justify-content: center;
90-
align-content: center;
91-
flex-direction: column;
91+
display: flex;
92+
justify-content: center;
93+
align-content: center;
94+
flex-direction: column;
9295
}
9396

9497
#badge:hover {
95-
background-color: yellow;
98+
background-color: yellow;
9699
}
97100

98101
#badge p {
99-
text-align: center;
100-
font-size: 125%;
102+
text-align: center;
103+
font-size: 125%;
101104
}
102105

103106
.image-container img {
104-
vertical-align: top;
105-
border: 5px solid #747C92;
107+
vertical-align: top;
108+
border: 5px solid #747c92;
106109
}
107110

108111
.image-container img:first-of-type {
109-
vertical-align: bottom;
112+
vertical-align: bottom;
110113
}
111114

112115
.tigers {
113-
background-color: #0B3C49;
114-
color: #F0E100;
116+
background-color: #0b3c49;
117+
color: #f0e100;
115118
}
116119

117120
.giraffe {
118-
background-color: #465775;
119-
color: #56E39F;
121+
background-color: #465775;
122+
color: #56e39f;
120123
}
121124

122125
.giraffe h2 {
123-
color: #EF6F6C;
126+
color: #ef6f6c;
124127
}
125128

126129
.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;
130+
display: inline-block;
131+
background-color: white;
132+
padding: 20px;
133+
margin: 10px;
134+
width: 30%;
135+
border: 1px solid black;
136+
border-radius: 10px;
134137
}
135138

136139
.card h4 {
137-
margin-bottom: 1em;
140+
margin-bottom: 1em;
138141
}
139142

140143
.card a {
141-
text-decoration: underline;
142-
font-weight: bold;
144+
text-decoration: underline;
145+
font-weight: bold;
143146
}
144147

145148
.card time {
146-
opacity: 0.5;
147-
display: inline-block;
148-
margin-bottom: 10px;
149+
opacity: 0.5;
150+
display: inline-block;
151+
margin-bottom: 10px;
149152
}
150153

151-
152-
153154
/*Education*/
154155

155156
.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%;
157+
height: 500px;
158+
background-image: url("https://source.unsplash.com/1200x900/?tiger");
159+
background-repeat: no-repeat;
160+
background-size: cover;
161+
background-position: center;
162+
padding: 100px 5%;
162163
}
163164

164165
.education-container {
165-
background-color: rgba(255,255,255,0.75);
166-
padding: 50px;
167-
max-width: 400px;
166+
background-color: rgba(255, 255, 255, 0.75);
167+
padding: 50px;
168+
max-width: 400px;
168169
}
169170

170-
.education-container h3, .education-container p {
171-
margin-bottom: 1em;
171+
.education-container h3,
172+
.education-container p {
173+
margin-bottom: 1em;
172174
}
173175

174176
/*Membership*/
175177

176178
.membership {
177-
text-align: center;
178-
background-color: #FFFFFC;
179+
text-align: center;
180+
background-color: #fffffc;
179181
}
180182

181183
.membership h2 {
182-
color: #FF3F00;
184+
color: #ff3f00;
183185
}
184186

185187
.membership strong {
186-
color: #FF7F11;
188+
color: #ff7f11;
187189
}
188190

189191
/*Programs*/
190192

191193
.programs .card {
192-
display: block;
194+
display: block;
193195
}

0 commit comments

Comments
 (0)