index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<!-- <a href="wecode.co.kr"> 위코드 접ㄱ</a> -->
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://kit.fontawesome.com/c491e52303.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="logo">
<img src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png" alt="Weegle">
</div>
<div class="search__box">
<input type="text" />
<i class="fas fa-search"></i>
<div class="right">
<i class="far fa-keyboard"></i>
<i class="fas fa-microphone"></i>
</div>
</div>
<div class="two__small__box">
<div class="small__box">Weegle 검색</div>
<div class="small__box">I'm feeling Lucky</div>
</div>
<footer class="info">
Weegle 제공 서비스 : <a href="#"> English
</footer>
</body>
</html>style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logo {
display: flex;
justify-content: center;
}
.search__box {
position: relative;
margin: 0 auto;
width: 800px;
}
.search__box input {
width: 100%;
border: 1px solid #bbb;
border-radius: 15px;
padding: 10px 12px;
font-size: 14px;
}
.search__box i.fa-search {
position: absolute;
font-size: 18px;
top: 10px;
left: 12px;
padding-left: 10px;
}
.search__box .right {
position: absolute;
font-size: 18px;
top: 10px;
right: 12px;
}
.search__box .right i {
display: inline-block;
padding-right: 10px;
}
.search__box .right i.fa-microphone {
color: #4f86ec;
}
.two__small__box {
display: flex;
justify-content: center;
margin-top: 19px;
height: 48px;
}
.small__box {
display: flex;
color: #939396;
background-color: #f4f4f4;
margin: 0 10px;
padding: 0 10px;
align-items: center;
border-radius: 8px;
}
footer.info {
display: flex;
justify-content: center;
margin-top: 38px;
}
footer.info a {
text-decoration: none;
}
Junior FE Developer