8 Commits

Author SHA1 Message Date
johannes.vos b9cbdc7392 Search Button in Searchbar 2026-05-04 18:24:01 +02:00
johannes.vos 58d52f59da Make Searchbutton rounder 2026-05-04 18:17:29 +02:00
johannes.vos 8f5426d468 Make Searchbar 'rounder' 2026-05-04 18:12:22 +02:00
johannes.vos 4070a7d5ba Make header p smaller 2026-05-04 18:06:54 +02:00
johannes.vos 04b5b29cd5 Add Color Gradient to h1 2026-05-04 18:03:34 +02:00
johannes.vos 25e497ac57 Change Seekra to seekra in Footer 2026-05-04 18:00:27 +02:00
johannes.vos 691647ae63 Change Seekra to seekra 2026-05-04 17:59:02 +02:00
johannes.vos a75f6bcde6 Set Margin form Header p to Header h1 to 0 2026-05-04 17:56:58 +02:00
2 changed files with 49 additions and 10 deletions
+9 -6
View File
@@ -27,24 +27,27 @@ limitations under the License.
<nav class="global-nav"> <nav class="global-nav">
<ul> <ul>
<li class="nav-item"> <li class="nav-item">
Seekra seekra
</li> </li>
</ul> </ul>
</nav> </nav>
<header> <header>
<h1>Seekra</h1> <h1>seekra</h1>
<p> <p>
Built to search. Built to search.
</p> </p>
</header> </header>
<form> <form id="search-form">
<input type="search" name="search" placeholder="Search..." required /> <div class="search-wrapper">
<button type="submit">Search</button> <input type="search" name="search" placeholder="Search..." required />
<button type="submit">Search</button>
</div>
</form> </form>
<footer> <footer>
<p>&copy; 2026 Seekra.</p> <p>&copy; 2026 seekra.</p>
</footer> </footer>
</body> </body>
</html> </html>
+40 -4
View File
@@ -1,5 +1,6 @@
body { body {
margin: 0; margin: 0;
background-color: #ffffff;
} }
header { header {
@@ -7,7 +8,17 @@ header {
} }
header h1 { header h1 {
display: inline-block;
margin-bottom: 0; margin-bottom: 0;
background: linear-gradient(to right, #689BDB, #5F8DDC, #5077C7, #4562BE, #374FA5, #22298F);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
header p {
margin-top: 0;
font-size: small;
} }
form { form {
@@ -17,14 +28,39 @@ form {
width: 100%; width: 100%;
} }
form button{ .search-wrapper {
margin-left: 10px; display: flex;
align-items: center;
width: 80%;
border: 1.5px solid #ccc;
border-radius: 999px;
padding: 4px 4px 4px 16px;
} }
form input{ .search-wrapper input {
width: 80%; border: none;
outline: none;
width: 100%;
font-size: 1rem;
background: transparent;
} }
.search-wrapper button {
border-radius: 999px;
border: none;
padding: 8px 20px;
background: #4562BE;
color: white;
cursor: pointer;
white-space: nowrap;
}
.search-wrapper button:hover {
background: #374FA5;
}
footer{ footer{
text-align: center; text-align: center;
margin-top: 20px; margin-top: 20px;