Skip to content

Commit 6780f99

Browse files
WebDevSimplifiedWebDevSimplified
committed
Lesson 3 Files
1 parent 8a5fd59 commit 6780f99

17 files changed

+614
-0
lines changed

‎Introduction to CSS/Lesson 3/Fonts/Booter - Zero Zero.woff

37.9 KB
Binary file not shown.

‎Introduction to CSS/Lesson 3/Fonts/Booter - Zero Zero.woff2

30.2 KB
Binary file not shown.

‎Introduction to CSS/Lesson 3/Images/Album 1.png

156 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Album 2.png

138 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Album 3.png

135 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Album 4.png

146 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Band Members.png

10.7 MB
Loading

‎Introduction to CSS/Lesson 3/Images/Cofee.png

33.3 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Facebook Logo.png

889 Bytes
Loading

‎Introduction to CSS/Lesson 3/Images/Header Background.jpg

565 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Shirt.png

128 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Spotify Logo.png

2.92 KB
Loading

‎Introduction to CSS/Lesson 3/Images/Youtube Logo.png

2.55 KB
Loading

‎Introduction to CSS/Lesson 3/about.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Generics | About</title>
5+
<meta name="description" content="This is the description">
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<header class="main-header">
10+
<nav class="nav main-nav">
11+
<ul>
12+
<li><a href="index.html">HOME</a></li>
13+
<li><a href="store.html">STORE</a></li>
14+
<li><a href="about.html">ABOUT</a></li>
15+
</ul>
16+
</nav>
17+
<h1 class="band-name band-name-large">The Generics</h1>
18+
</header>
19+
20+
<section class="content-section container">
21+
<h2 class="section-header">ABOUT</h2>
22+
<img class="about-band-image" src="Images/Band Members.png">
23+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.</p>
24+
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.</p>
25+
</section>
26+
27+
<footer class="main-footer">
28+
<div class="container main-footer-container">
29+
<h3 class="band-name">The Generics</h3>
30+
<ul class="nav footer-nav">
31+
<li>
32+
<a href="https://www.youtube.com" target="_blank">
33+
<img src="Images/YouTube Logo.png">
34+
</a>
35+
</li>
36+
<li>
37+
<a href="https://www.spotify.com" target="_blank">
38+
<img src="Images/Spotify Logo.png">
39+
</a>
40+
</li>
41+
<li>
42+
<a href="https://www.facebook.com" target="_blank">
43+
<img src="Images/Facebook Logo.png">
44+
</a>
45+
</li>
46+
</ul>
47+
</div>
48+
</footer>
49+
</body>
50+
</html>

‎Introduction to CSS/Lesson 3/index.html

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Generics</title>
5+
<meta name="description" content="This is the description">
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<header class="main-header">
10+
<nav class="nav main-nav">
11+
<ul>
12+
<li><a href="index.html">HOME</a></li>
13+
<li><a href="store.html">STORE</a></li>
14+
<li><a href="about.html">ABOUT</a></li>
15+
</ul>
16+
</nav>
17+
<h1 class="band-name band-name-large">The Generics</h1>
18+
<div class="container">
19+
<button type="button" class="btn btn-header">Get our Latest Album</button>
20+
</div>
21+
<button type="button" class="btn btn-header btn-play">&#9658;</button>
22+
</header>
23+
<section class="content-section container">
24+
<h2 class="section-header">TOURS</h2>
25+
<div>
26+
<div class="tour-row">
27+
<span class="tour-item tour-date">JUL 16</span>
28+
<span class="tour-item tour-city">DETROIT, MI</span>
29+
<span class="tour-item tour-arena">DTE ENERGY MUSIC THEATRE</span>
30+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
31+
</div>
32+
<div class="tour-row">
33+
<span class="tour-item tour-date">JUL 19</span>
34+
<span class="tour-item tour-city">TORONTO, ON</span>
35+
<span class="tour-item tour-arena">BUDWEISER STAGE</span>
36+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
37+
</div>
38+
<div class="tour-row">
39+
<span class="tour-item tour-date">JUL 22</span>
40+
<span class="tour-item tour-city">BRISTOW, VA</span>
41+
<span class="tour-item tour-arena">JIGGY LUBE LIVE</span>
42+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
43+
</div>
44+
<div class="tour-row">
45+
<span class="tour-item tour-date">JUL 29</span>
46+
<span class="tour-item tour-city">PHOENIX, AZ</span>
47+
<span class="tour-item tour-arena">AK-CHIN PAVILION</span>
48+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
49+
</div>
50+
<div class="tour-row">
51+
<span class="tour-item tour-date">AUG 2</span>
52+
<span class="tour-item tour-city">LAS VEGAS, NV</span>
53+
<span class="tour-item tour-arena">T-MOBILE ARENA</span>
54+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
55+
</div>
56+
<div class="tour-row">
57+
<span class="tour-item tour-date">AUG 7</span>
58+
<span class="tour-item tour-city">CONCORD, CA</span>
59+
<span class="tour-item tour-arena">CONCORD PAVILION</span>
60+
<button type="button" class="tour-item tour-btn btn btn-primary">BUY TICKETS</button>
61+
</div>
62+
</div>
63+
</section>
64+
<footer class="main-footer">
65+
<div class="container main-footer-container">
66+
<h3 class="band-name">The Generics</h3>
67+
<ul class="nav footer-nav">
68+
<li>
69+
<a href="https://www.youtube.com" target="_blank">
70+
<img src="Images/YouTube Logo.png">
71+
</a>
72+
</li>
73+
<li>
74+
<a href="https://www.spotify.com" target="_blank">
75+
<img src="Images/Spotify Logo.png">
76+
</a>
77+
</li>
78+
<li>
79+
<a href="https://www.facebook.com" target="_blank">
80+
<img src="Images/Facebook Logo.png">
81+
</a>
82+
</li>
83+
</ul>
84+
</div>
85+
</footer>
86+
</body>
87+
</html>

