Skip to content

Commit 3643c8d

Browse files
iamserdaiamserda
committed
minor changes
1 parent 909bb6e commit 3643c8d

File tree

3 files changed

+166
-26
lines changed

3 files changed

+166
-26
lines changed

‎starter/02-HTML-Fundamentals/challenges/index.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,114 @@
1+
html {
2+
height: 100vh;
3+
}
4+
5+
html,
6+
body {
7+
min-height: 100%;
8+
}
9+
10+
main {
11+
height: 100%;
12+
margin: auto;
13+
}
14+
15+
footer {
16+
margin-top: auto;
17+
}
18+
19+
.component * {
20+
color: black;
21+
}
22+
23+
.component {
24+
position: relative;
25+
background-color: white;
26+
color: black;
27+
border: 5px solid black;
28+
padding: 1em 1em 2em;
29+
width: 90%;
30+
margin: 1em auto;
31+
}
32+
33+
.component h1 {
34+
color: black;
35+
margin: 0 auto 1em;
36+
text-align: center;
37+
font-size: 2em;
38+
}
39+
40+
h2 {
41+
font-size: 1em;
42+
}
43+
144
.component img {
245
width: 100%;
346
max-width: 300px;
447
height: auto;
48+
padding-right: 1em;
49+
}
50+
51+
.component button {
52+
position: absolute;
53+
bottom: 0;
54+
left: 0;
55+
border: none;
56+
padding: 0.5em 1em;
57+
background-color: black;
58+
color: white;
59+
font-size: 1rem;
60+
font-weight: bold;
61+
}
62+
63+
.component a:link {
64+
color: black;
65+
padding: 0.125em 0.25em;
66+
}
67+
68+
.component a:visited {
69+
color: grey;
70+
}
71+
72+
.component a:hover {
73+
background-color: black;
74+
color: white;
75+
}
76+
77+
.component a:active {
78+
background-color: blue;
79+
color: white;
80+
}
81+
82+
83+
/* .clearfix:after {
84+
content: "";
85+
clear: both;
86+
} */
87+
88+
#component2 button {
89+
width: 100%;
90+
padding: 0.5em;
91+
font-size: 1.25rem;
92+
border-top: 5px solid black;
93+
clear: both;
94+
}
95+
96+
#component2 button:hover {
97+
background-color: white;
98+
color: black;
99+
100+
}
101+
102+
#component1 .product-image,
103+
#component2 .product-image,
104+
#component1 .product-description,
105+
#component2 .product-description {
106+
float: left;
107+
}
108+
109+
#component1 .clearfix::after,
110+
#component2 .clearfix::after {
111+
content: "";
112+
display: block;
113+
clear: both;
5114
}

‎starter/02-HTML-Fundamentals/challenges/index.html‎

Lines changed: 56 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,71 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>Challenges</title>
9-
<!-- <link rel="stylesheet" href="../index.css"> -->
9+
<link rel="stylesheet" href="../index.css">
1010
<link rel="stylesheet" href="index.css">
1111
</head>
1212

13-
<body>
13+
<body class="container-col">
1414
<header>
15-
<h1>Challenges</h1>
16-
<ul>
17-
<li><a href="../">Home</a></li>
18-
<li><a href="../blog/">Blog</a></li>
19-
</ul>
15+
<h1 class="brandname">FrontendWorks Challenges</h1>
16+
<nav>
17+
<ul>
18+
<li><a href="../">Home</a></li>
19+
<li><a href="../blog/">Blog</a></li>
20+
</ul>
21+
</nav>
2022
</header>
2123
<main>
22-
<div class="component">
23-
<h1>Converse Chuck Taylor All-Star Low Top</h1>
24-
<img src="challenges.jpg"
25-
alt="a person wearing jeans and a pair of chuck tailor black with white soles and cap." />
26-
<p><strong>USD $65.00</strong></p>
27-
<p>Free Shipping</p>
28-
<p>Ready to dress up or dress down? These classic canvas Chucks are an everyday wardrobe staple.</p>
29-
<p><a href="#">More info →</a></p>
30-
<div>
31-
<h2>Product details:</h2>
32-
<ul>
33-
<li>Lightweight, durable canvas sneaker.</li>
34-
<li>Lightweight padded footbed for added comfort.</li>
35-
<li>Iconic Chuck Taylor ankle patch.</li>
36-
</ul>
24+
<div id="component" class="container-col">
25+
<div id="component1" class="component clearfix">
26+
<h1>Converse Chuck Taylor All-Star Low Top</h1>
27+
28+
<img class="product-image" src="challenges.jpg"
29+
alt="a person wearing jeans and a pair of Chuck Taylor black with white soles and cap." />
30+
<div class="product-description pricing">
31+
<p><strong>USD $65.00</strong></p>
32+
<p>Free Shipping</p>
33+
<p>Ready to dress up or dress down? These classic canvas Chucks are an everyday wardrobe staple.</p>
34+
<a href="#">More info →</a>
35+
<div>
36+
<h2>Product details:</h2>
37+
<ul>
38+
<li>Lightweight, durable canvas sneaker.</li>
39+
<li>Lightweight padded footbed for added comfort.</li>
40+
<li>Iconic Chuck Taylor ankle patch.</li>
41+
</ul>
42+
</div>
43+
</div>
44+
45+
<button>Add to Cart</button>
3746
</div>
38-
<button>Add to Cart</button>
39-
</div>
47+
<div id="component2" class="component clearfix">
48+
<h1>Converse Chuck Taylor All-Star Low Top</h1>
4049

50+
<img class="product-image" src="challenges.jpg"
51+
alt="a person wearing jeans and a pair of Chuck Taylor black with white soles and cap." />
52+
<div class="product-description pricing">
53+
<p><strong>USD $65.00</strong></p>
54+
<p>Free Shipping</p>
55+
<p>Ready to dress up or dress down? These classic canvas Chucks are an everyday wardrobe staple.</p>
56+
<a href="#">More info →</a>
57+
<div>
58+
<h2>Product details:</h2>
59+
<ul>
60+
<li>Lightweight, durable canvas sneaker.</li>
61+
<li>Lightweight padded footbed for added comfort.</li>
62+
<li>Iconic Chuck Taylor ankle patch.</li>
63+
</ul>
64+
</div>
65+
</div>
66+
67+
<button>Add to Cart</button>
68+
</div>
69+
</div>
4170
</main>
42-
<footer></footer>
71+
<!-- <footer>
72+
<p>Made by <a href="https://twitter.com/iamserda">@iamserda</a>. Circa Summer 2021.</p>
73+
</footer> -->
4374
</body>
4475

4576
</html>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
<body class="container-col">
1313
<header>
14-
<h1 class="brandname">📘 FrontendOutpost 📘</h1>
14+
<h1 class="brandname">📘 FrontendWorks Times 📘</h1>
1515
<nav>
1616
<ul>
1717
<li><a href="index.html">Home</a></li>

0 commit comments

Comments
 (0)