Let’s make a simple copy of the Google input field.
Let’s take a look at one of the ways to add icons to fields.
Use internal styles.
Immediately after the div.header element, add the form tag.
There must be one element inside the form - the div tag with the input-wrapper class.
Inside the .input-wrapper, you first need to add a magnifying glass picture (search.png).
Then the input field will go directly.
There should be a microphone picture (microphone.svg) after the input field.
Let’s add the styles for the pictures right away - the maximum width and height of each one should be 24px.
This task is part of the Full-Stack JavaScript Course.
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.
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>