<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS\stylesheet.css">
<title>gasIcebreaker</title>
</head>
<body>
<header>
<div class="header_title">
<h1 class="header_logo">MA,m</h1>
<a href="#" class="header_mail">info@lead-group.ru</a>
<a href="" class="header_numder">+7 (495) 123-45-67</a>
<a href="#" class="search"><img src="img\search.svg" alt="лупа"></a>
</div>
<hr class="header_line">
<nav>
<ul class="header_list">
<li><a href="#" class="header_link">О НАС</a></li>
<li><a href="#" class="header_link">ФЛОТ</a></li>
<li><a href="#" class="header_link">ИНВЕСТОРАМ</a></li>
<li><a href="#" class="header_link">КАРЬЕРА</a></li>
<li><a href="#" class="header_link">ПРЕСС-ЦЕНТР</a></li>
<li><a href="#" class="header_link">УСТОЙЧИВОЕ РАЗВИТИЕ</a></li>
<li><a href="#" class="header_link">КОНТАКТЫ</a></li>
</ul>
</nav>
<div class="header_txt__block">
<h1 class="header_txt__title">Первый в мире ледокольный газовоз</h1>
<div class="header_txt">Lorem ipsum dolor sit amet consectetur adipisicing
elit. Iure consequuntur debitis maxime, esse dignissimos doloribus natus
impedit tenetur nobis dolorem perspiciatis asperiores error nesciunt
soluta itaque quos illo eum non!
</div>
<button>ПОДРОБНЕЕ</button>
<div class="arrow-left"><img src="img\arrow-left.svg" alt="Левая стрелка"></div>
<div class="arrow-right"><img src="img\arrow-right.svg" alt ="Правая стрелка"></div>
</div>
<div class="icebeaker_main_block">
<div class="icebeaker_block">
<h2 class="icebeaker_txt">Танкер-газовоз СПГ «КАПИТАН ДАНИЛКИН»</h2>
<ul class="icebeaker_list">
<li class="icebeaker_link">Грузовместимость:</li>
<li class="icebeaker_link">Ледопроходимость</li>
<li class="icebeaker_link">Ледовый класс:</li>
<li class="icebeaker_link">Число «Азиподов»:</li>
</ul>
</div>
</div>
</header>
<main>
<section>
</section>
</main>
<footer>
</footer>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 900px;
text-align: center;
background: url(ice_title.jpg);
background-size: cover;
}
.header_title {
padding-top: 25px;
margin-bottom: 30px;
}
.header_logo {
display: inline;
color: var(--white, #FFF);
font-size: 25px;
position: absolute;
left: 18%;
}
.header_mail {
text-decoration: none;
color: var(--white, #FFF);
font-size: 12px;
margin-right: 3%;
}
.header_numder {
text-decoration: none;
color: var(--white, #FFF);
font-size: 12px;
}
.search {
position: absolute;
right: 18%;
}
.header_line {
width: 64%;
margin: 0 auto;
margin-bottom: 30px;
}
nav {
display: block;
width: 64%;
margin: 0 auto;
margin-bottom: 120px;
}
.header_list {
list-style-type: none;
text-align: center;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
}
.header_link {
display: inline-block;
text-decoration: none;
color: var(--white, #FFF);;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 140%;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.header_link:last-child {
margin-left: 0;
}
.header_link:hover {
color: tomato;
transition-duration: 1ms;
}
.header_txt__block {
width: 634px;
position: absolute;
left: 18%;
text-align: left;
}
.header_txt__title {
color: var(--white, #FFF);
font-family: HelveticaNeueCyr;
font-size: 60px;
font-style: normal;
font-weight: 300;
line-height: 140%;
padding-bottom: 30px;
}
.header_txt {
color: var(--white, #FFF);
font-family: HelveticaNeueCyr;
font-size: 14px;
font-style: normal;
font-weight: 100;
line-height: 140%;
border-left: 3px solid #FFF;
padding-left: 30px;
margin-bottom: 50px;
}
button {
display: block;
background-color: tomato;
color: var(--white, #FFF);
font-family: HelveticaNeueCyr;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 140%;
letter-spacing: 0.8px;
text-transform: uppercase;
padding: 15px 30px 14px 30px;
margin-bottom: 131px;
}
.arrow-left {
background: #133D8D;
display: inline-block;
padding: 15px;
margin-right: 20px;
}
.arrow-right {
background: #133D8D;
display: inline-block;
padding: 15px;
}
.icebeaker_main_block {
display:inline-block;
background: rgba(51, 51, 51, 0.30);
position: absolute;
}
.icebeaker_txt {
color: var(--white, #FFF);
font-family: HelveticaNeueCyr;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 140%;
letter-spacing: 0.7px;
text-transform: uppercase;
}
.icebeaker_link {
list-style-type: none;
color: var(--white, #FFF);
font-family: HelveticaNeueCyr;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 140%;
}
.header_txt__block {
width: 634px;
float: left;
text-align: left;
}
.icebeaker_main_block {
background: rgba(51, 51, 51, 0.30);
float: right;
}<div class="wrapper">
<div class="header_txt__block">...</div>
<div class="icebeaker_main_block">...</div>
</div>.wrapper {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
}
.header_txt__block {
width: 634px;
text-align: left;
}
.icebeaker_main_block {
background: rgba(51, 51, 51, 0.30);
}<div class="wrapper">
<div class="header_txt__block">...</div>
<div class="icebeaker_main_block">...</div>
</div>.wrapper {
display: grid;
grid-template-areas: "left_block right_block";
}
.header_txt__block {
width: 634px;
text-align: left;
grid-area: left_block;
}
.icebeaker_main_block {
background: rgba(51, 51, 51, 0.30);
grid-area: right_block;
}
Средний
Средний
