Skip to content

Commit 57c0d82

Browse files
avatarsinavatarsin
committed
Using Margins and paddings challeng 2
1 parent 4b1c704 commit 57c0d82

File tree

5 files changed

+122
-24
lines changed

5 files changed

+122
-24
lines changed

‎starter/02-HTML-Fundamentals/challenge.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,23 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>Flipkart | Fashion</title>
6+
<link href="style.css" rel="stylesheet" />
67
</head>
78
<body>
89
<article>
910
<header>
10-
<h2>Converse Chuck Taylor All Star Low Top</h2>
11+
<h2 class="main-heading">Converse Chuck Taylor All Star Low Top</h2>
1112
<img src="img/challenges.jpg" alt="pt shoes" width="250" height="250" />
1213
</header>
13-
<p><strong>$65.00</strong></p>
14-
<p>Free Shipping</p>
14+
<p class="price-tag"><strong>$65.00</strong></p>
15+
<p class="free-shipping">Free Shipping</p>
1516
<p>
1617
Ready to dress up or down, these classic canvas are an everyday wardrobe
1718
stapple
1819
</p>
19-
<a href="#">More Information &rarr;</a>
20-
<h3>Product details</h3>
21-
<ul>
20+
<a href="#" class="info">More Information &rarr;</a>
21+
<h3 class="details">Product details</h3>
22+
<ul class="features">
2223
<li>Lightweight, durable canvas sneaker</li>
2324
<li>Lightly padded footbed for added comfort</li>
2425
<li>Iconic Chuck Taylor ankle patch.</li>

‎starter/02-HTML-Fundamentals/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
font-family: sans-serif;
3+
line-height: 1.5;
4+
border: 5px solid black;
5+
color: #444;
6+
}
7+
.main-heading {
8+
text-align: center;
9+
text-transform: uppercase;
10+
background-color: #f7f7f7;
11+
}
12+
13+
.price-tag {
14+
font-size: 22px;
15+
font-weight: bold;
16+
}
17+
18+
.free-shipping {
19+
color: #a5a0a0;
20+
text-transform: uppercase;
21+
font-size: 12px;
22+
}
23+
24+
.info:link,
25+
.info:visited {
26+
color: black;
27+
}
28+
29+
.info:hover,
30+
.info:active {
31+
text-decoration: none;
32+
color: black;
33+
}
34+
35+
.details {
36+
text-transform: uppercase;
37+
font-weight: bold;
38+
}
39+
40+
.features {
41+
list-style: square;
42+
}
43+
44+
button {
45+
text-transform: uppercase;
46+
/* font-weight: bold; */
47+
color: white;
48+
background-color: black;
49+
border: none;
50+
font-size: 20px;
51+
}
52+
53+
button:hover {
54+
cursor: pointer;
55+
color: black;
56+
background-color: white;
57+
}
58+
59+
/* article {
60+
font-size: 20px;
61+
} */

‎starter/03-CSS-Fundamentals/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎starter/03-CSS-Fundamentals/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h1>📘 The Code Magazine</h1>
2828
</header>
2929

3030
<article>
31-
<header>
31+
<header class="post-header">
3232
<h2>The Basic Language of the Web: HTML</h2>
3333

3434
<img

‎starter/03-CSS-Fundamentals/style.css‎

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,40 @@
1-
h1,
2-
h2,
3-
h3,
4-
h4,
5-
p,
6-
li {
7-
font-family: sans-serif;
1+
* {
2+
/* border-top: 10px solid #1098ad; */
3+
margin: 0;
4+
padding: 0;
5+
}
6+
body {
87
color: #444;
8+
font-family: sans-serif;
9+
border-top: 10px solid #1098ad;
10+
}
11+
12+
.main-header {
13+
background-color: #f7f7f7;
14+
/* padding: 20px;
15+
padding-left: 40px;
16+
padding-right: 40px; */
17+
padding: 20px 40px;
18+
margin-bottom: 60px;
19+
}
20+
21+
nav {
22+
font-size: 18px;
23+
}
24+
25+
article {
26+
margin-bottom: 60px;
27+
}
28+
29+
.post-header {
30+
margin-bottom: 40px;
31+
}
32+
33+
aside {
34+
background-color: #f7f7f7;
35+
border-top: 5px solid #1098ad;
36+
border-bottom: 5px solid #1098ad;
37+
padding: 50px 0;
938
}
1039

1140
h1,
@@ -21,10 +50,13 @@ h1 {
2150

2251
h2 {
2352
font-size: 40px;
53+
margin-bottom: 30px;
2454
}
2555

2656
h3 {
2757
font-size: 30px;
58+
margin-bottom: 20px;
59+
margin-top: 40px;
2860
}
2961

3062
h4 {
@@ -36,12 +68,23 @@ h4 {
3668
p {
3769
font-size: 22px;
3870
line-height: 1.5;
71+
margin-bottom: 15px;
72+
}
73+
74+
ul,
75+
ol {
76+
margin-left: 50px;
77+
margin-bottom: 20px;
3978
}
4079

4180
li {
4281
font-size: 20px;
82+
margin-bottom: 10px;
4383
}
4484

85+
li:last-child {
86+
margin-bottom: 0;
87+
}
4588
/* footer p {
4689
font-size: 16px;
4790
} */
@@ -68,16 +111,6 @@ article header p {
68111
list-style: none;
69112
}
70113

71-
.main-header {
72-
background-color: #f7f7f7;
73-
}
74-
75-
aside {
76-
background-color: #f7f7f7;
77-
border-top: 5px solid #1098ad;
78-
border-bottom: 5px solid #1098ad;
79-
}
80-
81114
/* .first-li {
82115
font-weight: bold;
83116
} */

0 commit comments

Comments
 (0)