-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (123 loc) · 5.8 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
<!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>Yoga Website Project</title>
<!-- Google Fonts -->
<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=Dongle&display=swap" rel="stylesheet">
<!-- CSS Style Sheet -->
<link rel="stylesheet" href="style.css">
</head>
<!-- Nav Bar -->
<nav class="nav-bar">
<div class="logo">
<i class="fas fa-jedi"></i>
<h1>Jedi Yoga</h1>
</div>
<div class="nav-items">
<a href="#home">Home</a>
<a href="#styles">Yoga Styles</a>
<a href="#retreats">Retreats</a>
</div>
<div class="sign-up">
<button>Sign Up</button>
</div>
</nav>
<!-- Header Background -->
<section>
<header id="home" class="header-background">
<div class="header-text">
<h1>Taking yoga to a galaxy far far away...</h1>
</div>
</header>
</section>
<!-- Main Body -->
<body>
<!-- Yoga Styles -->
<section id="styles" class="yoga-styles-section">
<div class="title">
<h1>Styles of Jedi Yoga</h1>
</div>
<div class="yoga-styles">
<div class="styles">
<i class="fab fa-jedi-order"></i>
<h1>Jedi Order</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat optio, ad accusantium, tempora saepe rem possimus placeat nisi aliquam eveniet voluptatum tempore pariatur id debitis. Corrupti, aspernatur? Numquam, reiciendis rerum?</p>
</div>
<div class="styles">
<i class="fab fa-galactic-senate"></i>
<h1>Senate</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat optio, ad accusantium, tempora saepe rem possimus
placeat nisi aliquam eveniet voluptatum tempore pariatur id debitis. Corrupti, aspernatur? Numquam, reiciendis
rerum?</p>
</div>
<div class="styles">
<i class="fab fa-old-republic"></i>
<h1>Old Republic</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat optio, ad accusantium, tempora saepe rem possimus
placeat nisi aliquam eveniet voluptatum tempore pariatur id debitis. Corrupti, aspernatur? Numquam, reiciendis
rerum?</p>
</div>
<div class="styles">
<i class="fab fa-galactic-republic"></i>
<h1>Galactic Republic</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat optio, ad accusantium, tempora saepe rem possimus
placeat nisi aliquam eveniet voluptatum tempore pariatur id debitis. Corrupti, aspernatur? Numquam, reiciendis
rerum?</p>
</div>
</div>
</section>
<!-- Our Retreats Section -->
<section id="retreats" class="retreats-section">
<h1 class="retreats-heading">Come join us at our Yoga retreats...</h1>
<div class="content">
<div class="content-text">
<h1>Hoth</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos optio tenetur incidunt, a cum officia aut corporis amet minima molestias ratione cumque modi veniam porro quisquam quas ullam. Officia, magnam.</p>
</div>
<div class="image-container">
<img class="img-size" src="https://dorksideoftheforce.com/files/2015/04/Hoth02_lg.jpg" alt="Snowey Planet">
</div>
</div>
<div class="content-reverse">
<div class="content-text">
<h1>Tattooine</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos optio tenetur incidunt, a cum officia aut
corporis amet minima molestias ratione cumque modi veniam porro quisquam quas ullam. Officia, magnam.</p>
</div>
<div class="image-container">
<img class="img-size" src="https://cdna.artstation.com/p/assets/images/images/002/537/310/large/oleksandr-pazurenko-tatooine.jpg?1462880426" alt="Desert Planet">
</div>
</div>
<div class="content">
<div class="content-text">
<h1>Coruscant</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos optio tenetur incidunt, a cum officia aut
corporis amet minima molestias ratione cumque modi veniam porro quisquam quas ullam. Officia, magnam.</p>
</div>
<div class="image-container">
<img class="img-size" src="https://lumiere-a.akamaihd.net/v1/images/Coruscant_03db43b4.jpeg?region=0%2C0%2C1536%2C864&width=960" alt="Alien City">
</div>
</div>
<div class="content-reverse">
<div class="content-text">
<h1>Naboo</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos optio tenetur incidunt, a cum officia aut
corporis amet minima molestias ratione cumque modi veniam porro quisquam quas ullam. Officia, magnam.</p>
</div>
<div class="image-container">
<img class="img-size" src="https://media.contentapi.ea.com/content/dam/walrus/images/2018/11/mapvista-theed-grid.jpg.adapt.crop191x100.628p.jpg"
alt="Nature Planet">
</div>
</div>
</section>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/d290f0c815.js" crossorigin="anonymous"></script>
<!-- My JS -->
<script src="./index.js"></script>
</body>
</html>