<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
p{
font-size:25px;
}
body {
font-family:sans-serif;
}
/* Style the header */
.header {
background-color: blue;
color:white;
padding: 30px;
text-align: center;
font-size: 35px;
margin:5px;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 32.33%;
padding: 10px;
height: 250px; /* Should be removed. Only for demonstration */
margin:5px;
}
/* Clear floats after the columns */
.section:after {
content: "";
display: table;
clear: both;
}
/* Style of the footer */
.footer {
background-color: red;
padding: 10px;
text-align: center;
font-size:70px;
}
/* Responsive layout */
@media (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2 style="text-align:center;">CSS Template using Float</h2>
<div class="header">
<h2>Header</h2>
</div>
<div class="section">
<div class="column" style="background-color:red;">
<p>My name is muhammad Yousaf. and I am web developer
I will create any kind of website according the client requirements.
If you are interested kindly contact me through this number #0344-6444583.</p>
</div>
<div class="column" style="background-color:green;"><p>My name is muhammad Yousaf. and I am web developer
I will create any kind of website according the client requirements.
If you are interested kindly contact me through this number #0344-6444583.</p></div>
<div class="column" style="background-color:blue;"><p>My name is muhammad Yousaf. and I am web developer
I will create any kind of website according the client requirements.
If you are interested kindly contact me through this number #0344-6444583.</p></div>
</div>
<div class="footer">
<h1>Footer</h1>
</div>
</body>
</html>
0 Comments