Créer le logo Windows 10 avec HTML et CSS

par Tychic Obanda


Programmation web | 0 commentaire



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 ?


Tychic ObandaJe 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
Vous pouvez écrire en gras en utilisant * et en italique en utilisant _
147

0 commentaires

Recherche
Site hébergé chez Ikoula

Mon site est hébergé chez Ikoula. Un hebergeur web de qualité et si vous cherchez à mettre votre site en ligne, cliquez ici pour profiter de l'offre de 0,99€ par mois !

Logo hébergeur web Ikoula

Bonus Gratuit

50 conseils aux blogueurs débutants et futurs blogueurs

Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 152 articles publiés, 1087 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve certainement ici...