google search clone by @FrancescoCeliento - Codewith.it

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

References

animationDefinisce i parametri dell'animazione di un elemento o selettore
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
autofocusAttiva un elemento al caricamento della pagina.
srcIndica la provenienza di una risorsa esterna (tramite URL).
listCollega un elemento input con una lista di opzioni datalist
<q>Indica una parte di testo come citazione breve

Users

Log in to search for users

Explore

Find inspiration

esercizio 1 esame

extract_filename_from_url

console elements(2)

esercitazione 3

Our first web page!

dati dell-utente

Link sito di Jacopo Picco

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