<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Домашка</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header id="header" class="header">
<div class="container">
<div class="andrey">
<div class="img-box">
<img src="111/logo.png" alt="WAYUP"> </div>
<div class="img-box">
<img src="111/111.png" alt="desktop" class="desktop">
</div>
</div>
<div class="andrey">
<div class="offer">
<h1 class="title">
С помощью верстки
я создам ту жизнь, о которой
мечтаю!
</h1>
<p class="intro">
Мои стремления + настойчивость позволят мне достичь чего угодно. Я не верю в это. Я знаю это на 100%. Меня не остановить!
</p>
<a href="#" class="btn">Двигаться к мечте!</a>
</div>
<div class="offer">
<img src="https://i2.rozetka.ua/goods/16718236/40559048_images_16718236305.jpg" alt="">
</div>
</div>
</div>
</header>
<section id="learn" class="learn">
<div class="container">
</div>
</section>
<section id="mail" class="mail">
<div class="container">
</div>
</section>
<footer id="footer" class="footer">
<div class="container">
</div>
</footer>
</body>
</html>body {
padding: 0;
margin: 0;
}
.container {
width:1170px;
margin: auto;
}
.header {
background: rgba(73,155,234,1);
background: -moz-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to right, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
padding-top: 62px;
color: white;
padding-bottom: 145px;
}
.title {
font-size: 37px;
font-family: 'Unbutu', sans-serif;
}
.intro {
font-size: 16px;
font-family: 'Unbutu', sans-serif;
width: 380px;
margin-top: 40px;
}
.btn {
font-family: 'Montserrat', sans-serif;
font-size: 15px;
color: black;
background: #ffd429;
display: block;
padding: 15px 0;
text-decoration: none;
text-align: center;
width: 223px;
font-weight: 900;
margin-top: 40px;
}
.offer {
margin-top: 123px;
width: 570px;
}
.andrey {
display: flex;
justify-content: space-between;
.btn {
font-family: 'Unbutu', sans-serif;
font-size: 15px;
color: white;
background: #ffd429;
border-radius: 100PX;
display: block;
width: 500px
padding: 30px 0;
text-align: center;
text-decoration: none;
}body {
padding: 0;
margin: 0;
}
.container {
width: 1170px;
margin: auto;
}
.header {
background: rgba(73,155,234,1);
background: -moz-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(left, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to right, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=1 );
padding-top: 62px;
color: white;
}
.desktop {
float: right;
}