Créer le logo Windows 10 avec HTML et CSS
par Tychic Obanda
Programmation web | 3 commentaires
Besoin d'une carte Visa ? Procurez-vous la carte visa Fyatu à seulement 5$. Cliquez ici
Dans ce nouvel article, je vous monter comment coder le logo Windows 10.
J'ai dit quoi ? Coder ou créer ?
Je préfère dire coder. Okay on passe…
Nous savons tous que pour avoir un logo il faut utiliser des logiciels tels que Photoshop, Illustrator ou Canva. Mais laissez moi vous dire que c'est possible de coder un logo.
Oui c'est possible !
Plus besoin de Photoshop. Juste notre Sublime Text ou Visual Studio Code.
Eh Tychic tu parles trop là. Montres-nous les codes c'est tout.
D'accord je me tais… Mais une dernière chose : à la fin de cet article, vous pouvez me dire dans les commentaires si vous souhaitez que je fasse un article similaire pour coder d'autres logo avec HTML et CSS.
On y go.
Code HTML
<!DOCTYPE html>
<html>
<head>
<title>Logo Windows 10 avec HTML et CSS</title>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="t1"></div>
<div class="rect1"></div>
<div class="rect2"></div>
</div>
</body>
</html>
Code CSS
body {
background-color: white;
}
.container {
position: absolute;
left: calc(50% - 250px);
top: calc(50% - 150px);
width: 500px;
height: 300px;
background-color: white;
}
.t1 {
position: absolute;
left: calc(50% - 125px);
top: calc(50% - 130px);
width: 0;
height: 200px;
border-right: 250px solid #00ADEF;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
}
.rect1 {
position: absolute;
top: calc(50% - 5px);
left: calc(50% - 155px);
width: 290px;
height: 10px;
background-color: white;
}
.rect2 {
position: absolute;
top: calc(50% - 5px);
left: calc(50% - 155px);
width: 280px;
height: 10px;
background-color: white;
transform: rotate(90deg);
}
Et le résultat donne quoi ?
Vous avez tenté de reprendre les codes ci-dessus sur votre éditeur de texte ?
Qu'est-ce que ça donne comme résultat ?
Je suis Tychic Obanda. Avant j'étais un simple visiteur des sites internet et aujourd'hui je suis devenu le créateur des sites internet. Passionné de l'internet et de la programmation, je publie sur ce site des astuces et tutoriels pour vous aider de mieux apprendre la programmation web et de vivre de cette passion.
Laisser un commentaire
3 commentaires
Recherche
Bonus Gratuit
Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web