پیشنمایش زنده
کد HTML
<div class="google-home">
<div class="google-logo">
<span class="g">G</span><span class="o1">o</span><span class="o2">o</span
><span class="g">g</span><span class="l">l</span><span class="e">e</span>
</div>
<div class="search-box">
<svg class="search-icon" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
></path>
</svg>
<input type="text" class="search-input" />
</div>
<div class="buttons">
<button class="btn">Search on Google</button>
<button class="btn">Fluke</button>
</div>
</div>
کد CSS
.google-home {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 100px;
font-family: Arial, sans-serif;
}
/* LOGO STYLIZACJA */
.google-logo {
font-size: 80px;
font-weight: bold;
margin-bottom: 20px;
letter-spacing: -2px;
}
.g {
color: #4285f4;
}
.o1 {
color: #ea4335;
}
.o2 {
color: #fbbc05;
}
.l {
color: #34a853;
}
.e {
color: #ea4335;
}
/* PASEK WYSZUKIWANIA */
.search-box {
display: flex;
align-items: center;
width: 500px;
border: 1px solid #dfe1e5;
border-radius: 24px;
padding: 10px 20px;
margin-bottom: 25px;
}
.search-box:hover {
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
border-color: transparent;
}
.search-icon {
width: 20px;
height: 20px;
fill: #9aa0a6;
margin-right: 15px;
}
.search-input {
border: none;
outline: none;
width: 100%;
font-size: 16px;
}
/* PRZYCISKI */
.buttons {
display: flex;
gap: 10px;
}
.btn {
background: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
padding: 10px 16px;
font-size: 14px;
cursor: pointer;
}
.btn:hover {
border: 1px solid #dadce0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #202124;
}