├── Examples ├── 03 │ ├── css │ │ └── style.css │ └── index.html └── 04 │ ├── css │ └── style.css │ └── index.html ├── css └── style.css ├── images ├── about │ ├── about-1.jpg │ └── about-2.jpg ├── footer │ └── footer-bg.png ├── gallery │ ├── gallery-1.jpg │ ├── gallery-2.jpg │ ├── gallery-3.jpg │ └── gallery-4.jpg ├── icons │ ├── instagram.svg │ ├── mail.svg │ ├── map-pin.svg │ ├── phone.svg │ └── sprite.svg ├── logo.png ├── masters │ ├── master-1.jpg │ ├── master-2.jpg │ └── master-3.jpg ├── price │ └── price-bg.png └── slider │ └── slider_img-1.jpg └── index.html /Examples/03/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/Examples/03/css/style.css -------------------------------------------------------------------------------- /Examples/03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lesson 3 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Lesson 3 - CSS Basics

15 | 16 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | 32 | 33 | 34 | Button 35 | 36 | 37 | -------------------------------------------------------------------------------- /Examples/04/css/style.css: -------------------------------------------------------------------------------- 1 | p { 2 | text-align: justify; 3 | } 4 | 5 | input{ 6 | cursor: pointer; 7 | } -------------------------------------------------------------------------------- /Examples/04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lesson 4 8 | 9 | 10 | 11 | 12 | 13 | 14 |

Lesson 4 - Font styles

15 | 16 | 17 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus itaque commodi nihil vel voluptatem nisi quis cum dicta aut fuga rerum reiciendis debitis cupiditate harum, accusamus corporis optio at eligendi. 18 | Voluptatem earum nisi ab maiores fuga corporis enim rem, dolorum dolore neque minus provident, eveniet dolorem error quas illum ratione velit libero esse voluptate repellendus? Adipisci vel veniam nostrum ratione? 19 | Nemo, necessitatibus perf erendis non itaque debitis aspernatur. Nobis accusamus sit eum deserunt voluptate at voluptas quod minima consequuntur eligendi labore nam similique maxime voluptatibus, maiores pariatur ea laudantium laboriosam dolore! 20 | Dicta quae inventore minima ipsum esse illum. Recusandae iure laudantium ex ea sit, odit laboriosam neque veniam. Nobis numquam ea incidunt! Cumque ad odit corporis officiis voluptas. Delectus, dolores facere. 21 | A nihil tempora at dolorem i ncidunt eos odit, provident quod perferendis saepe ducimus animi necessitatibus voluptas rerum ipsa sequi temporibus praesentium culpa illum, mollitia, corrupti adipisci repellat ad! Illum, illo? 22 | Unde officiis saepe suscipit quaerat explicabo a non expedita nemo? Nobis consequatur, eaque rerum nesciunt quia voluptate quasi aliquid maxime id fugit cupiditate. Ex tempore nulla, officia debitis impedit temporibus. 23 | Soluta beatae, pariatur suscipit repudiandae quisquam distinctio nam omnis tempora molestiae iure hic officia non ex doloribus ut. Consequatur nemo voluptatibus praesentium quae illo expedita, porro voluptas totam quaerat quis? 24 | Non, voluptatem praesentium incidunt natus est culpa magni at dignissimos nisi magnam quasi expedita dolorem provident tempora? Provident, libero. Dignissimos nobis praesentium perspiciatis officiis! Necessitatibus illo amet possimus neque ipsum? 25 | Esse architecto officiis voluptatibus adipisci distinctio? Vel sunt libero praesentium numquam enim reiciendis molestiae facere molestias eum culpa? Nostrum quibusdam reiciendis ex ad, nisi quas necessitatibus soluta ipsa possimus dolorem? 26 | Expedita, cumque! Alias corrupti vel placeat laboriosam eius neque maxime nesciunt aut recusandae, ullam nobis minima eum labore nam itaque expedita beatae repellat. Molestiae corporis ratione consectetur quis pariatur cum?

