mirror of
https://github.com/robonen/metr.git
synced 2026-03-20 02:44:42 +00:00
GitHub
128
frontend/raw/Catalog.html
Normal file
128
frontend/raw/Catalog.html
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
<!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="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/catalog.css">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header__table">
|
||||||
|
<div class="header__image"></div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__content">
|
||||||
|
<img src="assets/images/location.png" alt="">
|
||||||
|
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">каталог</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">блог</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">контакты</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">помощь</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__search">
|
||||||
|
<div class="search">
|
||||||
|
<div class="search__block">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="search__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/search.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts">
|
||||||
|
<div class="header__contacts__imgtop">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/tell.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/user.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="suggestions">
|
||||||
|
<div class="suggestions__title">
|
||||||
|
<h3 class="newhome">Найти недвижимость</h3>
|
||||||
|
</div>
|
||||||
|
<div class="parametrs__block">
|
||||||
|
<div class="parametrs">
|
||||||
|
<div class="prm">
|
||||||
|
<div class="prm__inside">
|
||||||
|
<div class="prm__text"><h2>Квартира</h2></div>
|
||||||
|
<a href="#"><img src="assets/images/arrow.png" alt=""></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="prm">
|
||||||
|
<div class="prm__inside">
|
||||||
|
<div class="prm__text"><h2>Купить</h2></div>
|
||||||
|
<a href="#"><img src="assets/images/arrow.png" alt=""></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="prm">
|
||||||
|
<div class="prm__inside">
|
||||||
|
<div class="prm__text"><h2>Комнаты</h2></div>
|
||||||
|
<a href="#"><img src="assets/images/arrow.png" alt=""></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="prm">
|
||||||
|
<div class="prm__inside">
|
||||||
|
<div class="prm__text"><h2>Цена</h2></div>
|
||||||
|
<a href="#"><img src="assets/images/arrow.png" alt=""></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="suggestions__images">
|
||||||
|
<div class="podlozhka">
|
||||||
|
<div class="sugg__img"><a class="gradient" href="#"><img src="assets/images/1.jpg" alt=""></a></div>
|
||||||
|
<div class="sugg__text"><p>2-к. Квартира, 34 м кв</p><h2>2 900 000₽</h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="podlozhka">
|
||||||
|
<div class="sugg__img"><a class="gradient" href="#"><img src="assets/images/1.jpg" alt=""></a></div>
|
||||||
|
<div class="sugg__text"><p>3-к. Квартира, 34 м кв</p><h2>4 900 000₽</h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="podlozhka">
|
||||||
|
<div class="sugg__img"><a class="gradient" href="#"><img src="assets/images/3.jpg" alt=""></a></div>
|
||||||
|
<div class="sugg__text"><p>1-к. Квартира, 34 м кв</p><h2>1 900 000₽</h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="podlozhka">
|
||||||
|
<div class="sugg__img"><a class="gradient" href="#"><img src="assets/images/4.jpg" alt=""></a></div>
|
||||||
|
<div class="sugg__text"><p>5-к. Квартира, 34 м кв</p><h2>10 900 000₽</h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="podlozhka">
|
||||||
|
<div class="sugg__img"><a class="gradient" href="#"><img src="assets/images/6.jpg" alt=""></a></div>
|
||||||
|
<div class="sugg__text"><p>6-к. Квартира, 34 м кв</p><h2>15 900 000₽</h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="podlozhka">
|
||||||
|
<div class="sugg__img"><a class="gradient" href="#"><img src="assets/images/6.jpg" alt=""></a></div>
|
||||||
|
<div class="sugg__text"><p>3-к. Квартира, 34 м кв</p><h2>5 900 000₽</h2></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
144
frontend/raw/addingAdv.html
Normal file
144
frontend/raw/addingAdv.html
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
<!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="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/addingAdv.css">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header__table">
|
||||||
|
<div class="header__image"></div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__content">
|
||||||
|
<img src="assets/images/location.png" alt="">
|
||||||
|
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">каталог</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">блог</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">контакты</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">помощь</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__search">
|
||||||
|
<div class="search">
|
||||||
|
<div class="search__block">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="search__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/search.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts">
|
||||||
|
<div class="header__contacts__imgtop">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/tell.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/user.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="intro">
|
||||||
|
<div class="main">
|
||||||
|
<div class="user__info">
|
||||||
|
<div class="user__profile">
|
||||||
|
<div class="user__logo">
|
||||||
|
<img src="assets/images/userlogo.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="username">
|
||||||
|
<h3>Виктория</h3>
|
||||||
|
</div>
|
||||||
|
<div class="user__stat">
|
||||||
|
<div class="stat"><h3>4,5</h3></div>
|
||||||
|
<div class="stars">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hrefs">
|
||||||
|
<div class="user__hrefs">
|
||||||
|
<div class="aboutme">
|
||||||
|
<a href="#"><h2>Обо мне</h2></a>
|
||||||
|
</div>
|
||||||
|
<div class="my__notice">
|
||||||
|
<a href="#"><h2>Мои объявления</h2></a>
|
||||||
|
</div>
|
||||||
|
<div class="add__notice">
|
||||||
|
<a href="#"><h2>Добавить объявление</h2></a>
|
||||||
|
</div>
|
||||||
|
<div class="favorites">
|
||||||
|
<a href="#"><h2>Избранное</h2></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="about__user">
|
||||||
|
<div class="about__title"><h2>Добавить объявление</h2></div>
|
||||||
|
<div class="about__images">
|
||||||
|
<img src="assets/images/metr.svg" alt="">
|
||||||
|
<img src="assets/images/metr.svg" alt="">
|
||||||
|
<img src="assets/images/metr.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="about__describtions">
|
||||||
|
<div class="descriptions__name">
|
||||||
|
<h4>Название для объявления:</h4>
|
||||||
|
<input type="text" size="40">
|
||||||
|
</div>
|
||||||
|
<div class="descriptions__address">
|
||||||
|
<h4>Адрес:</h4>
|
||||||
|
<input type="text" size="40">
|
||||||
|
</div>
|
||||||
|
<div class="descriptions__price">
|
||||||
|
<h4>Цена:</h4>
|
||||||
|
<input type="text" size="40">
|
||||||
|
</div>
|
||||||
|
<div class="descriptions__flats">
|
||||||
|
<h4>Кол-во комнат:</h4>
|
||||||
|
<input type="text" size="40">
|
||||||
|
</div>
|
||||||
|
<div class="descriptions__square">
|
||||||
|
<h4>Площадь:</h4>
|
||||||
|
<input type="text" size="40">
|
||||||
|
</div>
|
||||||
|
<div class="descriptions__text">
|
||||||
|
<h4>Описание:</h4>
|
||||||
|
<input type="text" size="40">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
200
frontend/raw/advertisment.html
Normal file
200
frontend/raw/advertisment.html
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<!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="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/advertisment.css">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header__table">
|
||||||
|
<div class="header__image"></div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__content">
|
||||||
|
<img src="assets/images/location.png" alt="">
|
||||||
|
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">каталог</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">блог</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">контакты</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">помощь</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__search">
|
||||||
|
<div class="search">
|
||||||
|
<div class="search__block">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="search__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/search.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts">
|
||||||
|
<div class="header__contacts__imgtop">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/tell.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/user.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="intro">
|
||||||
|
<div class="main">
|
||||||
|
<div class="adv__info">
|
||||||
|
<div class="adv__main">
|
||||||
|
<div class="adv__main__title">
|
||||||
|
<div class="mtitle">
|
||||||
|
<h2>4-к. квартира, 78,4 м², 20/28 эт.</h2>
|
||||||
|
</div>
|
||||||
|
<div class="mprice__fav">
|
||||||
|
<div class="price">
|
||||||
|
<h2>40 610 000 ₽</h2>
|
||||||
|
</div>
|
||||||
|
<a href="#" class="favoritext"><div class="favorite">
|
||||||
|
<h4>Добавить в избранное</h4>
|
||||||
|
<img src="assets/images/heart.png" alt="">
|
||||||
|
</div></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="adv__main__images">
|
||||||
|
<div class="main__image">
|
||||||
|
<a href="#"><img src="assets/images/adv1.png" alt=""></a>
|
||||||
|
</div>
|
||||||
|
<div class="other__images">
|
||||||
|
<a href="#"><img src="assets/images/adv2.png" alt=""></a>
|
||||||
|
<a href="#"><img src="assets/images/adv3.png" alt=""></a>
|
||||||
|
<a href="#"><img src="assets/images/adv4.png" alt=""></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="adv__host">
|
||||||
|
<div class="adv__host__about__user">
|
||||||
|
<div class="username">
|
||||||
|
<h2>Виктория</h2>
|
||||||
|
</div>
|
||||||
|
<div class="host__stat">
|
||||||
|
<div class="stat">
|
||||||
|
<h3>4,5</h3>
|
||||||
|
</div>
|
||||||
|
<div class="stars">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="number">
|
||||||
|
<a href="#" class="favoritextinf"><h5>Показать номер</h5></a>
|
||||||
|
</div>
|
||||||
|
<div class="message">
|
||||||
|
<a href="#" class="favoritextinf"><h5>Написать владельцу</h5></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="userlogo">
|
||||||
|
<img src="assets/images/userlogosmall.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="about__adv">
|
||||||
|
<div class="about__adv__title">
|
||||||
|
<h2>О квартире</h2>
|
||||||
|
</div>
|
||||||
|
<div class="about__adv__info">
|
||||||
|
<h4>Кол-во комнат: 4</h4>
|
||||||
|
<h4>Общая площадь: 78.4 м²</h4>
|
||||||
|
<h4>Площадь кухни: 12 м²</h4>
|
||||||
|
<h4>Этаж: 20</h4>
|
||||||
|
</div>
|
||||||
|
<div class="about__adv__descriptions">
|
||||||
|
<p>Продается 4х комнатная квартира, уютная, светлая, теплая. Натяжные потолки,
|
||||||
|
ламинат, деревянные евроокна, два кондиционера. Теплые полы в туалете, ванной,
|
||||||
|
кухне, частично в прихожей. Хороший вид из окна.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="reviews">
|
||||||
|
<div class="reviews__title">
|
||||||
|
<h2>Отзывы</h2>
|
||||||
|
</div>
|
||||||
|
<div class="reviews__blocks">
|
||||||
|
<div class="review">
|
||||||
|
<div class="review__avatar">
|
||||||
|
<img src="assets/images/forcomment.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="rewiew__comment">
|
||||||
|
<h5>Очень приятный владелец, все чисто и опрятно</h5>
|
||||||
|
</div>
|
||||||
|
<div class="rewiew__stars">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="review">
|
||||||
|
<div class="review__avatar">
|
||||||
|
<img src="assets/images/forcomment.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="rewiew__comment">
|
||||||
|
<h5>Очень приятный владелец, все чисто и опрятно</h5>
|
||||||
|
</div>
|
||||||
|
<div class="rewiew__stars">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="review">
|
||||||
|
<div class="review__avatar">
|
||||||
|
<img src="assets/images/forcomment.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="rewiew__comment">
|
||||||
|
<h5>Очень приятный владелец, все чисто и опрятно</h5>
|
||||||
|
</div>
|
||||||
|
<div class="rewiew__stars">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
<img src="assets/images/star1.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
329
frontend/raw/assets/css/addingAdv.css
Normal file
329
frontend/raw/assets/css/addingAdv.css
Normal file
@@ -0,0 +1,329 @@
|
|||||||
|
/* Fonts */
|
||||||
|
|
||||||
|
@import url("../../fonts/StapelS/style.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__table {
|
||||||
|
width: 1052px;
|
||||||
|
height: 100px;
|
||||||
|
border: 2px solid white;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image {
|
||||||
|
width: 140px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block {
|
||||||
|
width: 145px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search {
|
||||||
|
width: 426px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 340px;
|
||||||
|
height: 40px;
|
||||||
|
padding-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__block {
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts {
|
||||||
|
width: 46px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__imgtop {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__content {
|
||||||
|
width: 70px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contenttop {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contentbott {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link_tomsk {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link:hover, .nav__link_tomsk:hover {
|
||||||
|
color: #389EEB;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Intro */
|
||||||
|
.intro {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 250px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
padding-left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 2% 0 2% 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stars {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-left: 5%;
|
||||||
|
padding-bottom: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__hrefs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: left;
|
||||||
|
width: 110%;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__hrefs a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__images {
|
||||||
|
width: 105%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__describtions {
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions__name {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions__address {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions__price {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions__flats {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions__square {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions__text {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__describtions input {
|
||||||
|
background-color: rgb(201, 233, 252);
|
||||||
|
border-radius: 5px;
|
||||||
|
border-color: white;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid rgb(83, 110, 136);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__describtions h4 {
|
||||||
|
margin-right: 3%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.descriptions__text input {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
366
frontend/raw/assets/css/advertisment.css
Normal file
366
frontend/raw/assets/css/advertisment.css
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
/* Fonts */
|
||||||
|
|
||||||
|
@import url("../../fonts/StapelS/style.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__table {
|
||||||
|
width: 1052px;
|
||||||
|
height: 100px;
|
||||||
|
border: 2px solid white;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image {
|
||||||
|
width: 140px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block {
|
||||||
|
width: 145px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search {
|
||||||
|
width: 426px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 340px;
|
||||||
|
height: 40px;
|
||||||
|
padding-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__block {
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts {
|
||||||
|
width: 46px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__imgtop {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__content {
|
||||||
|
width: 70px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contenttop {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contentbott {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link_tomsk {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link:hover, .nav__link_tomsk:hover {
|
||||||
|
color: #389EEB;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Intro */
|
||||||
|
.intro {
|
||||||
|
width: 100%;
|
||||||
|
height: 170vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 250px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv__main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-right: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv__main__title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mprice__fav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 5px;
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.favoritext {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favoritextinf {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-weight: 400;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv__main__images {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.other__images {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.other__images a{
|
||||||
|
margin-right: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv__host {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adv__host__about__user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
margin: 3% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.host__stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 3% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat {
|
||||||
|
margin-right: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stars {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.number {
|
||||||
|
width: 150px;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 3% 0;
|
||||||
|
padding: 10% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.message {
|
||||||
|
width: 150px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 3% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userlogo {
|
||||||
|
margin-left: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__adv {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0 23%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__adv__info {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__adv__descriptions {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0 23%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reviews__blocks {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.review {
|
||||||
|
width: 730px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 1% 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review__stars {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
533
frontend/raw/assets/css/catalog.css
Normal file
533
frontend/raw/assets/css/catalog.css
Normal file
@@ -0,0 +1,533 @@
|
|||||||
|
/* Fonts */
|
||||||
|
|
||||||
|
@import url("../../fonts/StapelS/style.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__table {
|
||||||
|
width: 1052px;
|
||||||
|
height: 100px;
|
||||||
|
border: 2px solid white;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image {
|
||||||
|
width: 140px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block {
|
||||||
|
width: 145px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search {
|
||||||
|
width: 426px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 340px;
|
||||||
|
height: 40px;
|
||||||
|
padding-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__block {
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts {
|
||||||
|
width: 46px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__imgtop {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__content {
|
||||||
|
width: 70px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contenttop {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contentbott {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link_tomsk {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link:hover, .nav__link_tomsk:hover {
|
||||||
|
color: #389EEB;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Intro */
|
||||||
|
.intro {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:center;
|
||||||
|
padding-top: 250px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__text {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__title {
|
||||||
|
font-size: 25px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newhome {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__subtitle {
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro_footer {
|
||||||
|
width: 1050px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 300px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__btn {
|
||||||
|
width: 185px;
|
||||||
|
height: 55px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__button {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__button:hover {
|
||||||
|
color: #0f171d;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__odnushka {
|
||||||
|
width: 250px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.odnushka {
|
||||||
|
font-size: 17px;
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.odnushka__price {
|
||||||
|
width: 115px;
|
||||||
|
font-size: 17px;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 2px;
|
||||||
|
font-weight: 900;
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
font-family: 'Inter';
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 25px;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About */
|
||||||
|
|
||||||
|
.about {
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__title {
|
||||||
|
padding-left: 10%;
|
||||||
|
padding-top: 50px;
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: 'Stapel';
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: 1300px;
|
||||||
|
height: 590px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url(
|
||||||
|
"../images/video.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__us {
|
||||||
|
margin-right: 5%;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 17px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Suggestions */
|
||||||
|
|
||||||
|
.suggestions {
|
||||||
|
padding-top: 10%;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
height: 100%;
|
||||||
|
min-height: 600px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestions__title {
|
||||||
|
font-size: 25px;
|
||||||
|
padding-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestions__images {
|
||||||
|
margin: 2% 12%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__img {
|
||||||
|
flex-basis: 30%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 4% 0 1% auto;
|
||||||
|
background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
|
||||||
|
transition: transform .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.afterword {
|
||||||
|
margin: 0 5% 0 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after__afterword {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient {
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: transparent;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8));
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__img {
|
||||||
|
transform: translate3d(-10px, -10px, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__img img {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__img img {
|
||||||
|
transition: opacity .1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
position: absolute;
|
||||||
|
top: 90%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
transform: translate3d(0, -50%, 0);
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity .2s linear;
|
||||||
|
padding-bottom: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text p {
|
||||||
|
width: 220px;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 auto 0 2%;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text h2 {
|
||||||
|
width: 200px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 auto 0 2%;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-size: 20px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parametrs__block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: left;
|
||||||
|
margin: 2% 40% 2% 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parametrs {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prm {
|
||||||
|
width: 20%;
|
||||||
|
height: 150%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-size: 10px;
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prm__inside {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prm__text {
|
||||||
|
margin-right: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prm__inside img {
|
||||||
|
padding-top: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
height: 200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 1%;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__search {
|
||||||
|
width: 300px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts {
|
||||||
|
width: 165px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts__imgtop {
|
||||||
|
width: 165px;
|
||||||
|
height: 48px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts__img {
|
||||||
|
width: 166px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
94
frontend/raw/assets/css/login.css
Normal file
94
frontend/raw/assets/css/login.css
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoMetr {
|
||||||
|
width: 185px;
|
||||||
|
height: 100px;
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 1% 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title h2{
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__example {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__input {
|
||||||
|
margin-top: 30px;
|
||||||
|
width: 320px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #1A89C9;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__input:hover {
|
||||||
|
color: rgb(15, 10, 41);
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color .1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login {
|
||||||
|
width: 320px;
|
||||||
|
height: 50px;
|
||||||
|
padding-left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: rgb(129, 125, 125);
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
270
frontend/raw/assets/css/profile.css
Normal file
270
frontend/raw/assets/css/profile.css
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
/* Fonts */
|
||||||
|
|
||||||
|
@import url("../../fonts/StapelS/style.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__table {
|
||||||
|
width: 1052px;
|
||||||
|
height: 100px;
|
||||||
|
border: 2px solid white;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image {
|
||||||
|
width: 140px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block {
|
||||||
|
width: 145px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search {
|
||||||
|
width: 426px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 340px;
|
||||||
|
height: 40px;
|
||||||
|
padding-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__block {
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts {
|
||||||
|
width: 46px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__imgtop {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__content {
|
||||||
|
width: 70px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contenttop {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contentbott {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link_tomsk {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link:hover, .nav__link_tomsk:hover {
|
||||||
|
color: #389EEB;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Intro */
|
||||||
|
.intro {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 250px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
padding-left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.username {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__stat {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 2% 0 2% 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stars {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-left: 5%;
|
||||||
|
padding-bottom: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__hrefs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: left;
|
||||||
|
width: 110%;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user__hrefs a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__user {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__images {
|
||||||
|
width: 105%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about_describtions {
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
94
frontend/raw/assets/css/signin.css
Normal file
94
frontend/raw/assets/css/signin.css
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoMetr {
|
||||||
|
width: 185px;
|
||||||
|
height: 100px;
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 1% 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title h2{
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__example {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__input {
|
||||||
|
margin-top: 30px;
|
||||||
|
width: 320px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #1A89C9;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__input:hover {
|
||||||
|
color: rgb(15, 10, 41);
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color .1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login {
|
||||||
|
width: 320px;
|
||||||
|
height: 50px;
|
||||||
|
padding-left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: rgb(129, 125, 125);
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
492
frontend/raw/assets/css/style.css
Normal file
492
frontend/raw/assets/css/style.css
Normal file
@@ -0,0 +1,492 @@
|
|||||||
|
/* Fonts */
|
||||||
|
|
||||||
|
@import url("../../fonts/StapelS/style.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__table {
|
||||||
|
width: 1052px;
|
||||||
|
height: 100px;
|
||||||
|
border: 2px solid white;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image {
|
||||||
|
width: 140px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block {
|
||||||
|
width: 145px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search {
|
||||||
|
width: 426px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 340px;
|
||||||
|
height: 40px;
|
||||||
|
padding-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__block {
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts {
|
||||||
|
width: 46px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__imgtop {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__content {
|
||||||
|
width: 70px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contenttop {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contentbott {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link_tomsk {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link:hover, .nav__link_tomsk:hover {
|
||||||
|
color: #389EEB;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Intro */
|
||||||
|
.intro {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:center;
|
||||||
|
padding-top: 250px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__text {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__title {
|
||||||
|
font-size: 25px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newhome {
|
||||||
|
font-family: 'Stapel';
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__subtitle {
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro_footer {
|
||||||
|
width: 1050px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 300px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__btn {
|
||||||
|
width: 185px;
|
||||||
|
height: 55px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__button {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__button:hover {
|
||||||
|
color: #0f171d;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__odnushka {
|
||||||
|
width: 250px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.odnushka {
|
||||||
|
font-size: 17px;
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.odnushka__price {
|
||||||
|
width: 115px;
|
||||||
|
font-size: 17px;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 2px;
|
||||||
|
font-weight: 900;
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
font-family: 'Inter';
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 25px;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About */
|
||||||
|
|
||||||
|
.about {
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__title {
|
||||||
|
padding-left: 10%;
|
||||||
|
padding-top: 50px;
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: 'Stapel';
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: 1300px;
|
||||||
|
height: 590px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url(
|
||||||
|
"../images/video.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__us {
|
||||||
|
margin-right: 5%;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 17px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Suggestions */
|
||||||
|
|
||||||
|
.suggestions {
|
||||||
|
padding-top: 10%;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
height: 100%;
|
||||||
|
min-height: 600px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestions__title {
|
||||||
|
font-size: 25px;
|
||||||
|
padding-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestions__images {
|
||||||
|
margin: 2% 12%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__img {
|
||||||
|
flex-basis: 30%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 4% 0 1% auto;
|
||||||
|
background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
|
||||||
|
transition: transform .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.afterword {
|
||||||
|
margin: 0 5% 0 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after__afterword {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient {
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: transparent;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8));
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__img {
|
||||||
|
transform: translate3d(-10px, -10px, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__img img {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__text{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__img img {
|
||||||
|
transition: opacity .1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 90%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
transform: translate3d(0, -50%, 0);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text p {
|
||||||
|
width: 180px;
|
||||||
|
color: black;
|
||||||
|
font-family:sans-serif;
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 17px;
|
||||||
|
background: white;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text h2 {
|
||||||
|
width: 100px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: black;
|
||||||
|
font-family:sans-serif;
|
||||||
|
font-size: 17px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
height: 200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 1%;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__search {
|
||||||
|
width: 300px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts {
|
||||||
|
width: 165px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts__imgtop {
|
||||||
|
width: 165px;
|
||||||
|
height: 48px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts__img {
|
||||||
|
width: 166px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
BIN
frontend/raw/assets/images/1.jpg
Normal file
BIN
frontend/raw/assets/images/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 456 KiB |
BIN
frontend/raw/assets/images/2jpg.jpg
Normal file
BIN
frontend/raw/assets/images/2jpg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
frontend/raw/assets/images/3.jpg
Normal file
BIN
frontend/raw/assets/images/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 902 KiB |
BIN
frontend/raw/assets/images/4.jpg
Normal file
BIN
frontend/raw/assets/images/4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
frontend/raw/assets/images/5.jpg
Normal file
BIN
frontend/raw/assets/images/5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
frontend/raw/assets/images/6.jpg
Normal file
BIN
frontend/raw/assets/images/6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
frontend/raw/assets/images/adv1.png
Normal file
BIN
frontend/raw/assets/images/adv1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 473 KiB |
BIN
frontend/raw/assets/images/adv2.png
Normal file
BIN
frontend/raw/assets/images/adv2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
frontend/raw/assets/images/adv3.png
Normal file
BIN
frontend/raw/assets/images/adv3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
frontend/raw/assets/images/adv4.png
Normal file
BIN
frontend/raw/assets/images/adv4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
frontend/raw/assets/images/arrow.png
Normal file
BIN
frontend/raw/assets/images/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
BIN
frontend/raw/assets/images/forcomment.png
Normal file
BIN
frontend/raw/assets/images/forcomment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
frontend/raw/assets/images/heart.png
Normal file
BIN
frontend/raw/assets/images/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
BIN
frontend/raw/assets/images/image 3 (1).png
Normal file
BIN
frontend/raw/assets/images/image 3 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 123 B |
BIN
frontend/raw/assets/images/intro.jpg
Normal file
BIN
frontend/raw/assets/images/intro.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 461 KiB |
BIN
frontend/raw/assets/images/location.png
Normal file
BIN
frontend/raw/assets/images/location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
3
frontend/raw/assets/images/metr.svg
Normal file
3
frontend/raw/assets/images/metr.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="265" height="139" viewBox="0 0 265 139" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M264.708 0H0V139H264.708V0ZM127.614 71.5571V68.2211C127.614 63.7361 126.374 60.5113 123.894 58.5467C121.414 56.5822 117.656 55.5999 112.619 55.5999C107.201 55.5999 103.252 56.7119 100.772 58.9359C98.3295 61.1229 97.1085 64.9778 97.1085 70.5007C97.1085 75.8754 98.3486 79.6562 100.829 81.8431C103.309 83.993 107.258 85.0679 112.676 85.0679C117.56 85.0679 121.204 84.2525 123.608 82.6215C126.012 80.9906 127.347 78.1921 127.614 74.2259H117.999C117.732 76.7094 115.958 77.9511 112.676 77.9511C110.692 77.9511 109.204 77.4693 108.212 76.5055C107.258 75.5418 106.762 73.9294 106.724 71.6683V71.5571H127.614ZM106.724 68.6659V68.2211C106.8 66.2195 107.334 64.811 108.326 63.9955C109.318 63.143 110.73 62.7167 112.562 62.7167C114.355 62.7167 115.691 63.1801 116.568 64.1067C117.484 64.9963 117.942 66.5161 117.942 68.6659H106.724ZM62.2136 69.4999L70.1691 77.5619L78.1247 69.4999V84.2339H87.3966V56.4339H79.7272L70.1691 66.9423L60.611 56.4339H52.9416V84.2339H62.2136V69.4999ZM134.941 56.4339H162.871V63.5507H153.714V84.2339H144.098V63.5507H134.941V56.4339ZM181.922 78.5071C183.067 82.881 186.138 85.0679 191.137 85.0679C195.029 85.0679 197.89 84.0115 199.722 81.8987C201.553 79.7489 202.469 75.931 202.469 70.4451C202.469 64.9222 201.553 61.0673 199.722 58.8803C197.89 56.6934 195.029 55.5999 191.137 55.5999C188.695 55.5999 186.672 56.1745 185.07 57.3235C183.505 58.4726 182.456 60.085 181.922 62.1607H180.949V56.4339H171.334V94.2419H180.949V78.5071H181.922ZM180.949 67.7207C181.064 64.3847 182.971 62.7167 186.672 62.7167C189.038 62.7167 190.66 63.2357 191.537 64.2735C192.453 65.2743 192.911 67.3315 192.911 70.4451C192.911 73.4846 192.472 75.5047 191.595 76.5055C190.717 77.4693 189.076 77.9511 186.672 77.9511C182.857 77.9511 180.949 76.1905 180.949 72.6691V67.7207Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
BIN
frontend/raw/assets/images/search.jpg
Normal file
BIN
frontend/raw/assets/images/search.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 359 B |
BIN
frontend/raw/assets/images/star.png
Normal file
BIN
frontend/raw/assets/images/star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/raw/assets/images/star1.png
Normal file
BIN
frontend/raw/assets/images/star1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
BIN
frontend/raw/assets/images/starsmall.png
Normal file
BIN
frontend/raw/assets/images/starsmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/raw/assets/images/tell.jpg
Normal file
BIN
frontend/raw/assets/images/tell.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 456 B |
BIN
frontend/raw/assets/images/user.jpg
Normal file
BIN
frontend/raw/assets/images/user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 444 B |
BIN
frontend/raw/assets/images/userlogo.png
Normal file
BIN
frontend/raw/assets/images/userlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
frontend/raw/assets/images/userlogosmall.png
Normal file
BIN
frontend/raw/assets/images/userlogosmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
frontend/raw/assets/images/video.jpg
Normal file
BIN
frontend/raw/assets/images/video.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 556 KiB |
38
frontend/raw/login.html
Normal file
38
frontend/raw/login.html
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<!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/login.css">
|
||||||
|
<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=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat&display=swap" rel="stylesheet">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logoMetr">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<h2>Авторизируйтесь</h2>
|
||||||
|
</div>
|
||||||
|
<form action="" method="get" class="form__example">
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="name"></label>
|
||||||
|
<input class="login" type="text" name="name" id="name" placeholder="Имя" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="email"></label>
|
||||||
|
<input class="login" type="email" name="email" id="email" placeholder="Почта" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<input class="form__input" type="submit" value="Зарегистрироваться">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
frontend/raw/passwordRecovery.html
Normal file
34
frontend/raw/passwordRecovery.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!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/login.css">
|
||||||
|
<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=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat&display=swap" rel="stylesheet">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logoMetr">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<h2>Восстановление пароля</h2>
|
||||||
|
</div>
|
||||||
|
<form action="" method="get" class="form__example">
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="name"></label>
|
||||||
|
<input class="login" type="text" name="name" id="name" placeholder="Адрес почты" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<input class="form__input" type="submit" value="Сбросить пароль">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
frontend/raw/passwordRecovery_codeAccept.html
Normal file
34
frontend/raw/passwordRecovery_codeAccept.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!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/login.css">
|
||||||
|
<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=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat&display=swap" rel="stylesheet">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logoMetr">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<h2>Восстановление пароля</h2>
|
||||||
|
</div>
|
||||||
|
<form action="" method="get" class="form__example">
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="name"></label>
|
||||||
|
<input class="login" type="text" name="name" id="name" placeholder="Введите код подтверждения" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<input class="form__input" type="submit" value="Принять">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
frontend/raw/passwordRecovery_newPassword.html
Normal file
38
frontend/raw/passwordRecovery_newPassword.html
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<!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/login.css">
|
||||||
|
<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=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat&display=swap" rel="stylesheet">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logoMetr">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<h2>Восстановление пароля</h2>
|
||||||
|
</div>
|
||||||
|
<form action="" method="get" class="form__example">
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="name"></label>
|
||||||
|
<input class="login" type="text" name="name" id="name" placeholder="Новый пароль" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="email"></label>
|
||||||
|
<input class="login" type="email" name="email" id="email" placeholder="Подтвердите пароль" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<input class="form__input" type="submit" value="Сохранить пароль">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
117
frontend/raw/profile.html
Normal file
117
frontend/raw/profile.html
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
<!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="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="assets/css/profile.css">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header__table">
|
||||||
|
<div class="header__image"></div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__content">
|
||||||
|
<img src="assets/images/location.png" alt="">
|
||||||
|
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">каталог</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">блог</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__block">
|
||||||
|
<div class="header__block__contenttop">
|
||||||
|
<a class="nav__link" href="#">контакты</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__block__contentdown">
|
||||||
|
<a class="nav__link" href="#">помощь</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__search">
|
||||||
|
<div class="search">
|
||||||
|
<div class="search__block">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="search__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/search.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts">
|
||||||
|
<div class="header__contacts__imgtop">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/tell.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="header__contacts__img">
|
||||||
|
<a class="nav__link" href="#">
|
||||||
|
<img src="assets/images/user.jpg" alt="">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="intro">
|
||||||
|
<div class="main">
|
||||||
|
<div class="user__info">
|
||||||
|
<div class="user__logo">
|
||||||
|
<img src="assets/images/userlogo.png" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="username">
|
||||||
|
<h3>Виктория</h3>
|
||||||
|
</div>
|
||||||
|
<div class="user__stat">
|
||||||
|
<div class="stat"><h3>4,5</h3></div>
|
||||||
|
<div class="stars">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
<img src="assets/images/star.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user__hrefs">
|
||||||
|
<div class="aboutme">
|
||||||
|
<a href="#"><h2>Обо мне</h2></a>
|
||||||
|
</div>
|
||||||
|
<div class="my__notice">
|
||||||
|
<a href="#"><h2>Мои объявления</h2></a>
|
||||||
|
</div>
|
||||||
|
<div class="add__notice">
|
||||||
|
<a href="#"><h2>Добавить объявление</h2></a>
|
||||||
|
</div>
|
||||||
|
<div class="favorites">
|
||||||
|
<a href="#"><h2>Избранное</h2></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="about__user">
|
||||||
|
<div class="about__title"><h2>Обо мне</h2></div>
|
||||||
|
<div class="about__images">
|
||||||
|
<img src="assets/images/metr.svg" alt="">
|
||||||
|
<img src="assets/images/metr.svg" alt="">
|
||||||
|
<img src="assets/images/metr.svg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="about_describtions">
|
||||||
|
<h3>Занимаюсь продажей квартир более 10 лет.</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
frontend/raw/signin.html
Normal file
38
frontend/raw/signin.html
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
<!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/login.css">
|
||||||
|
<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=Inter:wght@300&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Montserrat&display=swap" rel="stylesheet">
|
||||||
|
<title>Metr</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="logo">
|
||||||
|
<div class="logoMetr">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="title">
|
||||||
|
<h2>Вход Метр</h2>
|
||||||
|
</div>
|
||||||
|
<form action="" method="get" class="form__example">
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="name"></label>
|
||||||
|
<input class="login" type="text" name="name" id="name" placeholder="Имя" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<label for="email"></label>
|
||||||
|
<input class="login" type="email" name="email" id="email" placeholder="Почта" required>
|
||||||
|
</div>
|
||||||
|
<div class="form__example">
|
||||||
|
<input class="form__input" type="submit" value="Войти">
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
94
frontend/src/assets/css/login.css
Normal file
94
frontend/src/assets/css/login.css
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoMetr {
|
||||||
|
width: 185px;
|
||||||
|
height: 100px;
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin: 1% 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title h2{
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__example {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__input {
|
||||||
|
margin-top: 30px;
|
||||||
|
width: 320px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #1A89C9;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form__input:hover {
|
||||||
|
color: rgb(15, 10, 41);
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color .1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login {
|
||||||
|
width: 320px;
|
||||||
|
height: 50px;
|
||||||
|
padding-left: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: rgb(129, 125, 125);
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
@@ -1,4 +1,22 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -6,7 +24,7 @@
|
|||||||
max-width: 1920px;
|
max-width: 1920px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url(
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.2), rgb(124, 173, 201, 0.2)), url(
|
||||||
"@/assets/images/intro.jpg");
|
"../images/intro.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -22,7 +40,7 @@
|
|||||||
.logoMetr {
|
.logoMetr {
|
||||||
width: 185px;
|
width: 185px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
background: url("@/assets/images/metr.svg") center
|
background: url("../images/metr.svg") center
|
||||||
no-repeat;
|
no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|||||||
492
frontend/src/assets/css/style.css
Normal file
492
frontend/src/assets/css/style.css
Normal file
@@ -0,0 +1,492 @@
|
|||||||
|
/* Fonts */
|
||||||
|
|
||||||
|
@import url("../../fonts/StapelS/style.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__table {
|
||||||
|
width: 1052px;
|
||||||
|
height: 100px;
|
||||||
|
border: 2px solid white;
|
||||||
|
margin: 50px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__image {
|
||||||
|
width: 140px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
background: url("../images/metr.svg") center
|
||||||
|
no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block {
|
||||||
|
width: 145px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__search {
|
||||||
|
width: 426px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search {
|
||||||
|
width: 340px;
|
||||||
|
height: 40px;
|
||||||
|
padding-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__block {
|
||||||
|
width: 300px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 20px;
|
||||||
|
|
||||||
|
background: white;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search__img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts {
|
||||||
|
width: 46px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__imgtop {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__contacts__img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__content {
|
||||||
|
width: 70px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contenttop {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header__block__contentbott {
|
||||||
|
width: 145px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link_tomsk {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link:hover, .nav__link_tomsk:hover {
|
||||||
|
color: #389EEB;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Intro */
|
||||||
|
.intro {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:center;
|
||||||
|
padding-top: 250px;
|
||||||
|
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url(
|
||||||
|
"../images/intro.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__text {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__title {
|
||||||
|
font-size: 25px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.newhome {
|
||||||
|
font-family: 'Stapel';
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__subtitle {
|
||||||
|
font-size: 17px;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro_footer {
|
||||||
|
width: 1050px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 300px auto 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__btn {
|
||||||
|
width: 185px;
|
||||||
|
height: 55px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
background-color: rgba(26, 137, 201, 1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__button {
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
font-weight: 500;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__button:hover {
|
||||||
|
color: #0f171d;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: color .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro__odnushka {
|
||||||
|
width: 250px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.odnushka {
|
||||||
|
font-size: 17px;
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 2px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.odnushka__price {
|
||||||
|
width: 115px;
|
||||||
|
font-size: 17px;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 2px;
|
||||||
|
font-weight: 900;
|
||||||
|
color: black;
|
||||||
|
background: white;
|
||||||
|
font-family: 'Inter';
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 25px;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* About */
|
||||||
|
|
||||||
|
.about {
|
||||||
|
height: 100vh;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__title {
|
||||||
|
padding-left: 10%;
|
||||||
|
padding-top: 50px;
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: 'Stapel';
|
||||||
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
width: 1300px;
|
||||||
|
height: 590px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url(
|
||||||
|
"../images/video.jpg");
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about__us {
|
||||||
|
margin-right: 5%;
|
||||||
|
font-family: 'Inter';
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 17px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Suggestions */
|
||||||
|
|
||||||
|
.suggestions {
|
||||||
|
padding-top: 10%;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
height: 100%;
|
||||||
|
min-height: 600px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestions__title {
|
||||||
|
font-size: 25px;
|
||||||
|
padding-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.suggestions__images {
|
||||||
|
margin: 2% 12%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__img {
|
||||||
|
flex-basis: 30%;
|
||||||
|
height: 460px;
|
||||||
|
margin: 4% 0 1% auto;
|
||||||
|
background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
|
||||||
|
transition: transform .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.afterword {
|
||||||
|
margin: 0 5% 0 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.after__afterword {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient {
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient:after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: transparent;
|
||||||
|
background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8));
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__img {
|
||||||
|
transform: translate3d(-10px, -10px, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__img img {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podlozhka:hover .sugg__text{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__img img {
|
||||||
|
transition: opacity .1s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 90%;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
|
transform: translate3d(0, -50%, 0);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity .2s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text p {
|
||||||
|
width: 180px;
|
||||||
|
color: black;
|
||||||
|
font-family:sans-serif;
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 17px;
|
||||||
|
background: white;
|
||||||
|
text-decoration: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sugg__text h2 {
|
||||||
|
width: 100px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 auto;
|
||||||
|
color: black;
|
||||||
|
font-family:sans-serif;
|
||||||
|
font-size: 17px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
height: 200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-top: 1%;
|
||||||
|
background-color: rgba(124, 173, 201, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__search {
|
||||||
|
width: 300px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-right: 2px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts {
|
||||||
|
width: 165px;
|
||||||
|
height: 96px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts__imgtop {
|
||||||
|
width: 165px;
|
||||||
|
height: 48px;
|
||||||
|
border-bottom: 2px solid white;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer__contacts__img {
|
||||||
|
width: 166px;
|
||||||
|
height: 48px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user