-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (121 loc) · 5.24 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Zip</title>
<link href="./css/css.css" rel="stylesheet"></head>
<body class="body">
<div class="content">
<div class="header">
<div class="container">
<div class="logo">
<h1 class="logo__text">Wg.</h1>
</div>
<h2 class="container__title">Be sure you put your feet</h2>
<h2 class="container__subtitle">in the right place</h2>
<div class="zip">
<input class="zip__input" type="text" placeholder="Enter your zip.">
<img class="zip__img" src="./images/Zip_images.png" alt="Zip image">
<p class="zip__text">This is Photoshop's version of Lorem Ipsum.</p>
<button class="zip__button">Press me</button>
</div>
</div>
</div>
<div class="boxes">
<div class="container">
<div class="row">
<div class="document">
<div class="box-content">
<img class="box-content__img" src="./images/boxes_document_img.png" alt="Document">
<h2 class="box-content__title">Documents</h2>
<p class="box-content__text">
This is Photoshop's version of Lorem Ipsum. Proin
gravida nibh vel velit auctor aliquet. Aenean sollictudin
</p>
</div>
</div>
<div class="photo">
<div class="box-content">
<img class="box-content__img" src="./images/boxes_photo_img.png" alt="Photo">
<h2 class="box-content__title">Photo</h2>
<p class="box-content__text">
This is Photoshop's version of Lorem Ipsum. Proin
gravida nibh vel velit auctor aliquet. Aenean sollictudin
</p>
</div>
</p>
</div>
</div>
</div>
</div>
<div class="section">
<div class="sec1">
<div class="container">
<h2 class="sec1__title">This is a Heading</h2>
<p class="sec1__text1">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor
aliquet.
Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.
Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. </p>
<p class="sec1__text2">Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed
non mauris vitae erat
consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed
non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum
feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p>
</div>
</div>
<div class="sec2">
<div class="container container_justify">
<img class="sec2__img" src="./images/lap.png" alt="laptop">
<div class="content">
<h2 class="content__title">This is a Heading</h2>
<p class="content__text">Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.
Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum
sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam
pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque.
Suspendisse in orci enim.</p>
<button class="content__btn">Download</button>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="map"></div>
<div class="form-block">
<form action="" class="form">
<input class="form__text" type="text" placeholder="Name" name="name">
<input class="form__email" type="email" placeholder="Email" name="email address">
<textarea class="form__textarea" name="text" cols="30" rows="5" placeholder="Message"></textarea>
<button class="form__btn">✔</button>
</form>
</div>
</div>
</div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {
lat: -25.344,
lng: 131.036
};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementsByClassName('map')[0], {
zoom: 10,
center: uluru
});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCCWn91bSIrM6opXdu-jwgNiCoQ6WFC2MU&callback=initMap"></script>
<script type="text/javascript" src="./js/main.js"></script></body>
</html>