Skip to content

Commit bc9139e

Browse files
N0sBaN0sBa
committed
Update
1 parent 5f2e460 commit bc9139e

File tree

5 files changed

+270
-10
lines changed

5 files changed

+270
-10
lines changed

‎challange/2/index.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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>Challenge 3</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<header>
13+
<h2 class="header-title">Converse chuck taylor all star low top</h2>
14+
</header>
15+
<div class="row">
16+
<div class="image">
17+
<img class="item-head__image" src="https://i.pinimg.com/736x/8c/70/62/8c7062011c5c84452defd2e1ef3cdc15.jpg" alt="converse-chuck-taylor">
18+
</div>
19+
<section class="item-head">
20+
<div class="row align-items__center justify-content__space-between">
21+
<h2 class="price">&dollar;65.00</h2>
22+
<p class="shipping">Free shipping</p>
23+
</div>
24+
<p class="information">
25+
<div class="information__desc">
26+
Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple.
27+
</div>
28+
<a class="information__link" href="#">More information &RightArrow;</a>
29+
</p>
30+
<p class="color">
31+
<div class="color__black"></div>
32+
<div class="color__blue"></div>
33+
<div class="color__red"></div>
34+
<div class="color__yellow"></div>
35+
<div class="color__green"></div>
36+
<div class="color__brown"></div>
37+
</p>
38+
</section>
39+
<section class="item-content">
40+
<div class="detail">
41+
<h3 class="detail__title">Product details</h3>
42+
<ul class="detail__list">
43+
<li>Lightweight, durable canvas sneaker</li>
44+
<li>Lightly padded footbed for added comfort</li>
45+
<li>Iconic Chuck Taylor ankle patch.</li>
46+
</ul>
47+
</div>
48+
</section>
49+
</div>
50+
<button class="btn" type="button">Add to cart</button>
51+
</div>
52+
</body>
53+
</html>

‎challange/2/style.css‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
body {
2+
font-family: 'Courier New', Courier, monospace;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
.container {
8+
width: 80%;
9+
margin: 0 auto;
10+
border: 4px solid black;
11+
margin-top: 50px;
12+
}
13+
14+
header {
15+
background-color: #eee;
16+
}
17+
18+
.header-title {
19+
text-align: center;
20+
text-transform: uppercase;
21+
margin: 0;
22+
padding: 0.5em 0.75em;
23+
position: relative;
24+
}
25+
26+
.header-title::before {
27+
content: "SALE";
28+
font-size: 0.7em;
29+
position: absolute;
30+
top: -15px;
31+
left: -15px;
32+
color: white;
33+
background-color: red;
34+
padding: 0.3em;
35+
}
36+
37+
.item-head__image {
38+
width: 100%;
39+
}
40+
41+
.price {
42+
margin: 0;
43+
}
44+
45+
.shipping {
46+
margin: 0;
47+
text-transform: uppercase;
48+
font-weight: 700;
49+
font-size: 0.85em;
50+
color: #777;
51+
/* transition: text-transform ease-in-out 2000ms; */
52+
}
53+
54+
.information__link:link {
55+
color: black;
56+
}
57+
58+
.information__link:hover {
59+
text-decoration: none;
60+
}
61+
.information__link:focus,
62+
.information__link:visited {
63+
color: black;
64+
}
65+
66+
.color__black {
67+
background-color: black;
68+
height: 25px;
69+
width: 25px;
70+
display: inline-block;
71+
}
72+
73+
.color__blue {
74+
background-color: rgb(55, 121, 235);
75+
height: 25px;
76+
width: 25px;
77+
display: inline-block;
78+
}
79+
80+
.color__red {
81+
background-color: rgb(219, 57, 57);
82+
height: 25px;
83+
width: 25px;
84+
display: inline-block;
85+
}
86+
87+
.color__yellow {
88+
background-color: rgb(221, 215, 56);
89+
height: 25px;
90+
width: 25px;
91+
display: inline-block;
92+
}
93+
94+
.color__green {
95+
background-color: rgb(56, 221, 97);
96+
height: 25px;
97+
width: 25px;
98+
display: inline-block;
99+
}
100+
101+
.color__brown {
102+
background-color: rgb(53, 39, 13);
103+
height: 25px;
104+
width: 25px;
105+
display: inline-block;
106+
}
107+
108+
.detail__title {
109+
margin: 0;
110+
}
111+
112+
.detail__title {
113+
text-transform: uppercase;
114+
}
115+
116+
.detail__list {
117+
list-style-type: square;
118+
}
119+
120+
.btn {
121+
background-color: black;
122+
color: white;
123+
width: 100%;
124+
padding: 1em;
125+
border: none;
126+
text-transform: uppercase;
127+
font-weight: 700;
128+
font-size: 1em;
129+
transition: background-color ease-in-out 250ms;
130+
border-top: 4px solid black;
131+
cursor: pointer;
132+
}
133+
134+
.btn:hover {
135+
color: black;
136+
background-color: white;
137+
}
138+
139+
/* FLEXBOX */
140+
.row {
141+
display: flex;
142+
}
143+
144+
.align-items__center {
145+
align-items: center;
146+
}
147+
148+
.justify-content__space-between {
149+
justify-content: space-between;
150+
}
151+
152+
.item-head {
153+
padding: 1em 2em;
154+
}
155+
156+
.item-content {
157+
flex: 0 0 33%;
158+
padding: 1em 2em;
159+
}
160+

‎starter/04-CSS-Layouts/css-grid.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,12 @@
4040
margin: 40px;
4141

4242
/* CSS GRID */
43+
4344
}
4445

