<!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="assets/css/style.css">
<title>EcoSmart - Эко-отель с бронированием экологически чистых гостиниц </title>
</head>
<body>
<header>
<ul>
<li> <div class="header-logo" style="">
<img src="assets/img/eco-house-logo-vector-1974566127.jpg" alt="" width="70">
<h1 style="font-size: 1.5em;">Hoteco</h1>
</div> </li>
<li>Главная</li>
<li > <a href="#rooms" style="color:black">Наши номера</a> </li>
<li>Фото </li>
<li>Отзывы</li>
<li>Контакты</li>
<li>Наши гости</li>
<li>Правила</li>
<li class="header-logo-bron">Забронировать</li>
</ul>
</header>
<div class="introduction">
<div class="photo-block">
<img src="assets/img/134bd76f726846cf56dd3958be600a5b.jpg" alt="">
</div>
<div class="photo-block">
<img src="assets/img/34c0b31000d35656634ec2e5d97b7c34.jpg" alt="">
</div>
<div class="photo-block">
<img src="assets/img/67e2b91b9d7d36995ddcf0b432458a68.jpg" alt="">
</div>
<div class="photo-block">
<img src="assets/img/89ac44e274ef20682e6b325c0e2171eb.jpg" alt="">
</div>
<div class="info">
<h2>Оазис комфорта и удобства</h2>
<br>
<p>Предоставляем экологичный отдых с пользой для Вас и Вашей семьи </p>
</div>
</div>
<div class="infographics">
<h2 style="text-align: center; padding-top: 40px;">Почему около полумиллиона путешественников со всего мира
ежегодно выбирают именно нас?</h2>
<div class="contain">
<div class="graphics">
<img src="assets/img/eco-home-eco-house-svgrepo-com.png" alt="">
<p>Экологически чистая зона</p>
</div>
<div class="graphics">
<img src="assets/img/forest-landscape-mountain-svgrepo-com.svg" alt="">
<p>Красивый вид из окна</p>
</div>
<div class="graphics">
<img src="assets/img/waiter-svgrepo-com.svg" alt="">
<p> Быстрое обслуживание</p>
</div>
<div class="graphics">
<img src="assets/img/bed-double-svgrepo-com.svg" alt="">
<p>Ваш комфорт - наша забота!</p>
</div>
</div>
<div class="room-classes" >
<a name="rooms"> <h2 style="text-align: center;">Эконом-класс</h2> </a>
<div class="contain-rooms">
<img src="assets/img/1b17dc4b1928a35b592b9058cd1abd4c.jpg" alt="">
<img src="assets/img/421d2add3481a256df06bb526d87991b.jpg" alt="">
</div>
<button>Смотреть</button>
</div>
<div class="room-classes">
<h2 style="text-align: center;">Бизнес-класс</h2>
<div class="contain-rooms">
<img src="assets/img/2ed2416ad3865f8f6313f8e41d623453.jpg" alt="">
<img src="assets/img/ef7dd7197da99b49b1a13ab532e5ea5d.jpg" alt="">
</div>
<button>Смотреть</button>
</div>
<div class="eco-reviews">
<h1>Отзывы наших посетителей</h1>
<div class="slideshow-container">
<div class="mySlides">
<q>
Прекрасная поездка и отличный сервис, обслуживание на высоком уровне. не было никаких проблем
при заселений. Чисто, уютно, вкусно. Окружающая среда великолепна. Рекомендую если хотите хорошо
отдохнуть....</q>
<br>
<p class="author">- John Keats</p>
</div>
<div class="mySlides">
<q>Я много путешествую, но могу с уверенностью сказать, что мой отдых в эко-отеле был незабываемым!
У этого отеля есть все, что я ожидал: потрясающая атмосфера природы, уютные и чистые
номера, великолепно организованное питание на основе органических продуктов, и, конечно,
профессиональный и вежливый персонал.</q>
<br>
<p class="author">- Ernest Hemingway</p>
</div>
<div class="mySlides">
<q> Я был приятно удивлен, насколько сильно отель заботится о природе и экологии.
Эко-инициативы доступны повсюду - от дизайна зданий, до использования утилизации отходов. Это
был прекрасный опыт проживания в эко-отеле, и я обязательно вернусь сюда еще раз!</q>
<br>
<p class="author">- Thomas A. Edison</p>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>
</div>
<div class="contact-us">
<h1>Свяжитесь с нами</h1>
<div class="contacts">
<img src="assets/img/Vector.png" alt="">
<img src="assets/img/Vector-1.png" alt="">
<img src="assets/img/Group 9.png" alt="">
</div>
</div>
<footer>
<h2> (c) Hoteco</h2>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Alegreya&family=Philosopher&family=Poltawski+Nowy&family=Poppins:wght@100&family=Ubuntu:wght@300&display=swap');
* {
font-family: 'Philosopher', sans-serif;
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
}
html {
scroll-behavior: smooth;
}
header {
padding: 10px;
width: 100%;
display: flex;
flex-flow: row wrap;
border-bottom: 3px solid black;
position: fixed;
background-color: white;
z-index: 1;
.header-logo {
margin-right: 650px;
}
ul {
width: 100%;
display: flex;
flex-direction: row;
gap: 50px;
padding-right: 35px;
justify-content: flex-end;
align-items: center;
}
li {
transition: 0.6s;
color: black;
font-size: 1.2em;
}
li:hover {
cursor: pointer;
transition: 0.6s;
color: #7BE889;
}
.header-logo-bron {
background-color: #7BE889;
border: 2px solid #7BE889;
padding: 15px;
transition: 0.6s;
border-radius: 100px;
}
.header-logo-bron:hover {
transition: 0.6s;
background-color: white;
color: #7BE889;
;
}
}
.introduction {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 50px;
gap: 30px;
.photo-block {
img {
height: 600px;
width: 49vh;
}
}
.info {
position: absolute;
top:260px;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 250px;
border-radius: 20px;
text-align: center;
margin-top: 100px;
background: rgb(190,192,135);
background: linear-gradient(160deg, rgba(190,192,135,1) 0%, rgba(1,102,70,1) 100%);
color: #fff;
text-align: center;
padding: 40px;
box-sizing: border-box;
h2{
margin-top: 25px;
}
}
}
.infographics{
margin-top: 70px;
width: 100%;
background-color: #d9d9d971;
h2 {
font-weight: 400;
}
.contain {
margin-top: 70px;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
padding: 50px;
gap: 50px;
img {
width: 100px;
margin-left: 10px;
}
.graphics {
img {
width: 100px;
margin-left: 20px;
padding: 20px;
}
display: flex;
font-size: 1.2em;
flex-direction: column;
justify-content: center;
}
}
}
.room-classes {
padding: 50px;
background-color: white;
text-align: center;
.contain-rooms {
padding-top: 40px;
display: flex;
gap: 110px;
justify-content: center;
img {
width: 360px;
height: 380px;
cursor: pointer;
}
}
button {
padding: 15px;
margin-top: 35px;
background-color: #dadb70;
color:rgb(255, 255, 255);
border: 2px solid #dadb70;
border-radius: 45px;
font-size: 1.2em;
height: 70px;
width: 160px;
transition: 0.6s;
}
button:hover{
cursor: pointer;
transition: 0.6s;
color: #dadb70;
background-color: white;
border: 2px solid #dadb70;;
}
}
h1 {
font-weight: 500;
font-size: 2.2em;
}
.eco-reviews {
background-color: #d9d9d971;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 400px;
/* (A) FORCE SLIDES INTO SINGLE ROW */
}
.slideshow-container {
position: relative;
}
/* Slides */
.mySlides {
padding: 90px;
text-align: center;
margin: auto;
width: 730px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -30px;
padding: 16px;
color: #ffffff;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(161, 212, 103, 0.8);
border-radius: 25px;
transition: 0.7s;
}
/* Position the "next button" to the right */
.next {
position: absolute;
right: 0;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(122, 163, 75, 0.8);
transition: 0.7s;
color: white;
}
/* The dot/bullet/indicator container */
/* Add a background color to the active dot/circle */
.active, .dot:hover {
background-color: #717171;
}
/* Add an italic font style to all quotes */
q {font-style: italic;font-size: 1.3em; }
p{font-size: 1.2em; padding-top: 20px;}
/* Add a blue color to the author */
.author {color: cornflowerblue;}
.contact-us{
padding: 50px;
text-align: center;
.contacts {
padding: 30px;
display: flex;
gap: 42px;
justify-content: center;
img{
width: 80px;
height: 60px;
cursor: pointer;
}
}
}
footer{
background-color: black;
text-align: center;
font-size: 2.2em;
color: white;
height: 7vh;;
}
@media(max-width: 769px) {
header{
position: static;
ul {
flex-direction: column;
}
.header-logo {
margin-right: 0px;
}
}
