-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (171 loc) · 14.2 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cats</title>
<link rel="icon" type="image/x-icon" href="C:\Users\bbayi\OneDrive\Masaüstü\WebUygulama\images\favicon.ico">
<style>
body{
background-color: aliceblue;
}
dl{
text-align: center;
font-family: "Arial", sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
font-family: "Arial", sans-serif;
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 1rem;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
h3{
font-family: "Arial", sans-serif;
text-align: center;
}
p, h2, h1{
font-family: "Arial", sans-serif;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a style="color:blue;">CATS</a></li>
<li><a href="#a1">Home</a></li>
<li><a href="#a2">News</a></li>
<li><a href="#a3">About</a></li>
<li><a href="#a4">Contact</a></li>
</ul>
</nav>
</header>
<section>
<main>
<section style="background-color:silver">
<h1> id="a1" style="text-align:center;" >Mysterious Cats</h1>
<p>
<img src="images/mysteriousCat.jpg" alt="Cat" style="float:right;width:2rem;height:20rem;" >
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam qui distinctio accusantium ducimus exercitationem dicta aliquam adipisci, aliquid enim unde, sit nesciunt quidem! Optio nobis amet reprehenderit explicabo porro, modi exercitationem saepe labore itaque eveniet, consequuntur doloribus, omnis illo consequatur aut facilis maxime ea? Nesciunt dolorum ipsam excepturi. Consequatur eaque eius voluptatem pariatur deleniti odio vero nulla aliquid aperiam ipsa ex nesciunt, quis fugiat optio perspiciatis exercitationem aliquam asperiores animi suscipit. Possimus quae rerum perspiciatis officia amet! Nesciunt odit voluptate perspiciatis, neque esse eaque consequatur nobis veniam animi ipsam natus corporis voluptatibus. Nisi nemo id nihil? Magni dolorem nemo deleniti et doloremque culpa labore animi, qui eius dolore vel est repudiandae? Natus dolorem deserunt temporibus maiores alias, eaque blanditiis saepe! Iure assumenda sunt facilis excepturi esse itaque placeat, tempore, odio voluptatibus veritatis nulla culpa sapiente voluptate. Sed deserunt aspernatur amet debitis! Soluta, facere quod aliquid voluptate doloremque sunt architecto quos quam enim neque nam cumque officiis ipsa distinctio. Voluptatum consequatur repellendus sint fugit incidunt vel animi mollitia tempora illo rem, ullam minus cumque doloribus dignissimos, a iure possimus aliquam quis deleniti. Ipsum laudantium aliquam inventore laboriosam blanditiis rerum voluptatibus iure, beatae architecto doloremque. Fugiat totam sit laborum nemo fuga neque nulla accusantium esse quis asperiores eos animi hic autem ratione non est amet placeat cumque facilis, praesentium ab ea eum distinctio optio. Esse cupiditate laboriosam rem qui assumenda, soluta porro recusandae asperiores. Inventore, debitis earum. Quibusdam similique voluptates at nihil accusamus sunt culpa corrupti quae, eaque ad, dicta saepe? Molestias consectetur aliquam velit aspernatur provident. Id adipisci illum consectetur consequuntur mollitia voluptatum voluptas est dolor, deserunt natus debitis, minus perspiciatis, sed saepe? Non dolores eius dolore? Obcaecati sed necessitatibus nam quisquam optio quis delectus. Porro corporis magni corrupti alias dignissimos, laboriosam fugit, enim ducimus repellendus debitis distinctio cupiditate dolores provident error cumque ipsam eius doloribus voluptas ex placeat. Aliquid atque hic minus at tempore quos repellat. Velit sapiente perferendis architecto, dignissimos provident quaerat. Sunt quo iusto dolor. Quo quidem harum perspiciatis atque aut iure numquam saepe modi suscipit, delectus, praesentium ad natus porro libero adipisci officiis consequatur laudantium nemo excepturi ducimus quia voluptatem molestias? Accusantium, porro corporis! Hic fugiat voluptas nihil laboriosam repellat eum. Quibusdam pariatur repellat maiores ipsum tempora laudantium accusamus deserunt, sapiente ad? Numquam ratione magni dolorum quaerat, sit laborum id nihil, molestias a, explicabo ab dignissimos porro? Reiciendis sit necessitatibus veritatis ratione dolores consectetur, perferendis illum explicabo ipsum repellendus id dignissimos repudiandae, dolorum laborum doloribus repellat, atque sequi quo. Aliquid delectus obcaecati pariatur assumenda quos laboriosam, error reprehenderit omnis dicta dignissimos debitis illum quas quaerat deleniti facilis dolorum doloremque, magnam similique tempora voluptatem adipisci itaque maiores a numquam? Cumque unde optio laboriosam dignissimos magni. Eaque molestiae dolorum, veniam atque delectus iusto deleniti vitae velit fugit vero, nam dolore blanditiis, non perspiciatis dignissimos earum dolores est vel iste. A quae similique consequuntur et. Amet quis ullam a doloribus fugit voluptatem alias vitae, adipisci consequuntur unde perferendis! Molestiae et ut mollitia eum quisquam perferendis optio quis at quas odit.
</p>
</section>
</main>
</section>
<section>
<main>
<section style="background-color:bisque">
<p>
<img src="images/orangeCat.jpg" alt="Cat" style="float:left;width:2rem;height:20rem;" >
<img src="images/BrownCat.jpg" alt="Cat" style="float:right;width:2rem;height:20rem;" >
<dl >
<h2>Why we liked them?</h2>
<dt >Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, iure?</dt>
<dd >Lorem ipsum dolor sit amet.</dd>
<dt >Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, dolor?</dt>
<dd >Lorem ipsum dolor sit amet.</dd>
<dt >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint, molestias.</dt>
<dd >Lorem ipsum dolor sit amet.</dd>
<dt >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, ab.</dt>
<dd >Lorem ipsum dolor sit amet.</dd>
<dt >Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, iure?</dt>
<dd >Lorem ipsum dolor sit amet.</dd>
<dt >Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, dolor?</dt>
<dd >Lorem ipsum dolor sit amet.</dd>
<dt >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint, molestias.</dt>
<dd >Lorem ipsum dolor sit amet.</dd>
<dt >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, ab.</dt>
</dl>
</p>
</section>
</main>
</section>
<section>
<main>
<section style="background-color:darkgreen;color:white;padding:2rem;">
<h3 id="a2" >News</h3>
<div >
<h2>Estanbul, Turkiye</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nihil ipsum, exercitationem eius voluptatem assumenda eum inventore vero impedit dolore laboriosam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores dolore magnam!</p>
</div>
<div >
<h2>Tokyo, Japan</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nihil ipsum, exercitationem eius voluptatem assumenda eum inventore vero impedit dolore laboriosam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores dolore magnam!</p>
</div>
<div>
<h2>New York City, ABD</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nihil ipsum, exercitationem eius voluptatem assumenda eum inventore vero impedit dolore laboriosam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores dolore magnam!</p>
</div>
<div >
<h2>Amsterdam, Holland</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis nihil ipsum, exercitationem eius voluptatem assumenda eum inventore vero impedit dolore laboriosam?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur dolores dolore magnam!</p>
</div>
</section>
<section style="text-align: center;padding:2rem;">
<h2> Do you like cats? Rate it! </h2></section>
<form style="text-align: center;">
<label for="favcolor">Select your favorite cat color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<input type="submit" value="Submit">
</form>
</main>
</section>
<section style="background-color:darkkhaki;padding:20px;" id="a3">
<main>
<caption><h1 style="text-align:center;">About us</h1></caption>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, provident dolore! Possimus minima facere, rem reprehenderit reiciendis ea eum nostrum corrupti tempora dolore animi beatae magni ipsum ut iste doloremque aperiam earum accusamus natus voluptates. Error similique expedita fugit quia ut tempore enim sequi! Quod, vitae dolores. Aperiam vel perspiciatis iusto corporis reiciendis, rerum sunt. Voluptates debitis mollitia dolorem, quaerat ipsam adipisci accusantium sunt, minima voluptatum aperiam, nobis suscipit eaque nisi veniam quae illo nulla ipsum totam. Rerum distinctio consectetur culpa atque vel hic accusamus omnis, expedita voluptas et consequatur dolor earum maiores architecto commodi. Eos earum quidem, vitae dicta iusto accusamus modi minus nemo, nostrum ullam laboriosam inventore dolorem voluptate! Dolorem dolorum explicabo, sint eligendi quis reiciendis totam repudiandae unde non magni ipsam, aut ullam odit sit facilis? Eum molestias distinctio perspiciatis cum iusto, totam tempora impedit facilis sapiente ab. Beatae qui repellendus aliquam enim veritatis ipsa debitis accusantium et in, similique fugit natus! Suscipit totam cumque quasi nulla voluptate nihil adipisci maxime natus magni voluptatum animi officia eos ipsa odio optio, recusandae dolor? Autem magni neque nam ex quis omnis beatae vitae assumenda aspernatur fugit a rerum nemo, suscipit veritatis, consequatur deserunt repudiandae accusantium numquam perferendis at ratione.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, provident dolore! Possimus minima facere, rem reprehenderit reiciendis ea eum nostrum corrupti tempora dolore animi beatae magni ipsum ut iste doloremque aperiam earum accusamus natus voluptates. Error similique expedita fugit quia ut tempore enim sequi! Quod, vitae dolores. Aperiam vel perspiciatis iusto corporis reiciendis, rerum sunt. Voluptates debitis mollitia dolorem, quaerat ipsam adipisci accusantium sunt, minima voluptatum aperiam, nobis suscipit eaque nisi veniam quae illo nulla ipsum totam. Rerum distinctio consectetur culpa atque vel hic accusamus omnis, expedita voluptas et consequatur dolor earum maiores architecto commodi. Eos earum quidem, vitae dicta iusto accusamus modi minus nemo, nostrum ullam laboriosam inventore dolorem voluptate! Dolorem dolorum explicabo, sint eligendi quis reiciendis totam repudiandae unde non magni ipsam, aut ullam odit sit facilis? Eum molestias distinctio perspiciatis cum iusto, totam tempora impedit facilis sapiente ab. Beatae qui repellendus aliquam enim veritatis ipsa debitis accusantium et in, similique fugit natus! Suscipit totam cumque quasi nulla voluptate nihil adipisci maxime natus magni voluptatum animi officia eos ipsa odio optio, recusandae dolor? Autem magni neque nam ex quis omnis beatae vitae assumenda aspernatur fugit a rerum nemo, suscipit veritatis, consequatur deserunt repudiandae accusantium numquam perferendis at ratione.</p>
<address style="text-align:center;">
<div class="mapouter">
<div class="gmap_canvas"><iframe class="gmap_iframe" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=600&height=400&hl=en&q=The Great Pyramid of Giza&t=&z=17&ie=UTF8&iwloc=B&output=embed"></iframe><a href="https://connectionsgame.org/">Connections Game</a>
</div>
<style>.mapouter{position:relative;text-align:right;width:91rem;height:20rem;}.gmap_canvas {overflow:hidden;background:none!important;width:91rem;height:20rem;}.gmap_iframe {width:91rem!important;height:20rem!important;}</style>
</div>
<address>
Written by <a href="mailto:[email protected]">Caty Cat</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</address>
</main>
</section>
<section style="background-color:darkgrey;padding:2rem;">
<main>
<form id="a4">
<fieldset style="text-align:center;">
<legend style="text-align:center;">Contact with us :</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br>
<label for="email">Enter your email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="email">Enter your message:</label><br>
<textarea name="message" >Cats are cool</textarea><br>
<input style="text-align:center;" type="submit" value="Submit">
</fieldset>
</form>
</main>
</section>
</body>
</html>