4546
.container--2 {
47+
display: none;
48+
4649
/* STARTER */
4750
font-family: sans-serif;
4851
background-color: black;

‎starter/04-CSS-Layouts/index.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,26 @@ <h1>📘 The Code Magazine</h1>
2525
<!-- <strong>This is the navigation</strong> -->
2626
<a href="blog.html">Blog</a>
2727
<a href="#">Challenges</a>
28-
<a href="#">Flexbox</a>
29-
<a href="#">CSS Grid</a>
28+
<a href="flexbox.html">Flexbox</a>
29+
<a href="css-grid.html">CSS Grid</a>
3030
</nav>
3131
</header>
3232

3333
<article>
3434
<header class="post-header">
3535
<h2>The Basic Language of the Web: HTML</h2>
36-
37-
<img
36+
<div class="author-box">
37+
<img
3838
src="img/laura-jones.jpg"
3939
alt="Headshot of Laura Jones"
4040
height="50"
4141
width="50"
42-
/>
43-
44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
46-
</p>
42+
/>
43+
44+
<p id="author" class="author">
45+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
46+
</p>
47+
</div>
4748

4849
<img
4950
src="img/post-img.jpg"

‎starter/04-CSS-Layouts/style.css‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ nav a:link {
197197
display: block; */
198198

199199
margin-right: 30px;
200-
margin-top: 10px;
200+
/* margin-top: 10px; */
201201
display: inline-block;
202202
}
203203

@@ -265,3 +265,46 @@ footer p {
265265
nav p {
266266
font-size: 18px;
267267
} */
268+
269+
/* FLEXBOX */
270+
/* .main-header {
271+
display: flex;
272+
align-items: center;
273+
justify-content: space-between;
274+
}
275+
276+
.author-box {
277+
display: flex;
278+
align-items: center;
279+
margin-bottom: 10px;
280+
}
281+
282+
.author {
283+
margin-bottom: 0;
284+
margin-left: 15px;
285+
} */
286+
287+
/* CSS GRID LAYOUT */
288+
.container {
289+
display: grid;
290+
grid-template-columns: 2fr 1fr;
291+
/* column-gap: 15px; */
292+
}
293+
294+
.main-header {
295+
grid-column: 1 / -1;
296+
/* grid-row: 1; */
297+
}
298+
299+
article {
300+
}
301+
302+
aside {
303+
width: auto;
304+
align-self: start;
305+
}
306+
307+
footer {
308+
grid-column: 1 / -1;
309+
/* grid-row: -1; */
310+
}

0 commit comments

Comments
 (0)