Skip to content

Instantly share code, notes, and snippets.

@aishaon

aishaon/index.html

Created January 15, 2020 19:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aishaon/847b6635ae16992aa4c82c6c9ec410a7 to your computer and use it in GitHub Desktop.
Save aishaon/847b6635ae16992aa4c82c6c9ec410a7 to your computer and use it in GitHub Desktop.
Download ZIP
A simple layout for class
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div class="rs-container">
<header>
<h1>Website Fixed Layout</h1>
</header>
<section>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo eos enim eum vel perferendis temporibus Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ducimus dolor maxime velit aut, modi..</p>
</div>
<div class="content">
<h2>Contents</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint debitis eaque, quasi adipisci blanditiis consectetur eum vitae fugit aliquam illum harum. Fuga similique dignissimos quam magni sit, laudantium, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum atque et quibusdam, dolorem eum architecto mollitia cum facilis dolorum, ab natus quidem deleniti, iure. Fugiat cumque ex atque itaque sequi, ducimus nostrum libero earum aliquam molestiae, explicabo iure fugit excepturi corrupti sunt qui. Blanditiis sed recusandae placeat! Cupiditate, tempore, quibusdam. possimus facilis?</p>
</div>
</section>
<footer>
<p>&copy; Copyright 2020</p>
</footer>
</div>
</body>
</html>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
*{
margin: 0px;
padding: 0px;
font-size: 100%;
}
body{
font-family: "Ubuntu", sans-serif;
}
.rs-container {
width: 390px;
margin: 20px auto 0px;
border: 1px solid #333;
padding: 5px;
}
header, footer{
height: 50px;
background: green;
}
header h1{
text-align: center;
font-size: 20px;
color: #fff;
line-height: 45px;
}
footer{
height: 35px;
}
footer p{
text-align: center;
color: #fff;
line-height: 30px;
}
section{
overflow: hidden;
padding: 10px 0px;
}
section h2{
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #333;
display: inline-block;
}
section p{
line-height: 25px;
font-size: 14px;
}
.sidebar {
width: 120px;
float: left;
}
.content {
width: 261px;
float: left;
margin-left: 4px;
padding-left: 4px;
border-left: 1px solid #ddd;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment