html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
</head>
<body>
<header>
<span>
<a href="#" class="header-item-left">Google 정보</a>
<a href="#" class="header-item-left">스토어</a>
</span>
<span class="header-nav">
<a href="#" class="header-item-right">Gmail</a>
<a href="#" class="header-item-right">이미지</a>
<i class="fas fa-th header-img1"></i>
<img class="header-img2" src="https://lh3.googleusercontent.com/ogw/ADea4I7Dcu0bkj-LqDNTIn2L2NA5fRNHilIVRU_I12-g=s64-c-mo">
</span>
</header>
<section class="main">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width=272>
<div class="input-area">
<i class="fas fa-search search-icon"></i>
<input type="text" class="input-box">
<i class="fas fa-keyboard keybord-icon"></i>
<i class="fas fa-microphone mic-icon"></i>
</div>
<div class="button-area">
<button class="button-style">Google 검색</button>
<button class="button-style">I'm Feeling Lucky</button>
</div>
</section>
<footer class="footer-main">
<div class="footer-first">
대한민국
</div>
<div class="footer-second">
<span>
<a href="#" class="footer-second-left-item">광고</a>
<a href="#" class="footer-second-left-item">비즈니스</a>
<a href="#" class="footer-second-left-item">검색의 원리</a>
</span>
<span class="footer-second-right">
<a href="#" class="footer-second-right-item">개인정보처리방침</a>
<a href="#" class="footer-second-right-item">약관</a>
<a href="#" class="footer-second-right-item">설정</a>
</span>
</div>
</footer>
</body>
</html>
css
.header-nav{
float: right;
}
.header-item-left{
text-decoration: none;
color: rgba(0,0,0,0.87);
margin-left: 15px;
position: relative;
top: 20px;
}
.header-item-right{
text-decoration: none;
color: rgba(0,0,0,0.87);
margin-right: 15px;
}
.header-img1{
}
.header-img1:hover{
color: #5f6368;
opacity: 1;
}
.header-img2{
border-radius: 50%;
position: relative;
top: 10px;
margin-left: 15px;
height: 32px;
width: 32px;
background-size: 32px 32px;
}
.header-img2:hover{
box-shadow: 0 1px 0 rgb(0 0 0 / 15%);
}
.header-item-left:hover{
text-decoration: underline;
}
.header-item-right:hover{
text-decoration: underline;
}
.main{
margin-top:200px;
text-align: center;
}
.input-area{
margin-top: 20px;
}
.input-box{
width: 584px;
height: 46px;
border-radius: 24px;
border: 1px solid #dfe1e5;
padding-left: 50px;
padding-right: 66px;
}
.search-icon{
position: relative;
left: 40px;
color: #9aa0a6;
}
.keybord-icon{
position: relative;
right: 70px;
color: #9aa0a6;
}
.mic-icon{
position: relative;
right: 60px;
color: #9aa0a6;
}
.button-area{
padding-top: 18px;
}
.button-style{
height: 36px;
ackground-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: Apple SD Gothic Neo,arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
min-width: 54px;
text-align: center;
}
.button-style:hover{
ox-shadow: 0 1px 1px rgb(0 0 0 / 10%);
background-color: #f8f9fa;
border: 1px solid #dadce0;
color: #202124;
}
.footer-main{
position: absolute;
bottom: 0px;
background: #f2f2f2;
width: 100%;
left: 0px
}
.footer-first{
padding: 15px 30px;
border-bottom: 1px solid #dadce0;
font-size: 15px;
color: #70757a;
}
.footer-second{
padding: 15px 30px;
}
.footer-second-right{
float: right;
}
.footer-second-left-item{
text-decoration: none;
color: #70757a;
font-size: 14px;
margin-left: 5px;
}
.footer-second-left-item:hover{
text-decoration: underline;
}
.footer-second-right-item{
text-decoration: none;
color: #70757a;
font-size: 14px;
margin-right: 5px;
}
.footer-second-right-item:hover{
text-decoration: underline;
}