Саркисян Самвел Багратович 1 年之前
当前提交
afaaa24cf8

二进制
images/design.png


二进制
images/ext.png


二进制
images/free-icon-antiseptic-2866389 1.png


二进制
images/free-icon-communication-4947184 1.png


二进制
images/free-icon-deadline-1237158 1.png


二进制
images/free-icon-employee-4577191 1.png


二进制
images/free-icon-good-quality-4381719 1@2x.png


二进制
images/free-icon-hired-5439696 1.png


二进制
images/free-icon-instagram-1384015 1.png


二进制
images/free-icon-telegram-3670044 1.png


二进制
images/free-icon-trending-topic-2595122 1.png


二进制
images/free-icon-usability-3774436 1.png


二进制
images/free-icon-vk-3670029 1.png


二进制
images/jen.png


二进制
images/logo.png


二进制
images/muj.png


二进制
images/ped_jen.png


二进制
images/ped_muj.png


二进制
images/repair.png


二进制
images/sale.png


二进制
images/str.png


+ 163 - 0
index.html

@@ -0,0 +1,163 @@
+<!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">
+    <title>JULANINA</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="header">
+        <a>маникюр</a>
+        <a>педикюр</a>
+        <a>наращивание</a>
+        <a>ремонт и снятие</a>
+        <div class="logotipe"><img src="images/logo.png">
+            <p>JULANINA</p>
+        </div>
+        <a>укрепление</a>
+        <a>дизайн ногтей</a>
+        <a>акции и скидки</a>
+        <a>контакты</a>
+        </ul>
+    </div>
+    <div class="about_us">
+        <div class="au_hc">
+            <p>О нас</p>
+        </div>
+        <div class="au_mc">
+            <p>Организация, в которой профессиональные мастера маникюра и педикюра, выезжают на дом к клиенту, наши
+                мастера находят индивидуальный подход к каждому клиентy
+            </p>
+            <p>Наши клиенты могут получит красивые ухоженные ногти не выходя из дома и не тратя время на дорогу, наши
+                мастера сами приедут со всеми нужными материалы. Также нашим клиентам будет представлены услуги массажа
+                рук/ ног.
+            </p>
+            <p>Наша компания будет связывать клиента и мастера по маникюру и будет контролировать, чтобы мастер приехал
+                в нужное время и со стерильными материалами.</p>
+        </div>
+    </div>
+    <div class="container">
+        <div class="permisions">
+            <div class="p_hc">
+                <p>Преимущества нашей</br>
+                    компании</p>
+            </div>
+            <div class="p_mc">
+                <div class="p_mc_img">
+                    <div class="permission_list">
+                        <img src="images/free-icon-trending-topic-2595122 1.png">
+                        <p>Актуальность</p>
+                    </div>
+                    <div class="permission_list">
+                        <img src="images/free-icon-antiseptic-2866389 1.png">
+                        <p>Стерильность</p>
+                    </div>
+                    <div class="permission_list">
+                        <img src="images/free-icon-good-quality-4381719 1@2x.png">
+                        <p>Качество</p>
+                    </div>
+                    <div class="permission_list">
+                        <img src="images/free-icon-communication-4947184 1.png">
+                        <p>Коммуникабельность</p>
+                    </div>
+                </div>
+                <div class="p_mc_img">
+                    <div class="permission_list">
+                        <img src="images/free-icon-hired-5439696 1.png">
+                        <p>Доверие</p>
+                    </div>
+                    <div class="permission_list">
+                        <img src="images/free-icon-usability-3774436 1.png">
+                        <p>Удобство</p>
+                    </div>
+                    <div class="permission_list">
+                        <img src="images/free-icon-deadline-1237158 1.png">
+                        <p>В указанное<br> время</p>
+                    </div>
+                    <div class="permission_list">
+                        <img src="images/free-icon-employee-4577191 1.png">
+                        <p>Высококвалифицированные<br> работники</p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+    <div class="categories_sale">
+        <div class="categories">
+            <div class="categories_img">
+                <p style="background-image: none;">Женский маникюр</p>
+            </div>
+            <div class="categories_img">
+                <p style="background-image: none;">Мужской маникюр</p>
+            </div>
+            <div class="categories_img">
+                <p style="background-image: none;">Дизайн ногтей</p>
+            </div>
+        </div>
+        <div class="sale">
+            <div class="subscribe">
+                <p>Подпишитесь, чтобы не пропустить<br> новые Акции и новости!</p>
+            </div>
+            <div class="form_sale">
+                <div class="sale_subs">
+                    <p>скидка 5% за подписку!</p>
+                </div>
+                <div class="mail_subs">
+                    <div class="mail">
+                        <p>example@mail.ru</p>
+                    </div>
+                    <div class="subs">
+                        <p>ПОДПИСАТЬСЯ</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="container_two">
+        <div class="pedicure_repair">
+            <div class="pedicure_repair_img">
+                <p style="background-image: none;">Женский педикюр</p>
+            </div>
+            <div class="pedicure_repair_img">
+                <p style="background-image: none;">Мужской педикюр</p>
+            </div>
+            <div class="pedicure_repair_img">
+                <p style="background-image: none;">Ремонт и снятие</p>
+            </div>
+        </div>
+    </div>
+    <div class="strengthening_extension">
+        <div class="strengthening_extension_img">
+            <p style="background-image: none;">Укрепление</p>
+        </div>
+        <div class="strengthening_extension_img">
+            <p style="background-image: none;">Наращивание</p>
+        </div>
+    </div>
+    <div class="container_gradient">
+        <div class="footer">
+            <div class="footer_logo">
+                <p>JULANINA</p>
+            </div>
+            <div class="social_media">
+                <img src="images/free-icon-vk-3670029 1.png">
+                <img src="images/free-icon-instagram-1384015 1.png">
+                <img src="images/free-icon-telegram-3670044 1.png">
+            </div>
+            <div class="footer_nav">
+                <ul>
+                    <li>о проектe</li>
+                    <li>свяжитесь с нами</li>
+                    <li>политика конфиденциальности</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

