Skip to content

Instantly share code, notes, and snippets.

@codingwithsara

codingwithsara/index.html Secret

Created Nov 9, 2018
Embed
What would you like to do?
How to Create a Simple Website with HTML and CSS (TypeC: 3 Column Layout)
<!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