Home Explore Help
Sign In
kp11
/
master_manikura_isip-21
13
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

init

Саркисян Самвел Багратович 1 year ago
commit
afaaa24cf8
23 changed files with 434 additions and 0 deletions
Unified View Show Diff Stats
  1. BIN
      images/design.png
  2. BIN
      images/ext.png
  3. BIN
      images/free-icon-antiseptic-2866389 1.png
  4. BIN
      images/free-icon-communication-4947184 1.png
  5. BIN
      images/free-icon-deadline-1237158 1.png
  6. BIN
      images/free-icon-employee-4577191 1.png
  7. BIN
      images/free-icon-good-quality-4381719 1@2x.png
  8. BIN
      images/free-icon-hired-5439696 1.png
  9. BIN
      images/free-icon-instagram-1384015 1.png
  10. BIN
      images/free-icon-telegram-3670044 1.png
  11. BIN
      images/free-icon-trending-topic-2595122 1.png
  12. BIN
      images/free-icon-usability-3774436 1.png
  13. BIN
      images/free-icon-vk-3670029 1.png
  14. BIN
      images/jen.png
  15. BIN
      images/logo.png
  16. BIN
      images/muj.png
  17. BIN
      images/ped_jen.png
  18. BIN
      images/ped_muj.png
  19. BIN
      images/repair.png
  20. BIN
      images/sale.png
  21. BIN
      images/str.png
  22. 163 0
      index.html
  23. 271 0
      style.css

BIN
images/design.png
View File


BIN
images/ext.png
View File


BIN
images/free-icon-antiseptic-2866389 1.png
View File


BIN
images/free-icon-communication-4947184 1.png
View File


BIN
images/free-icon-deadline-1237158 1.png
View File


BIN
images/free-icon-employee-4577191 1.png
View File


BIN
images/free-icon-good-quality-4381719 1@2x.png
View File


BIN
images/free-icon-hired-5439696 1.png
View File


BIN
images/free-icon-instagram-1384015 1.png
View File


BIN
images/free-icon-telegram-3670044 1.png
View File


BIN
images/free-icon-trending-topic-2595122 1.png
View File


BIN
images/free-icon-usability-3774436 1.png
View File


BIN
images/free-icon-vk-3670029 1.png
View File


BIN
images/jen.png
View File


BIN
images/logo.png
View File


BIN
images/muj.png
View File


BIN
images/ped_jen.png
View File


BIN
images/ped_muj.png
View File


BIN
images/repair.png
View File


BIN
images/sale.png
View File


BIN
images/str.png
View File


+ 163 - 0
index.html
View File 

@@ -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
View File 

@@ -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);
 
+}