google search clone by @FrancescoCeliento - Codewith.it

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

References

colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
<table>Tag primario per la creazione di tabelle
<abbr>Inserisce abbreviazioni e acronimi
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<h4>Titolo di intestazione di quarto livello
idIdentifica univocamente un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

esercitazione 6

Esercizio (02/02/2024)

tabella attività settimana piscina

Esercitazione n. 1

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