HTML 및 CSS에서 기능적인 Google 검색 페이지 복제본 만들기
이 페이지가 실제 페이지인지 복제 페이지인지 추측할 수 있습니까? (댓글다운🙂)
그럼 시작하겠습니다 🥳
<div class="container">
<center>
<div class="content">
<img src="assets/logo.png" alt="Google Logo" class="img-fluid google-logo">
<div class="search-bar shadow-sm mt-4">
<i class="fas fa-search icon"></i>
<input class="input" type="text"></div>
</div>
<div class="buttons"><br>
<button class="gBtn">Google Search</button>
<button class="gBtn">I'm Feeling Luck</button>
</div>
<div class="languages mt-4">
<span class="langText">Google offered in: </span>
<ul>
<li class="languagesInList"><a href="/">English</a></li>
<li class="languagesInList"><a href="/">Spanish</a></li>
<li class="languagesInList"><a href="/">French</a></li>
<li class="languagesInList"><a href="/">عربي</a></li>
</ul>
</div>
</div>
</center>
</div>
이것은 페이지의 뼈대 구조였습니다. 스타일링 할 시간입니다🏳️🌈
body{
font-family: arial,sans-serif;
}
.content{
margin-top: 150px;
}
[contenteditable] {
outline: 0px solid transparent;
}
.google-logo{
width: 270px;
}
.search-bar{
border: 1px solid #e3e3e3;
border-radius: 30px;
display: flex;
justify-content: space-between;
height: 50px;
width: 900px;
}
.icon{
position: relative;
left: 15px;
top: 15px;
color: #9aa0a6;
font-weight: 100;
font-size: 20px;
}
.input{
background-color: transparent;
border: none;
margin-top: 8px;
margin-left: 25px;
padding: 0;
color: rgba(0,0,0,.87);
word-wrap: break-word;
outline: none;
display: flex;
flex: 100%;
height: 34px;
font-size: 16px;
width: 80%;
}
/* .... */
/* Whole code at https://github.com/snowbit-coderboi/Google-Search-Page-Clone */
그리고 이것이 다입니다. Google 검색 페이지의 클론을 만들었습니다 🎉
데모 확인: https://snowbit-coderboi.github.io/Google-Search-Page-Clone
프로젝트를 방문하면 이 페이지가 업데이트될 수 있으므로 GitHub 저장소를 확인하고 별표 표시하여 저장하세요.
GitHub 저장소: snowbit-coderboi/Google-Search-Page-Clone
이것이 전부였습니다. Google Search Page Clone을 만드신 것을 다시 한 번 축하드립니다.
Reference
이 문제에 관하여(HTML 및 CSS에서 기능적인 Google 검색 페이지 복제본 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhairyashah/making-working-google-search-page-clone-in-html-and-css-287a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)