‎Introduction to CSS/Lesson 3/store.html

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>The Generics | Store</title>
5+
<meta name="description" content="This is the description">
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<header class="main-header">
10+
<nav class="main-nav nav">
11+
<ul>
12+
<li><a href="index.html">HOME</a></li>
13+
<li><a href="store.html">STORE</a></li>
14+
<li><a href="about.html">ABOUT</a></li>
15+
</ul>
16+
</nav>
17+
<h1 class="band-name band-name-large">The Generics</h1>
18+
</header>
19+
<section class="container content-section">
20+
<h2 class="section-header">MUSIC</h2>
21+
<div class="shop-items">
22+
<div class="shop-item">
23+
<span class="shop-item-title">Album 1</span>
24+
<img class="shop-item-image" src="Images/Album 1.png">
25+
<div class="shop-item-details">
26+
<span class="shop-item-price">$12.99</span>
27+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
28+
</div>
29+
</div>
30+
<div class="shop-item">
31+
<span class="shop-item-title">Album 2</span>
32+
<img class="shop-item-image" src="Images/Album 2.png">
33+
<div class="shop-item-details">
34+
<span class="shop-item-price">$14.99</span>
35+
<button class="btn btn-primary shop-item-button"type="button">ADD TO CART</button>
36+
</div>
37+
</div>
38+
<div class="shop-item">
39+
<span class="shop-item-title">Album 3</span>
40+
<img class="shop-item-image" src="Images/Album 3.png">
41+
<div class="shop-item-details">
42+
<span class="shop-item-price">$9.99</span>
43+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
44+
</div>
45+
</div>
46+
<div class="shop-item">
47+
<span class="shop-item-title">Album 4</span>
48+
<img class="shop-item-image" src="Images/Album 4.png">
49+
<div class="shop-item-details">
50+
<span class="shop-item-price">$19.99</span>
51+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
52+
</div>
53+
</div>
54+
</div>
55+
</section>
56+
<section class="container content-section">
57+
<h2 class="section-header">MERCH</h2>
58+
<div class="shop-items">
59+
<div class="shop-item">
60+
<span class="shop-item-title">T-Shirt</span>
61+
<img class="shop-item-image" src="Images/Shirt.png">
62+
<div class="shop-item-details">
63+
<span class="shop-item-price">$19.99</span>
64+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
65+
</div>
66+
</div>
67+
<div class="shop-item">
68+
<span class="shop-item-title">Coffee Cup</span>
69+
<img class="shop-item-image" src="Images/Cofee.png">
70+
<div class="shop-item-details">
71+
<span class="shop-item-price">$6.99</span>
72+
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
73+
</div>
74+
</div>
75+
</div>
76+
</section>
77+
<section class="container content-section">
78+
<h2 class="section-header">CART</h2>
79+
<div class="cart-row">
80+
<span class="cart-item cart-header cart-column">ITEM</span>
81+
<span class="cart-price cart-header cart-column">PRICE</span>
82+
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
83+
</div>
84+
<div class="cart-items">
85+
<div class="cart-row">
86+
<div class="cart-item cart-column">
87+
<img class="cart-item-image" src="Images/Shirt.png" width="100" height="100">
88+
<span class="cart-item-title">T-Shirt</span>
89+
</div>
90+
<span class="cart-price cart-column">$19.99</span>
91+
<div class="cart-quantity cart-column">
92+
<input class="cart-quantity-input" type="number" value="1">
93+
<button class="btn btn-danger" type="button">REMOVE</button>
94+
</div>
95+
</div>
96+
<div class="cart-row">
97+
<div class="cart-item cart-column">
98+
<img class="cart-item-image" src="Images/Album 3.png" width="100" height="100">
99+
<span class="cart-item-title">Album 3</span>
100+
</div>
101+
<span class="cart-price cart-column">$9.99</span>
102+
<div class="cart-quantity cart-column">
103+
<input class="cart-quantity-input" type="number" value="2">
104+
<button class="btn btn-danger" type="button">REMOVE</button>
105+
</div>
106+
</div>
107+
</div>
108+
<div class="cart-total">
109+
<strong class="cart-total-title">Total</strong>
110+
<span class="cart-total-price">$39.97</span>
111+
</div>
112+
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
113+
</section>
114+
<footer class="main-footer">
115+
<div class="container main-footer-container">
116+
<h3 class="band-name">The Generics</h3>
117+
<ul class="nav footer-nav">
118+
<li>
119+
<a href="https://www.youtube.com" target="_blank">
120+
<img src="Images/YouTube Logo.png">
121+
</a>
122+
</li>
123+
<li>
124+
<a href="https://www.spotify.com" target="_blank">
125+
<img src="Images/Spotify Logo.png">
126+
</a>
127+
</li>
128+
<li>
129+
<a href="https://www.facebook.com" target="_blank">
130+
<img src="Images/Facebook Logo.png">
131+
</a>
132+
</li>
133+
</ul>
134+
</div>
135+
</footer>
136+
</body>
137+
</html>

0 commit comments

Comments
 (0)