google search clone by @FrancescoCeliento - Codewith.it

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

References

<h3>Titolo di intestazione di terzo livello
<li>Inserisce voci all'interno di una lista
<tr>Definisce le righe di una tabella (rows)
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
getDefinisce un metodo di invio di dati al server

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

DEMO: Hi-Lo Game

Tabella Landing page

prova museo (2)

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