Текст программы
<!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">
Привет :D
<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;
}
