Текст программы

Материал из didactis
Версия от 20:46, 19 февраля 2022; Ilia (обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

<!DOCTYPE html> <html>

   <head>
   <title>Albion</title>
       <meta charset="UTF-8">
   <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=Montserrat:wght@300&display=swap" rel="stylesheet">    
   
   <link rel="stylesheet" href="css/style.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=Montserrat:wght@300&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
   </head>
   <body>
   
   <header class="header">
               <nav class="nav">
                   <a class="nav__link" href="#" target="_blank">Группа ВК</a>
                   <a class="nav__link" href="#" target="_blank">Написать заявку в клан</a>
                   <a class="nav__link" href="#" target="_blank">Ютуб-канал нашего лидера</a>
               </nav>
   </header>
   

Добро пожаловать!

Welcome to Albion

               <a class="btn" href="#" target="_blank">Узнать о нас больше</a>
       <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
       <script src="app.js"></script> 
   </body>

</html>


body {

   margin: 0;
   font-family: 'Montserrat', sans-serif;
   font-size: 15px;
   line-height: 1.6;
   color: #333;

}

  • ,
    before,
    after{
   box-sizing: border-box;

}

h1, h2, h3, h4, h5, h6 {

   margin: 0;

}

/* Контейнер */ .container {

   width: 100%;
   max-width: 1200px;
   margin: 0 auto;

}

/* Интро */

.intro {

   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   height: 100vh;
   
   background: 
   url("../images/intro.jpg") center no-repeat;
   -webkit-background-size: cover;
   background-size: cover;

}

.intro__inner {

   width: 100%;
   max-width: 880px;
   margin: 0 auto;
   text-align: center;

}

.intro__title {

   color: #fff;
   font-size: 150px;
   font-weight: 700;
   text-transform: uppercase;
   line-height: 1;
   

}

.intro__title:after {

   content: "";
   display: block;
   width: 80px;
   height: 3px;
   margin: 60px auto 60px;
   background-color: #fff;

}

.intro__suptitle {

   margin-bottom: 75px;
   font-family: 'Kaushan Script';
   font-size: 72px;
   color: #fff;

}

/* Шапка */ .header {

   width: 100%;
   padding-top: 30px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;

}

.header__inner {

   display: flex;
   justify-content: space-between;
   align-items: center;

}

.header__logo {

   font-size: 45px;
   font-weight: 700;
   color: #fff;

}

/* Навигация */ .nav {

   font-size: 14px;
   text-transform: uppercase;

}

.nav__link {

   display: inline-block;
   vertical-align: top;
   margin: 0 10px;
   position: relative;
   color: #fff;
   text-decoration: none;
   transition: color .1s linear;

}

.nav__link:after {

   content: "";
   display: block;
   width: 100%;
   height: 3px;
   display: none;
   background-color: #fce38a;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: 1;

}

.nav__link:hover {

   color: #fce38a;

}

.nav__link:hover:after {

   display: block;

}

/* Кнопки */ .btn {

   display: inline-block;
   vertical-align: top;
   padding: 8px 30px;
   border: 3px solid #fff;
   font-size: 17px;
   font-weight: 700;
   color: #fff;
   text-transform: uppercase;
   text-decoration: none;

}

.btn:hover {

   background-color: #fff;
   color: #333;

}