The Microsoft logo, characterized by four distinct colored squares arranged in a 2x2 pattern, is easily recognizable across the globe. In this article, we'll walk you through how to reproduce this logo for learning purposes, using the HTML and CSS code provided.
1. HTML Structure
The HTML structure for our logo is straightforward. The outer container div, classed as .main, holds four inner divs, each representing a colored square. Here's a brief breakdown:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"></head><body><div class="main"><div class="box box1" ></div><div class="box box2" ></div><div class="box box3" ></div><div class="box box4" ></div></div></body></html>
Each inner div has two classes:
boxwhich applies general styling shared by all squares.box1,box2,box3, orbox4which provides the individual colors for each square.
2. CSS Styling
The styling component begins with a universal reset to ensure consistent appearance across browsers:
*{margin: 0;padding: 0;box-sizing: border-box;}body{width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;}.main{width: 400px;height: 360px;display: flex;flex-wrap: wrap;gap: 10px;}.box{width: 180px;height: 180px;background-color: aquamarine;}.box1{background-color:#F25022;}.box2{background-color:#7FBA00;}.box3{background-color:#00A4EF;}.box4{background-color:#FFB900;}
The body styling ensures the logo is centered both horizontally and vertically:
The .main container holds the colored squares. It's styled to have a width of 400px and height of 360px. The flex-wrap property ensures the boxes wrap after the second box, thus creating two rows:
The shared styling for all squares is defined under .box. Each square is 180x180px:
Finally, the individual colors for each square:
These colors correspond to the standard colors in the Microsoft logo.
3. Result
Upon implementing the above HTML and CSS, the result is a faithful reproduction of the Microsoft logo centered on the screen. The four colored squares are positioned in a 2x2 pattern with a slight gap between them, mimicking the appearance of the official logo.