<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib1e" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> < link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="clearfix"> <div class="column menu"> <ul> <li>The Flight</li> <li>The city</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="column content" > <h1>The city</h1> <p>china ,ndfldjgjlgjvklfdsjvkljdaklgvfdkljvklfdajgklvjdlgvjgfdlkjg</p> </div> </div> <div class="Footer"> <p>Footer Text</p> </div> </body> </html> file style.css *{ box-sizing: border-box; } .header, .Footer { background-color: gray; color:snow; padding: 15px; } .column{ float:left; padding:15px; } .clearfix::after{ content: ""; clear: both; display: tablel; } .menu{ width :25%; } .content{ width :75%; } .menu ul{ List-style-type:none; margin: 0; padding: 0; } .menu li{ padding: 8px; margin-bottom: 8px; background-color:#33b5e5; color:#ffffff; } .menu li:hover{ background-color: turquoise; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter