-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
95 lines (95 loc) · 4.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fight Club</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&family=Permanent+Marker&family=Road+Rage&family=Rock+Salt&family=Smooch&family=Special+Elite&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav class="desktop">
<ul>
<li><a href="#rules">Rules</a></li>
<li><a href="#quotes">Wisdom</a></li>
<li><a href="#">Get patched up</a></li>
<li><a href="https://tabletalkmagazine.com/posts/modern-fascism-revisited/">Schedule to fight</a></li>
</ul>
</nav>
<nav class="mobile">
<ul>
<li><a href="index.html"><img src="images/home_white_24dp.svg" alt="home icon"></a></li>
<li><a href="#rules"><img src="images/view_list_white_24dp.svg" alt="rules icon"></a></li>
<li><a href="#"><img src="images/local_hospital_white_24dp.svg" alt="first aid icon"></a></li>
<li><a href="https://tabletalkmagazine.com/posts/modern-fascism-revisited/"><img src="images/sports_kabaddi_white_24dp.svg" alt="schedule icon"></a></li>
</ul>
</nav>
</header>
<main>
<section class="banner">
<h1>Fight Club</h1>
<h2 class="desktop">Fistfight therapy</h2>
<h2 class="mobile">Get off your phone and into a fight</h2>
</section>
<section id="rules">
<h2>The Rules of Fight Club</h2>
<ol>
<li>You do not talk about Fight Club.</li>
<li>You <strong>do not</strong> talk about Fight Club.</li>
<li>If someone yells "stop," goes limp, or taps out, the fight is over.</li>
<li>Only two guys to a fight.</li>
<li>One fight at a time.</li>
<li>No shirts, no shoes.</li>
<li>Fights will go on as long as they have to.</li>
<li>If this is your first night at Fight Club, you <strong>have</strong> to fight.</li>
</ol>
</section>
<section>
<div class="container">
<div class="landscape"><img src="images/np_Black male athlete doing boxing training under a bridge_4983m5_free.jpg" alt="shirtless black man with fists up"></div>
<div class="landscape"><img src="images/birmingham-museums-trust-adudERb6uDM-unsplash.jpg" alt="painting of Tom Johnson vs. Isaac Perrins bareknuckle fight"></div>
<div class="landscape"><img src="images/np_Portrait of boxer standing guard position ready to fight_0W6Xjb_free.jpg" alt="shirtless white man with fist up"></div>
</div>
<div id="quotes" class="container">
<div id="never">
<p>May I never be complete.<br>
May I never be content.<br>
May I never be perfect.</p>
</div>
<div id="special">
<p>You are not special.<br>
You're not a beautiful and unique snowflake.<br>
You're the same decaying organic matter as everything else.</p>
</div>
<div id="hit">
<p>I want you to hit me as hard as you can.</p>
</div>
<div id="own">
<p>The things you own<br> end up owning you.</p>
</div>
</div>
<div class="container">
<div class="portrait"><img src="images/morgan-alley-OQCsYSs6q98-unsplash.jpg" alt="shirtless man"></div>
<div class="portrait"><img src="images/lilartsy-7zAMkdSrZM0-unsplash.jpg" alt="hands bleeding over a sink"></div>
<div class="portrait"><img src="images/altin-ferreira-hs6XhCjBMz0-unsplash.jpg" alt="face of man with black eye, cut nose, and bruised lip"></div>
<div class="portrait"><img src="images/enzo-b-rxk9EnwFZrM-unsplash.jpg" alt="back of man wearing Fight Club shirt"></div>
</div>
</section>
</main>
<footer>
<nav class="desktop">
<ul>
<li><a href="#rules">Rules</a></li>
<li><a href="#quotes">Wisdom</a></li>
<li><a href="#">Get patched up</a></li>
<li><a href="https://tabletalkmagazine.com/posts/modern-fascism-revisited/">Schedule to fight</a></li>
<li><a href="credits.html">Photo credits</a></li>
</ul>
</nav>
</footer>
</body>
</html>