27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | 3 | --theme-color: #FF6C00; 4 | 5 | --text-primary: #303030; 6 | --text-secondary: #555; 7 | --text-secondary-lighter: #9DA4BD; 8 | 9 | --primary-font: 'Open Sans'; 10 | --secondary-font: 'Raleway'; 11 | 12 | } 13 | 14 | body{ 15 | font-family: var(--primary-font); 16 | } 17 | 18 | ul, ol{ 19 | list-style: none; 20 | } 21 | 22 | a{ 23 | text-decoration: none; 24 | } 25 | 26 | address{ 27 | font-style: normal; 28 | } 29 | 30 | 31 | 32 | /* =========== Header styles starts here =========== */ 33 | 34 | .nav-link{ 35 | font-weight: 600; 36 | font-size: 12px; 37 | line-height: 1.3; 38 | letter-spacing: 0.1em; 39 | 40 | /* color: #FFFFFF; */ 41 | } 42 | 43 | .nav-link:hover, 44 | .nav-link:focus{ 45 | color: var(--theme-color); 46 | } 47 | 48 | .active-page{ 49 | color: var(--theme-color); 50 | } 51 | 52 | 53 | .link-box-phone{ 54 | font-weight: 600; 55 | font-size: 12px; 56 | line-height: 1.3; 57 | letter-spacing: 0.1em; 58 | 59 | /* color: #FFFFFF; */ 60 | } 61 | 62 | .primary-link{ 63 | font-weight: 600; 64 | font-size: 12px; 65 | line-height: 1.3; 66 | letter-spacing: 0.09em; 67 | text-transform: uppercase; 68 | 69 | /* color: #FFFFFF; */ 70 | } 71 | 72 | .sidebar-link{ 73 | font-weight: 600; 74 | font-size: 11px; 75 | line-height: 1.3; 76 | letter-spacing: 0.2em; 77 | 78 | color:var(--text-primary); 79 | } 80 | 81 | .sidebar-link:hover, 82 | .sidebar-link:focus{ 83 | color: var(--theme-color); 84 | } 85 | 86 | .supheader{ 87 | font-weight: 600; 88 | font-size: 11px; 89 | line-height: 1.3; 90 | letter-spacing: 0.1em; 91 | text-transform: uppercase; 92 | 93 | color: rgba(157, 164, 189, 0.6); 94 | } 95 | 96 | .main-header{ 97 | font-family: var(--secondary-font); 98 | font-weight: bold; 99 | font-size: 72px; 100 | line-height: 1.1; 101 | letter-spacing: 0.05em; 102 | 103 | /* color: #FFFFFF; */ 104 | } 105 | .subheader{ 106 | font-size: 18px; 107 | line-height: 1.6; 108 | letter-spacing: 0.02em; 109 | color: var(--text-secondary-lighter); 110 | } 111 | 112 | 113 | /* =========== Header styles ends here =========== */ -------------------------------------------------------------------------------- /images/about/about-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/about/about-1.jpg -------------------------------------------------------------------------------- /images/about/about-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/about/about-2.jpg -------------------------------------------------------------------------------- /images/footer/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/footer/footer-bg.png -------------------------------------------------------------------------------- /images/gallery/gallery-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/gallery/gallery-1.jpg -------------------------------------------------------------------------------- /images/gallery/gallery-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/gallery/gallery-2.jpg -------------------------------------------------------------------------------- /images/gallery/gallery-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/gallery/gallery-3.jpg -------------------------------------------------------------------------------- /images/gallery/gallery-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/gallery/gallery-4.jpg -------------------------------------------------------------------------------- /images/icons/instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /images/icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /images/icons/map-pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /images/icons/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/icons/sprite.svg: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/logo.png -------------------------------------------------------------------------------- /images/masters/master-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/masters/master-1.jpg -------------------------------------------------------------------------------- /images/masters/master-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/masters/master-2.jpg -------------------------------------------------------------------------------- /images/masters/master-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/masters/master-3.jpg -------------------------------------------------------------------------------- /images/price/price-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/price/price-bg.png -------------------------------------------------------------------------------- /images/slider/slider_img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/starallax/FrontEnd_46/49e7fdfa99b830fc94da9f5344184146131681f3/images/slider/slider_img-1.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BarberShop 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Gallery Store&More 16 | 17 | 25 | 26 |
27 | +38 044 111 11 11 28 | онлайн-запись 29 |
30 | 31 |
32 | 33 | 37 | 38 |
39 |

A hair salon for men in Kyiv

40 |

BarberShop

41 |

Мы эксперты в модных мужских стрижках.
42 | Работаем быстро, осторожно и со вкусом.

43 |
44 | 45 |
46 | 47 |
48 | 49 |
50 |
51 | 52 | 53 |
54 | 55 |
56 |

О нас

57 |

Лучший Барбершоп твоего города

58 |

Мы команда, которая никогда не останавливается на достигнутом 59 | и жаждет перемен. И когда ты попадешь в руки нашего мастера, 60 | то уже никогда не сможешь быть прежним. Мы команда, которая всегда с клиентами "на одной волне". 61 | Поэтому, мы всегда готовы усовершенствовать каждого, кто к нам приходит! 62 |

63 | онлайн-запись 64 |
65 | 66 |
67 | 68 | 69 |
70 |

Проведи время в компании лучших мастеров

71 |

Услуги и цены

72 | 73 | 99 | 100 | онлайн-запись 101 |
102 | 103 | 104 |
105 |
106 |

старая традиционная школа

107 |

Почему приходят именно к нам?

108 |

О нас говорят только хорошее. Но лучше 1 раз увидеть и прочувствовать, чем 10 раз прочитать.

109 |
110 |
111 |
    112 |
  • 113 | 600 114 |

    Довольных клиентов в день

    115 |
    • 116 |
  • 117 | 50 118 |

    Наград за отличный сервис

    119 |
    • 120 |
  • 121 | 20 122 |

    Лучших мастеров Киева

    123 |
    • 124 |
  • 125 | 100 126 |

    Подарков постоянным клиентам

    127 |
    • 128 |
129 |
130 |
131 | 132 | 133 |
134 |

для настоящих ценителей атмосферы

135 |

Наши мастера

136 | 171 |
172 | 173 | 174 | 175 |
176 |

На латинском языке “барба” означает “борода”

177 | 183 |
184 | 185 |
186 | 187 | 188 | 189 | 215 | 216 | 217 | 218 | 219 | 220 | --------------------------------------------------------------------------------