-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (133 loc) · 7.65 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
149
150
151
152
153
<!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>Turtle Bros</title>
<!-- external CSS link -->
<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=Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/menu.css">
<!--swiper css-->
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" integrity="sha256-46r060N2LrChLLb5zowXQ72/iKKNiw/lAmygmHExk/o=" crossorigin="anonymous" />
</head>
<body>
<header>
<img class="logo" src="pics/cover.png" alt="logo">
<nav class="menuContainer">
<div class="openMenu"><i class="fa fa-bars"></i></div>
<ul id="menu">
<li class="menuElements"><a href="index.html" > Home </a></li>
<li class="menuElements"><a href="about.html" >About</a> </li>
<li class="menuElements"><a href="facts.html" >Learn</a> </li>
<li class="menuElements"><a href="donate.html"> Donate</a> </li>
<div class="closeMenu"><i class="fa fa-bars"></i></div>
</ul>
</nav>
</header>
<section id="heroContainer">
<h1>The North Atlantic Current!</h1>
<section class="hero">
<section class="main" >
<img src="pics/turtleSite/SeaTurt.jpg" alt="Sea Turtle"> <!-- nth-child(1)-->
</section>
<article class="imgContainer">
<img class="img top" src="pics/turtlesite/snapperTurt.jpg" alt="SnappingTurtle"> <!-- nth-child(2) flex-end -->
<img class="img top" src="pics/turtlesite/TurtApp.jpg" alt="TurtleOpenMouth"> <!-- nth-child(3) flex-end -->
<img class="img bottom" src="pics/turtlesite/printOuts.png" alt="PrintOuts"> <!-- nth-child(4) flex-wrap -->
<img class="img bottom" src="pics/turtlesite/Types-of-Tortoise.jpg" alt="Types-of-Tortoise"> <!-- nth-child(5) flex-wrap -->
</article>
</section>
</section>
<!-- Identify -->
<section id="identify">
<h2 class="h2"> Did You Know?</h2>
<p> The use of the term 'turtle', 'tortoise', and 'terrapin' vary by geographic location.
They also don't usually reflect the scientific disctinctions between the different groups.
Click on each Image below to learn more about the different groups! </p>
<section class="identifyContainer">
<!-- come up with some type of wrapper tag to go here. need 3s-->
<section class="slide-container swiper">
<section class="slide-content">
<section class="cardWrapper swiper-wrapper">
<section class="card tortoise swiper-slide">
<section class="imgContent">
<span class="overlayA">
<div class="cardImg">
<img src="pics/turtleSite/africanTort.jpg" alt="AfricanTortoise" class="innerImg africanTort">
</div>
</span>
</section>
<section class=" intro" >
<h2> Testudine: Tortoise </h2>
<p class="cardBody">
<!-- info about species-->
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquid accusantium illo ut vel molestiae, nobis aliquam
quidem minima asperiores quis sed pariatur eum blanditiis corporis,
animi vitae quo ducimus nulla quaerat ea facilis earum! Dolores!
</p>
<button>Learn More</button>
</section>
</section>
<section class=" card turtle swiper-slide">
<section class="imgContent">
<span class="overlayB">
<div class="cardImg">
<img src="pics/turtleSite/hawksbill.jpg" alt="Hawksbill" class="innerImg hawksbill">
</div>
</span>
</section>
<section class="intro " >
<h2> Testudine: Turtle </h2>
<p class="cardBody">
l Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquid accusantium illo ut vel molestiae, nobis aliquam
quidem minima asperiores quis sed pariatur eum blanditiis corporis,
animi vitae quo ducimus nulla quaerat ea facilis earum! Dolores.
</p>
<button>Learn More</button>
</section>
</section>
<section class="card terrapin swiper-slide">
<section class="imgContent">
<span class="overlayC">
<div class="cardImg">
<img src="pics/turtleSite/dbTerrapin.jpg" alt="DiamondBack" class="innerImg db">
</div>
</span>
</section>
<section class=" intro " >
<h2> Testudine: Terrapin </h2>
<p class="cardBody">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aliquid accusantium illo ut vel molestiae, nobis aliquam
quidem minima asperiores quis sed pariatur eum blanditiis corporis,
animi vitae quo ducimus nulla quaerat ea facilis earum! Dolores!
</p>
<button>Learn More</button>
</section>
</section>
</section>
</section>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</section>
</section>
</section>
<!--main js-->
<script type="text/javascript" src="js/main.js"> </script>
<!-- Swiper JS-->
<script src="js/swiper-bundle.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<!--Javascript-->
<script src="js/script.js"></script>
</body>
</html>