google search clone by @FrancescoCeliento - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<canvas>Tag per disegnare grafica dinamica su pagine web.
<nav>Definisce un menu di navigazione
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<br>Inserisce uno spazio vuoto tra due elementi HTML.
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

CheatBlox | PayBack HUB

Page not found - Codewith.it

extract_filename_from_url

Lola Harrel Project 3

Il mio primo file HTML

attività della settimana primo te

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ethirch - Ethical Research</title>
  </head>
  <body>
	<section>
    	<header>
      		<ul>
            	<li><a href="#">What is Ethical research</a></li>
              	<li><a href="#">Privacy Policy</a></li>
              	<li><a href="#">Blog</a></li>
          	</ul>
      	</header>
      <div class="main">
        <img src="https://upload.wikimedia.org/wikipedia/commons/9/98/Google_Logo_Old.PNG">
        <div class="searchBox">
          <input type="text" class="search">
          <div class="icons">
            <div>
              <img src="https://icons.iconarchive.com/icons/ampeross/qetto-2/24/search-icon.png">
            </div> 
          </div>
        </div>
        <div class="buttons">
        	<button>Search</button>
        </div>
      </div>
      <div class="footer">
        <div class="row row2">
          <ul>
            <li><a href="#">Gitea</a></li>
          	<li><a href="#">Mastodon</a></li>
          	<li><a href="#">Liberapay</a></li>
          	<li><a href="#">Dummy-X</a></li>
          </ul>
        </div>
      </div>
    </section>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'arial', sans-serif;
}

section {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

section header {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

section header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

section header ul li {
  list-style: none;
  margin-left: 20px;
  
}

section header ul li a {
  color: #111;
  text-decoration: none;
  font-size: 13px;
}

section .main {
  width: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
}

section .main .searchBox {
  position: relative;
  width: 100%;
  margin-top: 20px;
}

section .main .searchBox .search {
  width: 100%;
  padding: 13px;
  padding-left: 45px;
  padding-right: 60px;
  border-radius: 30px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 16px; 
}

section .main .searchBox .icons {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  padding: 12px 20px;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

section .main .buttons {
    margin-top: 20px;
  	align-items: center;
}

section .main .buttons button {
  margin: 0 5px;
  padding: 12px 20px;
  color: #555;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid transparent;
  outline: none;
}

section .main .buttons button:hover {
  border: 1px solid #ccc;
}

section .footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #f2f2f2;
}

section .footer .row {
  padding: 15px 25px;
  border-top: 1px solid rgba(0,0,0,0.05);
  
}

section .footer .row {
  padding: 15px 25px;
  border-top: 1px solid rgba(0,0,0,0.05);
}

section .footer .row.row2 {
  display: flex;
  justify-content: space-between;
  
}

section .footer .row.row2 ul {
  display: flex; 
}

section .footer .row.row2 ul li {
  list-style: none;
}

section .footer .row.row2 ul li a {
  text-decoration: none;
  font-size: 14px;
  color: #5f6368;
  margin-right: 25px;
}

section .footer .row.row2 ul:nth-child(2) li a {
  text-decoration: none;
  font-size: 14px;
  color: #5f6368;
  margin-right: 0px;
  margin-left: 25px;
}