Veuillez vous connecter à votre compte.
|
| 👋 Salut les lecteurs, bienvenue sur le blog de Coding Team et aujourd'hui pour ce nouveau tutoriel nous allons recréer la page d'accueil de google en utilisant le langage HTML et CSS. Si vous êtes prêt allons y. |
Apercu du projet
Cliquer sur ce bouton pour voir le projet et de tester sa responsivité...
Code Source
Créer deux fichier un nomée index.html et l'autre style.css
Astuces
Taper deux fois sur le code pour le copier dans le presse papier
Si vous rencontrer une erreur dans le code je vous recommande de télécharger le code source qui se trouve en bas du poste
Code HTML
Ouvrez votre fichier index.html et collez y code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clone de Google</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" />
</head>
<body>
<header>
<div class="left">
<p>About</p>
<p>Store</p>
</div>
<div class="right">
<p>Gmail</p>
<p>Images</p>
<svg class="gb_6e" focusable="false" viewBox="0 0 24 24"><path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg>
<p class="user"><i class="fas fa-user-circle"></i></p>
</div>
</header>
<section class="main">
<img src="https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png" alt="">
<div class="form-group">
<input type="texte">
<label><i class="fas fa-microphone"></i></label>
</div>
<div class="buttons">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</section>
</body>
</html>
Code CSS
Ouvrez votre fichier style.css et collez y code
@import url('https://fonts.googleapis.com/css2?family=Arimo&display=swap');
body{
font-family: 'Arimo', sans-serif;
margin: 0;
padding: 0;
}
/* Partie header */
header{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin:10px 20px;
}
header .left{
display:flex;
flex-wrap:wrap;
}
header p{
margin-right: 10px;
color: #787878;
cursor:pointer;
}
header p:hover{
color: #000;
}
header .right{
display: flex;
flex-wrap:wrap;
}
header .right svg{
height: 30px;
width: 30px;
margin-top: 10px;
margin-right: 10px;
cursor:pointer;
}
header .right p.user{
font-size: 30px;
margin-top: 10px;
color: #595959;
}
/* Fin de la partie header */
/* Partie principale */
.main{
display: flex;
flex-direction: column;
align-items:center;
margin-top: 100px;
}
.main .form-group{
display: flex;
flex-direction: column;
width: 40%;
}
.main .form-group input{
margin-top: 20px;
padding:15px;
border-radius: 50px;
border:1px solid #d1d1d1;
outline:none;
width: 100%;
}
.main .form-group input:hover, .main .form-group input:focus{
-webk-webkit-box-shadow: -8px -1px 19px -8px rgba(184,184,184,1);
-moz-box-shadow: -8px -1px 19px -8px rgba(184,184,184,1);
box-shadow: -8px -1px 19px -8px rgba(184,184,184,1);
border:none;
}
.main .form-group label i{
float: right;
font-size: 20px;
margin-top: -35px;
margin-right: -15px;
position: relative;
cursor: pointer;
color: #5c5c5c;
}
.main .buttons{
margin-top: 40px;
}
.main .buttons button{
padding: 10px 20px;
background-color: #f0f0f0;
border:none;
border-radius: 5px;
margin-right: 10px;
cursor:pointer;
color: #4d4d4d;
outline:none;s
}
/* Fin de la partie principale */
Télecharger
Astuces
Une fois le code télechargée ouvrer le dossier nommée dist
Google Clone
Code
295KB
Coding Team
.zip
