Skip to content

Instantly share code, notes, and snippets.

@codingwithsara

codingwithsara/index.html Secret

Created November 9, 2018 04:12
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 codingwithsara/47b8fef8791aa0ef601fa0c5b49305a4 to your computer and use it in GitHub Desktop.
Save codingwithsara/47b8fef8791aa0ef601fa0c5b49305a4 to your computer and use it in GitHub Desktop.
Download ZIP
How to Create a Simple Website with HTML and CSS (TypeC: 3 Column Layout)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The 3 Column Layout</title>
<link href="https://fonts.googleapis.com/css?family=Amatica+SC:400,700|Open+Sans+Condensed:300" rel="stylesheet">
<style>
body {
margin: 0;
}
h1, h2 {
font-family: 'Amatica SC', cursive;
font-weight: 700;
text-align: center;
}
p {
font-family: 'Open Sans Condensed', sans-serif;
}
.header {
background-color: skyblue;
height: 100px;
text-align: center;
color: #4f889f;
padding: 1px;
}
.container div {
padding: 1%;
box-sizing: border-box;
min-height: 500px;
}
.left-col, .right-col {
background-color: #f4f4f4;
width: 25%;
float: left;
}
.center-col {
/* background-color: pink; */
width: 50%;
float: left;
}
.footer {
clear: both;
font-family: 'Amatica SC', cursive;
background-color: skyblue;
text-align: center;
height: 50px;
padding-top: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<h2>Left</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus.
Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus.
Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc
faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa,
at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta.
Integer interdum finibus tempor.</p>
</div>
<div class="center-col">
<h2>Center</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus.
Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus.
Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc
faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa,
at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta.
Integer interdum finibus tempor.</p>
</div>
<div class="right-col">
<h2>Right</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus.
Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus.
Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc
faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa,
at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta.
Integer interdum finibus tempor.</p>
</div>
</div>
<div class="footer">
&copy; All Rights Reserved.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment