Skip to content

Commit 64dad00

Browse files
kalpshah485kalpshah485
authored
Merge pull request #1 from kalpshah485/feat/css-fundamentals
feat: completed section 3 udemy.
2 parents 208cd65 + 7ba881b commit 64dad00

File tree

4 files changed

+491
-125
lines changed

4 files changed

+491
-125
lines changed

‎03-CSS-Fundamentals/blog.css

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
body {
6+
font-family: sans-serif;
7+
line-height: 1.4;
8+
}
9+
.article {
10+
border: 4px solid black;
11+
width: 825px;
12+
margin: 50px auto;
13+
position: relative;
14+
}
15+
.article-top {
16+
background-color: #f7f7f7;
17+
font-size: 22px;
18+
text-align: center;
19+
text-transform: uppercase;
20+
padding: 15px;
21+
}
22+
23+
.price {
24+
font-size: 24px;
25+
}
26+
.label {
27+
text-transform: uppercase;
28+
}
29+
.shipping {
30+
font-size: 12px;
31+
color: gray;
32+
font-weight: bold;
33+
margin-bottom: 20px;
34+
}
35+
.tag-line {
36+
margin-bottom: 10px;
37+
}
38+
.more-info:link,
39+
.more-info:visited {
40+
color: black;
41+
}
42+
.more-info:hover,
43+
.more-info:active {
44+
text-decoration: none;
45+
}
46+
.details-title {
47+
margin-top: 30px;
48+
font-size: 16px;
49+
margin-bottom: 15px;
50+
}
51+
52+
.list {
53+
list-style: square;
54+
margin-left: 20px;
55+
}
56+
57+
.list li {
58+
margin-bottom: 10px;
59+
}
60+
61+
.btn {
62+
color: white;
63+
background-color: black;
64+
border: none;
65+
text-transform: uppercase;
66+
font-weight: bold;
67+
font-size: 20px;
68+
cursor: pointer;
69+
padding: 15px;
70+
width: 100%;
71+
border-top: 4px solid black;
72+
}
73+
.btn:hover {
74+
color: black;
75+
background-color: white;
76+
}
77+
78+
.sale-btn {
79+
background-color: #ec2f2f;
80+
color: white;
81+
font-size: 12px;
82+
font-weight: bold;
83+
letter-spacing: 2px;
84+
padding: 7px 15px;
85+
display: inline-block;
86+
position: absolute;
87+
left: -38px;
88+
top: -17px;
89+
border: none;
90+
}
91+
92+
.colors {
93+
margin-top: 20px;
94+
}
95+
96+
.colors div {
97+
margin-right: 10px;
98+
height: 20px;
99+
width: 20px;
100+
display: inline-block;
101+
}
102+
.black {
103+
background-color: black;
104+
}
105+
106+
.blue {
107+
background-color: blue;
108+
}
109+
.red {
110+
background-color: red;
111+
}
112+
113+
.yellow {
114+
background-color: gold;
115+
}
116+
117+
.green {
118+
background-color: lightgreen;
119+
}
120+
121+
.brown {
122+
background-color: brown;
123+
}

‎03-CSS-Fundamentals/blog.html

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,39 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>BLOG</title>
4+
<meta charset="UTF-8" />
5+
<title>Blog Page</title>
6+
<link rel="stylesheet" href="blog.css" />
57
</head>
68
<body>
7-
<h2>BLOG</h2>
8-
<a href="index.html">Back to home</a>
9+
<article class="article">
10+
<button class="sale-btn">SALE</button>
11+
<h2 class="article-top">Converse Chuck Taylor All Star Low Top</h2>
12+
<img src="img/challenges.jpg" alt="Shoes" width="250" height="250" />
13+
<h4 class="price">&dollar;65.00</h4>
14+
<p class="label shipping">Free Shipping</p>
15+
<p class="tag-line">
16+
Ready to dress up or down, these classic canvas Chucks are an everyday
17+
wardrobe staple.
18+
</p>
19+
<a class="more-info" href="#">
20+
<strong>More Information &rarr;</strong>
21+
</a>
22+
<div class="colors">
23+
<div class="black">&nbsp;</div>
24+
<div class="blue">&nbsp;</div>
25+
<div class="red">&nbsp;</div>
26+
<div class="yellow">&nbsp;</div>
27+
<div class="green">&nbsp;</div>
28+
<div class="brown">&nbsp;</div>
29+
</div>
30+
<h3 class="details-title label">Product Details</h3>
31+
<ul class="list">
32+
<li>Lightweight, durable canvas sneaker</li>
33+
<li>Lightly padded footbed for added comfort</li>
34+
<li>Iconic Chuck Taylor ankle patch.</li>
35+
</ul>
36+
<button class="btn">Add to cart</button>
37+
</article>
938
</body>
1039
</html>

0 commit comments

Comments
 (0)