Я 2 года пытаюсь изучить Frontend. Только в этом году нахожу нужную информацию и мотивации больше чем раньше.
Я изучаю HTML и CSS с ролика длительностью 6 часов. Я остановился на теме Flexbox. Я пытаюсь делать header сайта youtube, применил flex все отлично, но при уменьшения размера окна иконки исчезают, выходят за окно.
Помогите решить проблему.
Если есть еще ошибки, прошу исправить их. Спасибо за внимание
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="left-section">
<img class="hamburger-menu" src="images/hamburger-menu.svg" alt="">
<img class="youtube-logo" src="images/youtube-logo.svg" alt="">
</div>
<div class="middle-section">
<input type="text" placeholder="Search">
<button class="search-button">
<img class="search-icon" src="images/search.svg" alt="">
</button>
<button class="voice-search-button" >
<img class="voice-search-icon" src="images/voice-search-icon.svg" alt="">
</button>
</div>
<div class="right-section">
<button class="upload-button"><img class="upload-icon" src="images/upload.svg" alt=""></button>
<button class="apps-button"><img class="apps-icon" src="images/youtube-apps.svg" alt=""></button>
<button class="notifications-button"><img class="notifications-icon" src="images/notifications.svg" alt=""></button>
</div>
</div>
</body>
</html>
*{
margin-top: 0;
margin-bottom: 0;
}
.header{
display: flex;
align-items: center;
height: 70px;
justify-content: space-between;
}
.hamburger-menu{
height: 25px;
margin-left: 20px;
margin-right: 20px;
}
.left-section{
display: flex;
align-items: center;
margin-right:70px;
}
.youtube-logo{
height: 25px;
}
.middle-section{
display: flex;
align-items: center;
margin-right: 40px;
flex: 1;
max-width: 500px;
}
input{
height: 32px;
font-size: 17px;
text-indent: 5px;
max-width: 500px;
flex-shrink: 0;
}
input::placeholder{
font-family: Arial, Helvetica, sans-serif;
}
.search-button{
margin-left:-2px;
height: 38px;
width: 60px;
margin-right: 8px;
border: 1px solid gray;
border-radius: 0px;
}
.search-icon{
height: 28px;
}
.voice-search-button{
height: 38px;
border-radius: 50px;
border: none;
}
.voice-search-icon{
height: 24px;
}
.right-section{
width: 180px;
display: flex;
margin-right: 20px;
justify-content: space-between;
flex-shrink: 0;
}
.upload-button, .apps-button, .notifications-button{
height: 40px;
width: 40px;
background: none;
border: none;
}
Простой
