HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Microsoft logo using HTML and CSS</title> </head> <body> <div class="microsoft"> <div class="micro-red"></div> <div class="micro-green"></div> <div class="micro-blue"></div> <div class="micro-yellow"></div> </div> </body> </html>
CSS
body { min-height: 100vh; display: grid; place-items: center; background: #000; } .microsoft { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .microsoft > * { width: 50px; height: 50px; } .micro-red{ background: #f44336; } .micro-green{ background: #4caf50; } .micro-blue{ background: #2196f3; } .micro-yellow{ background: #ffc107; }
JS
Microsoft logo using HTML and CSS