-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (133 loc) · 5.31 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blank Template</title>
<!-- external fonts links -->
<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=Open+Sans:wght@300;400;500;600;700&Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- external Icon Fonts link -->
<script src="https://kit.fontawesome.com/295cd3caf5.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="headerHeroWrapper">
<header>
<a href="#">
<img class="logo" src="https://levelgroundmma.org/assets/image/lg_logo_white.png" alt="logo">
</a>
<nav>
<a href="#">Classes</a>
<a href="#">Hire Us</a>
</nav>
<a href="#" class="button">DONATE</a>
</header>
<section class="hero">
<h1>Where <span class="grit">Grit </span>Meets Opportunity</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.Qui voluptatum nulla facere fugit, aperiam mollitia nemoipsa a eligendi velit rem voluptas autem repudiandae dictaoptio aut consectetur expedita dolores, excepturi minimanam impedit! Repellendus quis vel doloribus eum animi esseautem! Quos nesciunt in architecto cupiditate neque adsuscipit.
</p>
<a href="#">
<div class="vidWrapper">
<span class="material-icons iconHeight">play_circle_outline</span>
<span>Watch the Video</span>
</div>
</a>
</section>
</section>
<section class="why">
<div class="inner">
<h2>Why</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga aspernatur quaerat debitis optio quisquam tempora perferendis? Corrupti odio, est ipsam, facilis quibusdam ratione, odit inventore commodi qui quos expedita voluptatem.
</p>
</div>
</section>
<section class="services">
<div class="divLeft">
<img src="https://placeimg.com/350/200/tech" alt="Placeholder Image">
<h3>Visit The Gym</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea natus saepe quaerat autem reiciendis delectus adipisci numquam dicta libero debitis aperiam sint unde in nam, officiis dolorum harum tempore voluptatem id, iusto alias. Aut nihil doloribus cum quia, voluptates a.
</p>
<a href="#" class="seeClassesBtn">See Classes</a>
</div>
<div class="divRight">
<img src="https://placeimg.com/350/200/tech" alt="Placeholder Image">
<h3>Have Us Visit You</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea natus saepe quaerat autem reiciendis delectus adipisci numquam dicta libero debitis aperiam sint unde in nam, officiis dolorum harum tempore voluptatem id, iusto alias. Aut nihil doloribus cum quia, voluptates a.
</p>
<a href="#" class="hireUsBtn">Hire Us</a>
</div>
</section>
<section class="volunteer">
<div class="inner">
<h3>Volunteer With Level Ground</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea natus saepe quaerat autem reiciendis delectus adipisci numquam dicta libero debitis aperiam sint unde in nam, officiis dolorum harum tempore voluptatem id, iusto alias. Aut nihil doloribus cum quia, voluptates a.
</p>
<a href="#" class="VolunteerBtn">Volunteer</a>
</div>
</section>
<footer>
<div class="footerInfoWrapper">
<section class="footerLeft">
<div class="socials">
<ul>
<li><a href="https://www.facebook.com"><i class="fa-brands fa-facebook-square iconHeight"></i></a></li>
<li><a href="https://www.twitter.com"><i class="fa-brands fa-twitter iconHeight"></i></a></li>
<li><a href="mailto:[email protected]"><i class="fa-solid fa-envelope iconHeight"></i></a></li>
</ul>
</div>
<div class="siteMap">
<span>Site Map</span>
<ul>
<li><a href="#">Classes</a></li>
<li><a href="#">Hire Us</a></li>
</ul>
</div>
<div class="contribute">
<span>Contribute</span>
<ul>
<li><a href="#">Give</a></li>
<li><a href="#">Volunteer</a></li>
</ul>
</div>
</section>
<section class="footerRight">
<h4>
<ul>
<li>Level Ground</li>
<li>Mixed Martial Arts</li>
</ul>
</h4>
<ul>
<li>50 Milk Street, Floor 17</li>
<li>Boston, MA, 02109</li>
<li>410-533-0210</li>
<li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
</section>
</div>
<section class="footerBtm">
<div class="footerBtmInner">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus corrupti officia beatae dicta sint laboriosam.
</p>
<a href="#">
<img class="btmlogo" src="https://levelgroundmma.org/assets/image/lg_logo_white.png" alt="logo">
</a>
</div>
</section>
</footer>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>