+ 271 - 0
style.css

@@ -0,0 +1,271 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+body{
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+}
+p{
+    padding: 0;
+    margin:0;
+}
+.header {
+width: 100%;
+border-bottom: solid 1px black;
+display: flex;
+justify-content: space-around;
+align-items: center;
+font-size: 24px;
+}
+
+li {
+    list-style-type: none;
+}
+.header div{
+    margin-bottom: 15px;
+}
+.about_us{
+    padding-top: 55px;
+    width: 80%;
+    margin: auto;
+    display: flex;
+    font-size: 32px;
+}
+.au_hc{
+    width: 30%;
+    border-left: 3px solid #BF7D89;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    padding-left:15px ;
+    font-size: 32px;
+}
+.au_mc p{
+    margin-bottom: 15px;
+}
+.permisions{
+    font-size: 32px;
+    padding-top: 65px;
+    width: 80%;
+    margin: auto;
+}
+.container{
+    background-color: #F9D5DC;
+    width: 100%;
+    margin-top: 50px;
+}
+.p_mc{
+    font-size: 32px;
+    margin-top: 100px;
+}
+.p_hc{
+    width: 30%;
+    border-left: 3px solid #BF7D89;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    padding-left:15px ;
+    font-size: 32px;
+}
+.p_mc_img{
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+.permission_list{
+    margin-bottom: 60px;
+    display: flex;  
+    align-items: center;
+    flex-direction: column;
+    width: 25%;
+    text-align: center;
+}
+.permission_list img{
+    width: 90px;
+}
+.categories_sale{
+    padding-top: 95px;
+    width: 80%;
+    margin: auto;
+    font-size: 32px;
+    padding-bottom: 40px;
+}
+.categories {
+    display: flex;
+    justify-content: space-between;
+}
+.categories :nth-child(1n){
+    background-image: url(images/jen.png);
+}
+.categories :nth-child(2n){
+    background-image: url(images/muj.png);
+}
+.categories :nth-child(3n){
+    background-image: url(images/design.png);
+}
+.categories_img{
+    height: 60vh ;
+    width: 30%;
+    background-size: cover;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    
+}
+.categories p {
+    color: white;
+    font-weight: 700;
+    padding-bottom: 3vh;
+}
+.sale{
+    margin-top: 100px;
+    background-image: url(images/sale.png);
+    height: 25vh;
+    background-size: cover;
+    font-size: 36px;
+    font-weight: 700;
+    color: white;
+    width: 100%;
+    display: flex;
+}
+.subscribe{
+    float: left;
+    display: flex;
+    align-items: center;
+    padding-left: 120px;
+    margin-right: 100px;
+}
+.sale_subs{
+    background-color: #F3B6C1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+    width: 70vh;
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+.mail_subs{
+    display: flex;
+}
+.mail{
+    background-color: white;
+    color: black;
+    font-weight:400;
+    height: 70px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 35vh;
+    font-size: 32px;
+}
+.subs{
+    background-color: #F3B6C1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
+    width: 35vh;
+}
+.container_two{
+    background-color: #8C7175;
+    width: 100%;
+    margin-top: 50px;
+}
+.pedicure_repair{
+    padding-top: 65px;
+    width: 80%;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    font-size: 32px;
+    padding-bottom: 65px;
+}
+.pedicure_repair :nth-child(1n){
+    background-image: url(images/ped_jen.png);
+}
+.pedicure_repair :nth-child(2n){
+    background-image: url(images/ped_muj.png);
+}
+.pedicure_repair :nth-child(3n){
+    background-image: url(images/repair.png);
+}
+.pedicure_repair_img{
+    height: 60vh ;
+    width: 30%;
+    background-size: cover;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+.pedicure_repair_img p {
+    margin-bottom: 3vh;
+    color: white;
+    font-weight: 700;
+}
+.strengthening_extension{
+    padding-top: 105px;
+    width: 80%;
+    margin: auto;
+    display: flex;
+    justify-content: space-between;
+    font-size: 32px;
+    padding-bottom: 65px;
+}
+.strengthening_extension :nth-child(1n){
+    background-image: url(images/str.png)
+}
+.strengthening_extension :nth-child(2n){
+    background-image: url(images/ext.png)
+}
+.strengthening_extension_img{
+    height: 30vh ;
+    width: 48%;
+    background-size: cover;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+}
+.strengthening_extension_img p {
+    margin-bottom: 3vh;
+    color: white;
+    font-weight: 700;
+}
+.footer{
+    font-size: 32px;
+    padding-top: 100px;
+    width: 80%;
+    margin: auto;
+    height: 700px;
+}
+.footer_logo{
+    display: flex;
+    justify-content: center;
+    font-size: 60px;
+    font-weight: 500;
+    padding-bottom: 50px;
+}
+.social_media{
+    display: flex;
+    justify-content: center;
+    padding-bottom: 50px;
+}
+.social_media img{
+    margin-left: 30px;
+}
+.footer_nav{
+    display: flex;
+    justify-content: center;
+}
+.footer_nav p{
+    margin-left: 50px;
+}
+ul{
+    display: flex;
+    justify-content: center;
+}
+li{
+    margin-right: 40px;
+}
+.container_gradient{
+    background: linear-gradient(white, black);
+}