Video Tutorial

index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web design from Scratch|Tutorials</title> <meta name="Description" CONTENT="Learn to design websites with video tutorials"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="css/body.css"> </head> <body> <div class="header"> <h1>This is the Header</h1> <h2>This is a sub heading</h2> </div> <div class="row"> <div class="coloumnA"><h1>First coloumn</h1></div> <div class="coloumnB"><h1>Second coloumn</h1></div> <div class="coloumnC"><h1>Third coloumn</h1></div> </div> <div class="footer"> <h1>This is the footer</h1> </div> </body> </html>

body.css

body{background:yellow;margin:0;} *{box-sizing:border-box;} .header{ background-color:#6772C2; text-align:center; padding:50px; } .coloumnA{ Background-color:#ccc; color:blue; width:40%; height:550px; float:left; padding:20px; border:1px solid #000; } .coloumnB{ Background-color:#ccc; color:blue; width:30%; height:550px; float:left; padding:20px; border:1px solid #000; } .coloumnC{ Background-color:#ccc; color:blue; width:30%; height:550px; float:left; padding:20px; border:1px solid #000; } .row:after{ content:""; display:table; clear:both; } .footer{ padding:50px; Background:brown; text-align:center; border:1px solid #000; } /*For the mobile screen*/ @media (max-width:600px){ .coloumnA{width:100%;} .coloumnB{width:100%;} .coloumnC{width:100%;} } /*for the Tablet screen*/ @media (min-width:600px) and (max-width:768px){ .coloumnA{width:25%;} .coloumnB{width:75%;} .coloumnC{width:100%;} }

Signin or Signup to post comments

Video Tutorial

index.html

body.css

Thank you for the interest.Please Close the Browser.