-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (101 loc) · 4.27 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
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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>Champs Boxing Gym</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=Roboto&family=Smooch&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="top">
<nav class="cross-screen-section">
<div id="nav-logo">
<a href="#">Champs<img src="./assets/logo-transparent.png" alt="Champs Boxing">Boxing</a>
</div>
<ul id="nav-menu">
<li>Programs</li>
<li>Coaches</li>
<li>Gym</li>
<li>About</li>
</ul>
</nav>
<div class="hero-item cross-screen-section">
<div class="hero-information">
<div class="hero-main-text">Boxing gym for champions</div>
<div class="hero-secondary-text">
Train to the highest standards with some of the best boxing coaches in the world.
We'll help you to improve you boxing skills and stamina whilst creating fun and enjoyment.
Come joining us to strive to become champion of your life!</div>
<button class="hero-signup-button">Sign up</button>
</div>
<div class="hero-image">
<img src="./assets/logo.jpg" alt="placeholder for an image">
</div>
</div>
</div>
<div id="information">
<div class="information-header">Our Star Coaches</div>
<div class="details-group cross-screen-section">
<div class="details">
<div class="details-image">
<img src="assets/ali.jpeg" alt="Muhammad Ali">
</div>
<div class="details-name">Muhammad Ali</div>
</div>
<div class="details">
<div class="details-image">
<img src="assets/tyson.jpeg" alt="Muhammad Ali">
</div>
<div class="details-name">Mike Tyson</div>
</div>
<div class="details">
<div class="details-image">
<img src="assets/ca.jpeg" alt="Muhammad Ali">
</div>
<div class="details-name">Canelo Alvarez</div>
</div>
<div class="details">
<div class="details-image">
<img src="assets/mayweather.jpeg" alt="Muhammad Ali">
</div>
<div class="details-name">Floyd Mayweather</div>
</div>
<div class="details">
<div class="details-image">
<img src="assets/pacquiao.jpeg" alt="Muhammad Ali">
</div>
<div class="details-name">Manny Pacquiao</div>
</div>
</div>
</div>
<div id="quote">
<div class="quote-text cross-screen-section">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque ac leo lacinia, interdum risus quis, vulputate sem.
Sed interdum justo efficitur tincidunt vehicula.
Suspendisse dapibus eget felis non cursus.
Fusce eget diam vitae enim egestas finibus.
Curabitur convallis mi porttitor, egestas sem a, aliquam justo.
<div class="quote-author">
- Thor, God of Thunder
</div>
</div>
</div>
<div id="action">
<div class="action-container cross-screen-section">
<div class="action-information">
<div class="action-title">Call to book a induction today!</div>
<div class="action-subtitle">Sign up for our world class program by clicking that button right over there!</div>
</div>
<button class="action-signup-button">Sign up</button>
</div>
</div>
<div id="footer">
<a href="https://github.com/whoisyulu" target="_blank">whoisyulu</a> @ The Odin Project 2022
</div>
</body>
</html>