google search clone by @FrancescoCeliento - Codewith.it

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

References

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<td>Definisce una cella di una tabella HTML.
<html>Tag primario di un documento HTML
<h6>Titolo di intestazione di sesto livello
formSpecifica a quale form appartiene un elemento.

Users

Log in to search for users

Explore

Find inspiration

Introduzione all programm

Calcolatrice Top

Lezione 4 (terza parte)

JS Esercizio Concetti Gen es3

esame noe e marti

Esercizio forse più giust

Media ponderata

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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;
}