Skip to content

Commit 20b8d39

Browse files
jcsmith3jcsmith3
committed
Finsihed styles for challange
1 parent c97c069 commit 20b8d39

File tree

2 files changed

+117
-12
lines changed

2 files changed

+117
-12
lines changed

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

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
html {
6+
background-color: aliceblue;
7+
max-width: 100vw;
8+
box-sizing: border-box;
9+
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
10+
}
11+
12+
body {
13+
padding: 15px;
14+
}
15+
p {
16+
line-height: 1.5;
17+
}
18+
li {
19+
list-style-type: none;
20+
padding: 3px;
21+
}
22+
23+
a {
24+
text-decoration: none;
25+
}
26+
27+
a:visited {
28+
color: blue;
29+
}
30+
a:hover {
31+
color: lightslategray;
32+
}
33+
a:active {
34+
color: coral;
35+
}
36+
37+
#product_header {
38+
margin: 15px 0;
39+
}
40+
41+
#product_name {
42+
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
43+
text-align: center;
44+
margin: 0;
45+
padding: 0;
46+
}
47+
48+
.product_display {
49+
margin: 0 auto;
50+
display: flex;
51+
flex-direction: column;
52+
align-items: center;
53+
max-width: 800px;
54+
padding: 15px 0;
55+
}
56+
#display_info {
57+
height: 100%;
58+
width: 100%;
59+
display: flex;
60+
flex-flow: column nowrap;
61+
align-self: flex-start;
62+
margin: 15px 0;
63+
}
64+
65+
#display_info .link {
66+
align-self: center;
67+
padding-top: 15px;
68+
}
69+
70+
#product_img {
71+
width: 100%;
72+
max-width: 800px;
73+
}
74+
#product_details {
75+
display: flex;
76+
flex-direction: column;
77+
width: 100%;
78+
}
79+
80+
#product_details h2 {
81+
text-align: center;
82+
margin-bottom: 20px;
83+
border-bottom: 1px dotted rgba(0, 0, 0, 0.463);
84+
}
85+
86+
#product_details button {
87+
width: 60%;
88+
color: aliceblue;
89+
font-weight: 900;
90+
align-self: center;
91+
border: none;
92+
border-radius: 5px;
93+
box-shadow: 3px 3px 5px gray;
94+
background-color: rgb(76, 85, 85);
95+
margin: 25px 0;
96+
padding: 5px 0;
97+
cursor: pointer;
98+
}

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

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,32 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="challange.css" />
78
<title>Challange 2</title>
89
</head>
910
<body>
10-
<header>
11-
<h1>Converse Chuck Taylor All Star Low Top</h1>
11+
<header id="product_header">
12+
<h1 id="product_name">Converse Chuck Taylor All Star Low Top</h1>
1213
</header>
1314
<main>
1415
<article>
15-
<section>
16-
<img src="./images/challenges.jpg" alt="Converse shoes" />
17-
<p><strong>$65.00</strong></p>
18-
<p>Free Shipping</p>
19-
<p>
20-
Ready to dress up or down, these classic canvas Chucks are an
21-
everyday wardrobe staple.
22-
</p>
23-
<p><a href="#">More information &#8594;</a></p>
16+
<section class="product_display">
17+
<img
18+
id="product_img"
19+
src="./images/challenges.jpg"
20+
alt="Converse shoes"
21+
/>
22+
<div id="display_info">
23+
<p><strong>$65.00</strong></p>
24+
<p>Free Shipping</p>
25+
<p>
26+
Ready to dress up or down, these classic canvas Chucks are an
27+
everyday wardrobe staple.
28+
</p>
29+
<a class="link" href="#">More information &#8594;</a>
30+
</div>
2431
</section>
25-
<section>
32+
<section id="product_details">
2633
<h2>Product details</h2>
2734
<ul>
2835
<li>Lightweight, durable canvas sneaker</li>

0 commit comments

Comments
 (0)