Hello wizards, Welcome to Tips and Tricks Series. Today in this blog you’ll learn simple trick to create Microsoft Logo using HTML & CSS only.
In the above video, you’ve seen the preview of the "Microsoft Logo" project and I hope now you are able to create this type of project. If not, I have provided all the HTML & CSS source code below.
SOURCE CODE
To create the Microsoft Logo. First, you need to create one file for HTML code and CSS code is internally added in HTML file. After creating the file just paste the following codes in your file. Remember, you’ve to create a file with .html extension.
You can also download source code file from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microsoft Logo</title>
<!-- Tips & Tricks ( @developer_pani) -->
<!-- Microsoft color codes -->
<!-- 1. #f34f13
2. #7fbc00
3. #ffba01
4, #01a6f0-->
<style>
body {
margin: 100px 150px;
}
.microsoftLogo {
width: 90px;
height: 90px;
background-color: #f34f13;
box-shadow: 100px 0 #7fbc00,
0 100px #01a6f0,
100px 100px #ffba01;
}
</style>
</head>
<body>
<div class="microsoftLogo">
<!-- Thanks for watching -->
</div>
</body>
</html>
Generating Download Link...