Skip to content

Commit f4eec5b

Browse files
zicnazicna
committed
practise CSS fundamentals
1 parent 10de6bc commit f4eec5b

File tree

4 files changed

+209
-2
lines changed

4 files changed

+209
-2
lines changed

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
3+
/* <article class="product">
4+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
5+
<img
6+
src="https://i.imgur.com/ZrTU3VK.jpeg"
7+
alt="Chuck Taylor All Star Shoe"
8+
height="250"
9+
width="250"
10+
/>
11+
<p class="price"><strong>$65.00</strong></p>
12+
<p class="shipping">Free shipping</p>
13+
<p class="product-description">
14+
Ready to dress up or down, these classic canvas Chucks are an everyday
15+
wardrobe staple.
16+
</p>
17+
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>
18+
19+
<h3 class="details-title">Product details</h3>
20+
<ul class="details-list">
21+
<li>Lightweight, durable canvas sneaker</li>
22+
<li>Lightly padded footbed for added comfort</li>
23+
<li>Iconic Chuck Taylor ankle patch.</li>
24+
</ul>
25+
<button class="add-cart">Add to cart</button>
26+
</article> */

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<article class="product">
12+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
13+
<img
14+
src="https://i.imgur.com/ZrTU3VK.jpeg"
15+
alt="Chuck Taylor All Star Shoe"
16+
height="250"
17+
width="250"
18+
/>
19+
<p class="price"><strong>$65.00</strong></p>
20+
<p class="shipping">Free shipping</p>
21+
<p class="product-description">
22+
Ready to dress up or down, these classic canvas Chucks are an everyday
23+
wardrobe staple.
24+
</p>
25+
<a href="https://converse.com" target="_blank" class="more-info"
26+
>More information &rarr;</a
27+
>
28+
<div class="colors">
29+
<div class="color color-blue"></div>
30+
<div class="color color-green"></div>
31+
<div class="color color-red"></div>
32+
<div class="color color-yellow"></div>
33+
<div class="color color-red"></div>
34+
<div class="color color-orange"></div>
35+
</div>
36+
<h3 class="details-title">Product details</h3>
37+
<ul class="details-list">
38+
<li>Lightweight, durable canvas sneaker</li>
39+
<li>Lightly padded footbed for added comfort</li>
40+
<li>Iconic Chuck Taylor ankle patch.</li>
41+
</ul>
42+
<button class="add-cart">Add to cart</button>
43+
</article>
44+
</body>
45+
</html>

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<title>The Basic Language of the Web: HTML</title>
6+
<link rel="stylesheet" href="./style.css">
67
</head>
78

89
<body>
@@ -117,14 +118,14 @@ <h4>Related posts</h4>
117118
<img
118119
src="img/related-1.jpg"
119120
alt="Person programming"
120-
width="75"
121+
height="75"
121122
width="75"
122123
/>
123124
<a href="#">How to Learn Web Development</a>
124125
<p>By Jonas Schmedtmann</p>
125126
</li>
126127
<li>
127-
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
128+
<img src="img/related-2.jpg" alt="Lightning" width="75" height="75" />
128129
<a href="#">The Unknown Powers of CSS</a>
129130
<p>By Jim Dillon</p>
130131
</li>
@@ -142,5 +143,9 @@ <h4>Related posts</h4>
142143
</aside>
143144

144145
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
146+
<p>
147+
mojoj <strong>Bokici</strong><br>
148+
149+
</p>
145150
</body>
146151
</html>

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

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

0 commit comments

Comments
 (0)