-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (147 loc) · 4.71 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
141
142
143
144
145
146
147
148
<!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" />
<link rel="stylesheet" href="styles/styles.css" />
<script
src="https://kit.fontawesome.com/0499a3b8f3.js"
crossorigin="anonymous"
></script>
<title>Under the Sea</title>
</head>
<body>
<header class="indexHeader">
<nav class="navBar wrapper">
<ul>
<l1><a href="index.html">Home</a></l1>
<l1><a href="#">About</a></l1>
<l1><a href="blog.html">Blog</a></l1>
<l1><a href="contact.html">Contact</a></l1>
</ul>
</nav>
<div class="headerContent">
<h1>Under the Sea</h1>
<img
src="under-the-sea-assets/home-box-header.png"
alt="goldfish swimming"
class="goldfish"
/>
</div>
</header>
<main class="indexMain">
<div class="wrapper underSea">
<h2>What is under the sea?</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima
beatae nam inventore! Inventore eius exercitationem voluptatem soluta
dolorum quis veniam nisi veritatis. Quis amet, saepe neque quidem cum
nostrum eum?
</p>
<button>find out more</button>
</div>
</main>
<section class="discover">
<div class="discoverBox1">
<div class="discoverImage1">
<img
src="under-the-sea-assets/left-image.jpg"
alt="child observing aquarium"
/>
</div>
<div class="discoverContent">
<h3>New Additions</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In
similique ea nesciunt sint excepturi quisquam!
</p>
<button>Read more</button>
</div>
</div>
<div class="discoverBox2">
<div class="discoverContent">
<h3>Meet Real Nemo</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. In
similique ea nesciunt sint excepturi quisquam!
</p>
<button>Read more</button>
</div>
<div class="discoverImage2">
<img
src="under-the-sea-assets/right-image.jpg"
alt="Clown Fish, AKA Nemo"
/>
</div>
</div>
</section>
<section class="connections">
<div class="wrapper connectionsSub">
<div>
<h3><i class="fa-solid fa-location-arrow"></i>Locations</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vitae
aliquid ex possimus. Nulla, voluptatibus?
</p>
</div>
<div>
<h3><i class="fa-solid fa-users-line"></i>Community</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vitae
aliquid ex possimus. Nulla, voluptatibus?
</p>
</div>
<div>
<h3><i class="fa-solid fa-sheet-plastic"></i>Blog</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vitae
aliquid ex possimus. Nulla, voluptatibus?
</p>
</div>
<div>
<h3><i class="fa-solid fa-square-phone"></i>Get in Touch</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic vitae
aliquid ex possimus. Nulla, voluptatibus?
</p>
</div>
</div>
</section>
<div class="banner"></div>
<section class="monthProfile">
<div class="wrapper profileContainer">
<div class="monthFish">
<img src="under-the-sea-assets/small-box.jpg" alt="school of fish" />
</div>
<div class="monthText">
<h3>this month profile</h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia,
voluptatibus! Veritatis, ab deserunt! Blanditiis vitae odit mollitia
repellat? Est nobis odio vero nostrum, aspernatur quaerat dicta
exercitationem quis optio officia!
</p>
<button>find out more</button>
</div>
</div>
</section>
<section class="gallery">
<!-- <div class="wrapper"> -->
<img
src="under-the-sea-assets/gallery-image-1.jpg"
alt="girl at aqaurium"
/>
<img
src="under-the-sea-assets/gallery-image-2.jpg"
alt="Shark in aquarium"
/>
<img
src="under-the-sea-assets/gallery-image-3.jpg"
alt="Fish in aqaurium"
/>
<!-- </div> -->
</section>
<footer><p>Copyright © 2018 HackerYou</p></footer>
</body>
</html>