3-Col Layout Project

Developer
Spencer Stiglets
Size
2,307 Kb
Views
10,120
  1. 3-Col Layout Project Previews
  2. 3-Col Layout Project HTML Codes
  3. 3-Col Layout Project CSS Codes

How do I make an 3-col layout project?

What is a 3-col layout project? How do you make a 3-col layout project? This script and codes were developed by Spencer Stiglets on 26 November 2022, Saturday.

3-Col Layout Project Previews
IQ Test

3-Col Layout Project - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3-Col Layout Project</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>	<head>	<title></title>	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">	</head>	<body>	<header>	<p>Header: 100% x 150px</p>	</header>	<nav>	<p>Nav: 100% x 50px</p>	</nav>	<main>	<p>main: 960px x 800px, centered</p>	<div class="column one">	<p>300px x 100% tall<br> 30px right margin<br> Classes: column and one	<p>	</div><!--	--><div class="column two">	<p>300px wide x 100% tall<br> Classes: column and two	<p>	</div><!--	--><div class="column three">	<p>300px wide x 100% tall<br> 30 px left margin<br> Classes: column and three	</p>	</div>	</main>	<footer>	<p>Footer: 100% x 200px, 20px top margin</p>	<div class="container-centered">	<p>Class: container-centered<br> 960px wide, centered	</p>	</div>	</footer>	</body>
</html>
</body>
</html>

3-Col Layout Project - Script Codes CSS Codes

*{	box-sizing: border-box;	margin: 0;	padding: 0;	/*These are only for showing students the sizing, not controlling layout*/	font-size: 16px;	text-align: center;	}	html{	width: 100%;	height: 100%;	}	/* This is only for positioning the size labels, not for students*/	header, footer, nav, main, div{	position: relative;	}	p{	width: 100%;	position: absolute;	top: 50%;	transform: translateY(-50%);	line-height: 1.75em;	font-family: "Open Sans", sans-serif;	}	/******************************************************/	header p, nav p, footer p{	font-size: 2.5em;	}	header p{	color: #ffff00;	}	main p, footer p{	font-size: 1.5em;	color: #fff;	}	main > p, footer > p {	color: #ffff00;	position: absolute;	top: 0;	transform: translateY(0);	}	/***************************************************************/	header, footer {	width: 100%;	background-color: #7812aa;	border-bottom: 2px solid #333;	}	header{	height: 150px;	}	nav{	height: 50px;	/******* IGNORE - STYLING ONLY **********/	background-color: #f5f5f5;	border-bottom: 1px solid #999;	/****************************************/	}	main{	width: 960px;	height: 800px;	margin: 0 auto;	}	main, .column{	background-color: rgba(100,100,100, 0.5);	}	.column{	width: 300px;	height: 100%;	display: inline-block;	border: 1px solid #333;	vertical-align: top;	margin: 0;	}	.one{	margin-right: 30px;	}	.three{	margin-left: 30px;	}	footer{	margin-top: 20px; /*For spacing away from 
 */	height: 200px;	}	.container-centered {	width: 960px;	height: 100%;	margin: 0 auto;	color: #fff;	background-color: rgba(0, 0, 0, 0.5);	}
3-Col Layout Project - Script Codes
3-Col Layout Project - Script Codes
Home Page Home
Developer Spencer Stiglets
Username sstiglets
Uploaded November 26, 2022
Rating 3
Size 2,307 Kb
Views 10,120
Do you need developer help for 3-Col Layout Project?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Spencer Stiglets (sstiglets) Script Codes
Name
Directions.html
Responsive Design 101 - Finished
Overlay using CSS
Gallery Starter
KF-Nav
Positioning Fundamentals
CSS-Flexbox-Demo
Elixir.html
Carousel Tutorial
A Pen by Spencer Stiglets
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!