-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
85 lines (83 loc) · 4.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/mobilefirst/style.css">
<link rel="stylesheet" href="assets/css/mediasqueries/style.css" media="screen">
<title>A Hotel</title>
</head>
<body>
<header>
<div class="header-container">
<h1>A Hotel</h1>
<p>Made by my Familly to yours. Make</p>
<p class="highlight-p">your <strong>Reservation</strong></p>
<a href="#"><button>Here</button></a>
<img src="assets/images/pexels-prime-cinematics-2057610.jpg" alt="Hotel">
</div>
</header>
<main>
<div class="testemual-container"> <!-- First Image -->
<section class="testemual">
<img class="images" src="assets/images/pexels-colon-freld-2373201.jpg" alt="Landscape">
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 0 24 24" width="36px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/></svg>Discover luxury among stunning landscapes.
</li>
</ul>
</section>
<hr>
<section class="testemual"> <!-- Second Image -->
<img class="images" src="assets/images/pexels-daniel-frese-2983472.jpg" alt="Pool and Landscape">
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 0 24 24" width="36px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/></svg>The perfect retreat for your dream getaway.</li>
</ul>
</section>
<hr>
<section class="testemual"> <!-- Third Image -->
<img class="images" src="assets/images/pexels-rachel-claire-6127022 (2).jpg" alt="Table with plates">
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 0 24 24" width="36px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/></svg>Here every moment turns into an unforgettable memory.</li>
</ul>
</section>
</div>
<div class="about-and-reservation-container">
<div class="about-container">
<img class="image-about" src="assets/images/pexels-helena-lopes-2017802 (1).jpg" alt="A man stading at the reception">
<div class="title-and-navagation-container">
<p>Know about your future favorite spot to be at </p>
<a href="#"><button class="about-button">About us</button></a>
</div>
</div>
<div class="reservation-container">
<img class="image-reservation" src="assets/images/pexels-andrea-piacquadio-3771110.jpg" alt="Reception">
<div class="title-and-button-reservation">
<p>Check our offers out right now!</p>
<a href="#"><button class="reservation-button">Check it out</button></a>
</div>
</div>
</div>
<footer>
<div class="flex-container">
<ul>
<li><a href="#">Terms</a></li>
<hr>
<li><a href="#">Privacy</a></li>
<hr>
<li><a href="#">Security</a></li>
<hr>
<li><a href="#">Contact</a></li>
<hr>
<li><a href="#">Work with us</a></li>
</ul>
</div>
<div class="creater">
<p>Made by <strong>Johan Queiroz</strong></p>
<a href="https://github.com/johanpq" target="_blank", rel="next">Github</a>
<hr>
<a href="https://www.linkedin.com/in/johan-queiroz-57114024b/" target="_blank" rel="next">LinkedIn</a>
</div>
</footer>
</main>
</body>
</html>