Вот часть кода
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
a:focus, a:active {
outline: none;
}
a {
text-decoration: none;
color: inherit;
}
.button1:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.button2:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.button3:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.button4:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.header {
position: fixed;
display: block;
width: 100%;
height: 48px;
top: 0px;
text-align: center;
background: #FFFFFF;
margin: 0 auto;
}
.button_container {
display: flex;
width: 1579px;
height: 37px;
margin: 5px 0px 5px 171px;
}
.button1 {
width: 203px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.about_me-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.about_me-text::before {
content: url(../img/icons/aboutme.svg);
width: 30px;
height: 30px;
}
.button2 {
width: 203px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.my_skills-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.my_skills-text::before {
content: url(../img/icons/myskills.svg);
width: 30px;
height: 30px;
}
.button3 {
width: 167px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.reviews-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.reviews-text::before {
content: url(../img/icons/reviews.svg);
width: 30px;
height: 30px;
}
.button4 {
width: 218px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.myworks-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.myworks-text::before {
content: url(../img/icons/myworks.svg);
width: 30px;
height: 30px;
}
.line_container {
display: flex;
width: 1920px;
height: 0px;
margin: 0 auto;
}
.line {
width: 1920px;
height: 0px;
border: 1px solid #BEBBBB;
}
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, maximum-scale=1.0">
<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=Inter&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style.css">
<title>Reshetilo Inc.</title>
<link rel="shortcut icon" href="./img/rog.png" type="image/png">
</head>
<body>
<header class="header">
<div class="button_container">
<div class="button1">
<a class = "about_me-text" href= "#aboutme" style="text-decoration: none">ПРО МЕНЕ</a>
</div>
<div class="button2">
<a class = "my_skills-text" href= "#myskills" style="text-decoration: none">МОЇ СКІЛИ</a>
</div>
<div class="button3">
<a class = "reviews-text" href= "#mysitereviews" style="text-decoration: none">ВІДГУКИ</a>
</div>
<div class="button4">
<a class = "myworks-text" href= "#myworksboost" style="text-decoration: none">МОЇ РОБОТИ</a>
</div>
</div>
<div class="line_container">
<hr class = "line">
</div>
</header>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
display: block;
}
a:focus, a:active {
outline: none;
}
a {
text-decoration: none;
color: inherit;
}
.button1:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.button2:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.button3:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.button4:hover {
background: #88001B;
color: #C80005;
tansition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
}
.header {
position: fixed;
display: block;
width: 100%;
height: 48px;
top: 0px;
text-align: center;
background: #FFFFFF;
margin: 0 auto;
}
.button_container {
display: flex;
width: 1579px;
height: 37px;
margin: 5px 0px 5px 171px;
}
.button1 {
width: 203px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.about_me-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.about_me-text::before {
content: url(../img/icons/aboutme.svg);
width: 30px;
height: 30px;
}
.button2 {
width: 203px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.my_skills-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.my_skills-text::before {
content: url(../img/icons/myskills.svg);
width: 30px;
height: 30px;
}
.button3 {
width: 167px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.reviews-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.reviews-text::before {
content: url(../img/icons/reviews.svg);
width: 30px;
height: 30px;
}
.button4 {
width: 218px;
height: 36px;
border-radius: 45px;
background: #C80005;
border:none;
}
.myworks-text {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
color: #FFFFFF;
}
.myworks-text::before {
content: url(../img/icons/myworks.svg);
width: 30px;
height: 30px;
}
.line_container {
display: flex;
width: 1920px;
height: 0px;
margin: 0 auto;
}
.line {
width: 1920px;
height: 0px;
border: 1px solid #BEBBBB;
}