Сделаем простую копию поля ввода Google.
За одно рассмотрим один из способов добавления иконок полям.
Используй внутренние стили.
Сразу после элемента div.header
добавь тег form
.
Внутри форму должен быть один элемент - тег div
с классом input-wrapper
.
Внутри .input-wrapper
сначала надо добавить картинку лупы (search.png
).
Затем будет идти непосредственно поле ввода.
После поля ввода должна быть картинка микрофона (microphone.svg
).
Сразу добавим стили для картинок - максимальная ширина и высота каждой должны быть 24px
.
Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.
index.html
<!DOCTYPE html>
<html>
<head>
<title>My google input</title>
<style>
@font-face {
font-family: OpenSans;
font-weight: 600;
font-style: italic;
src: url("fonts/OpenSans-SemiBold.ttf") format('truetype');
}
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
padding-top: 60px;
box-sizing: border-box;
}
.header {
font-family: OpenSans, serif;
font-size: 5rem;
letter-spacing: -10px;
margin-bottom: 25px;
}
.word-end {
margin-right: 16px;
}
.blue {
color: #4284F3;
}
.red {
color: #EA4435;
}
.yellow {
color: #FBBD03;
}
.green {
color: #33A852;
}
.not-colored {
color: #0B3954;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span class="not-colored">M</span>
<span class="not-colored word-end">y</span>
<span class="blue">G</span>
<span class="red">o</span>
<span class="yellow">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red word-end">e</span>
<span class="not-colored">I</span>
<span class="not-colored">n</span>
<span class="not-colored">p</span>
<span class="not-colored">u</span>
<span class="not-colored">t</span>
</div>
</div>
</body>
</html>