My Own 3-col CSS

Developer
Vanessa Vevoda
Size
4,573 Kb
Views
32,384
  1. My Own 3-col CSS Previews
  2. My Own 3-col CSS HTML Codes
  3. My Own 3-col CSS CSS Codes

How do I make an my own 3-col css?

What is a my own 3-col css? How do you make a my own 3-col css? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

My Own 3-col CSS Previews
IQ Test

My Own 3-col CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>My Own 3-col CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<!-- only use IDs b/c Wordpress template :-/ -->	<header id="ahhh--hero--fund">	<h1>Fundraise with Samaritan's Purse</h1>	<p>Giving to Samaritan's Purse has never been so fun! Check out these exciting ways to partner with our ministry. Then get started by creating your personal First Giving page.</p>
<nav id="sidebar--fund"> <h4>Classy Pages:</h4>	<div id="sidebar--fund__category">	<a href="#">Athletic Events</a>	</div>	<div id="sidebar--fund__category">	<a href="#">Holidays/Special Occasions</a>	</div>	<div id="sidebar--fund__category">	<a href="#">Outside of the Box</a>	</div>	</nav>	</header>	</div> <div class="clr"></div>	<div id="ahhh-container"> <section id="ahhh-left-box"> <div id="container__box-image"></div> <h4>Athletic Events</h4> <p>Team Samaritan's Purse lets you raise money for participat ing in your favorite athletic event.</p> <div id="container__box--center"> <div id="cta-btn"> <a id="cta-btn--1" href="#">FirstGiving</a> <a id="cta-btn--1" href="#">Learn More</a> </div> </div> </section> <section id="ahhh-middle-box"> <div id="container__box-image"></div> <h4>Holiday and Occasions</h4> <p>Team Samaritan's Purse lets you raise money for participat ing in your favorite athletic event.</p> <div id="container__box--center"> <div id="cta-btn"> <a id="cta-btn--1" href="#">FirstGiving</a> <a id="cta-btn--1" href="#">Learn More</a> </div> </div> </section> <section id="ahhh-right-box"> <div id="container__box-image"></div> <h4>One Off's</h4> <p>Team Samaritan's Purse lets you raise money for participat ing in your favorite athletic event.</p> <div id="container__box--center"> <div id="cta-btn"> <a id="cta-btn--1" href="#">FirstGiving</a> <a id="cta-btn--1" href="#">Learn More</a> </div> </div> </section>	</div>	<div class="clear"></div>	<!-- only use IDs b/c Wordpress template VERSION TWOOOOOO :-/ -->	<div id="ahhh-container--2"> <section id="ahhh-left-box--2" class="ahhh-bkg-img"> <h4>Athletic Events</h4> <div id="container__box-image--2"></div> <p>Run, bike, swim! Your next competitive event can raise support for the project closest to your heart.</p> <div id="container__box--center--2"> <div id="cta-btn--2"> <a id="cta-btn--2--inside" href="#">Join The Team</a> <a id="cta-btn--2--inside" href="#">Get Started</a> </div> </div> </section> <section id="ahhh-middle-box--2" class="ahhh-bkg-img"> <h4>Holiday/Special Occasions</h4> <div id="container__box-image--2"></div> <p>Tired of traditional presents? Liven up your celebrations by giving them a cause!</p> <div id="container__box--center--2"> <div id="cta-btn--2"> <a id="cta-btn--2--inside" href="#">Learn How</a> <a id="cta-btn--2--inside" href="#">Get Started</a> </div> </div> </section> <section id="ahhh-right-box--2" class="ahhh-bkg-img"> <h4>Out of the Box</h4> <div id="container__box-image--2"></div> <p>Everyone has a special talent. Use yours to make an impact around the world.</p> <div id="container__box--center--2"> <div id="cta-btn--2"> <a id="cta-btn--2--inside" href="#">Find Out More</a> <a id="cta-btn--2--inside" href="#">Get Started</a> </div> </div> </section>	</div>
</body>
</html>

My Own 3-col CSS - Script Codes CSS Codes

/* /////// ALL CONTAINERS /////// */	@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);	#ahhh--hero--fund, #ahhh-container {	width:95%;	height: 450px;	margin: 0.625em auto;	padding: 10px;	border: 1px solid #ccc;	background-color: #eee;	font-family: 'Open Sans', sans-serif;	font: 100%;	text-align: center;	}	.clear{	clear: both;	}
footer {	padding: 0 15px;
}
nav h4 {color: #fff; line-height: 20px; display: block; font-weight: 300; text-align:center; margin:0 auto;}
header nav#sidebar--fund { width: 28%; max-width: 350px; min-height: 30px;	float: right;	text-align: left;
}
header nav#sidebar--fund a {	margin: 20px 0 0 20px;	line-height: 50px;	text-decoration: none;	color: #003a6e;
}
header nav #sidebar--fund__category {	width:95%;	background-color: #ebebeb;	border: 1px solid #cbcbcb;	float: left;	margin: 8px 0 0 10px;	padding: 0;	color: #003a6e;
} header#ahhh--hero--fund, #ahhh-container::after {cotent:" "; display:table}	#ahhh-left-box, #ahhh-middle-box, #ahhh-right-box {	text-align: left;	padding: 10px;	width: 30%;	height: auto;	}	#ahhh-left-box {	float: left;	border: 1px solid #bbb;	margin: 4px 4px 4px 2%;	}	#ahhh-middle-box, #ahhh-right-box {	float: left;	border: 1px solid #bbb;	margin: 4px;	}	/* /////// TEXT /////// */	#ahhh-left-box h4, #ahhh-middle-box h4, #ahhh-right-box h4 {	font-weight: 300;	font-size: 1.25em;	color: #003a6e;	text-align: center;	}	#ahhh-left-box p, #ahhh-middle-box p, #ahhh-right-box p {	padding: 18px 5px;	margin: 0 5px;	}	/* /////// VIDEO /////// */	#container__box-image { background-color: #cdcdcd; border: 1px solid #bbb; width: 80%; height: 160px; margin: 10px auto; padding: 0; text-align: center;	}	/* /////// BUTTONS /////// */ #container__box--center { margin: 3% auto; text-align: center; } #cta-btn {	min-height: 50px;	font-weight: 600;	text-transform: uppercase;	}	#cta-btn--1 {	color: #fff;	background-color: #003a6e;	font-size: .825em;	text-decoration: none;	text-align: center;	letter-spacing: 1px;	padding: 15px 25px;	margin: 10px;	position: relative;	transition: top 2s linear;	-webkit-transition: top 2s linear;	-moz-transition: top 2s linear;	-ms-transition: top 2s linear;	-o-transition: top 2s linear;	box-shadow: inset 0px 1px 0px #000, 0px 1px 2px rgba(0,0,0,0.6);	-webkit-box-shadow: inset 0px 1px 0px #000, 0px 1px 2px rgba(0,0,0,0.6);	-moz-box-shadow: inset 0px 1px 0px #000, 00px 1px 2px rgba(0,0,0,0.6);	}	#cta-btn--1:active {	background-color: #002444;	top: 4px;	box-shadow: inset 2px 2px 0px #000, 0px 2px 3px 1px #aaa;	-webkit-box-shadow: inset 2px 2px 0px #000, 0px 2px 3px 1px #aaa;	-moz-box-shadow: inset 2px 2px 0px #000, 0px 2px 3px 1px #aaa;	}	/* ////// break 1092-1175px-00em ////// */	@media screen and (min-width:1000px) and (max-width:1300px) { #ahhh-container { width: 97%; height: auto; padding-left: 0; } #ahhh-left-box, #ahhh-middle-box, #ahhh-right-box { width: 30%; padding: 0; display: inline-block; float: none; } #ahhh-left-box { margin: 4px 5px; } #ahhh-right-box { margin: 4px 7px; } #cta-btn a { width: 70%; padding: 18px 20px;	margin: 10px auto; display: block; }	}	/* ////// break 1120px-70em ////// */	@media screen and (max-width: 70em) { #ahhh-container { width:100%; height: 100%; padding: 0; margin: 10px 0px 10px 0px; border: 1px solid red; } #ahhh-left-box, #ahhh-middle-box, #ahhh-right-box { width:95%; height: auto; float:none; clear:both; margin: 10px auto; padding: 0 0 20px 0; } #cta-btn a { display: block; margin: 10px auto; width: 70%; }	}	/* ////// break 896px-56em ////// */	@media screen and (max-width: 56em) { #ahhh-container { width:100%; height: 100%; display: table; clear: both; padding: 0; margin: 10px 0px 10px 0px; } #ahhh-left-box, #ahhh-middle-box, #ahhh-right-box { width:95%; height: auto; float: none; margin: 0 auto; padding: 0 0 20px 0; }	}	/*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|	|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|	|* //////|*|*|*|*|*|*|*|*|*|* VERSION TWO *|*|*|*|*|*|*|*|*|*|////// *|	|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|	|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*|*/	#ahhh-container--2 {	width:95%;	height: 550px;	margin: 0.625em auto;	padding: 10px;	border: 1px solid #ccc;	background-color: rgba(38, 65, 153, 0.1);	font-family: 'Open Sans', sans-serif;	font: 100%;	text-align: center;	} .ahhh-bkg-img { background-image: url('http://www.vanessavevoda.com/spexercises/1168SD-C-053_med_bkg_img.jpg');	background-position: 0% 20%; /*opacity: 0.4; filter: alpha(opacity=60); /* For IE8 and earlier * */ }	#ahhh-left-box--2, #ahhh-middle-box--2, #ahhh-right-box--2 {	text-align: left;	padding: 10px;	width: 30%;	height: 525px;	}	#ahhh-left-box--2 {	float: left;	border: 1px solid #bbb;	margin: 4px 4px 4px 2%;	}	#ahhh-middle-box--2, #ahhh-right-box--2 {	float: left;	border: 1px solid #bbb;	margin: 4px;	}	/* /////// TEXT /////// */	#ahhh-left-box--2 h4, #ahhh-middle-box--2 h4, #ahhh-right-box--2 h4 {	font-weight: 300;	font-size: 1.625em; letter-spacing: 2px;	color: #fff; /*#003a6e*/	text-align: center; text-transform: uppercase; margin: 15px auto;	}	#ahhh--hero--fund p, #ahhh-left-box--2 p, #ahhh-middle-box--2 p, #ahhh-right-box--2 p { font-size: 1.125em; padding: 18px 0;	margin: 0 8px; min-height: 100px; text-align: center; color: #fff;	} #ahhh--hero--fund p { margin: 0 15px; }	/* /////// VIDEO /////// */	#container__box-image--2 { background-color: #cdcdcd; border: 1px solid #bbb; width: 80%; height: 160px; margin: 10px auto; margin-bottom: 20px; padding: 0 0 0 0; text-align: center; box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.2);	-webkit-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.2);	-moz-box-shadow: 2px 2px 8px 0px rgba(0,0,0,0.2);	}	/* /////// BUTTONS /////// */ #container__box--center--2 { margin: 3% auto; text-align: center; } #cta-btn--2 {	min-height: 50px;	font-weight: 600;	text-transform: uppercase;	}	#cta-btn--2--inside {	color: #fff;	background-color: rgba(0, 58, 110, 0.6);	font-size: .825em;	text-decoration: none;	text-align: center;	letter-spacing: 1px;	padding: 15px 25px;	margin: 10px; border: 3px solid #fff;	position: relative;	transition: top 2s linear;	-webkit-transition: top .2s linear;	-moz-transition: top .2s linear;	-ms-transition: top .2s linear;	-o-transition: top .2s linear;	box-shadow: inset 0px 1px 0px #000, 0px 1px 2px rgba(0,0,0,0.6);	-webkit-box-shadow: inset 1px 1px 0px #000, 0px 1px 2px rgba(0,0,0,0.6);	-moz-box-shadow: inset 0px 1px 0px #000, 00px 1px 2px rgba(0,0,0,0.6);	}	#cta-btn--2--inside:active {	background-color: rgba(0, 58, 110, 0.8);	top: 4px;	box-shadow: inset 2px 2px 0px #000, 0px 2px 3px 1px rgba(0,0,0,0.6);;	-webkit-box-shadow: inset 2px 2px 0px #000, 0px 2px 3px 1px rgba(0,0,0,0.6);;	-moz-box-shadow: inset 2px 2px 0px #000, 0px 2px 3px 1px rgba(0,0,0,0.6);;	}	@media screen and (max-width: 91em) { #ahhh-left-box--2 h4, #ahhh-middle-box--2 h4, #ahhh-right-box--2 h4 { font-size: 1.325em; height: 30px; letter-spacing: 1px; }	}	/* ////// break 1092-1175px-00em ////// */	@media screen and (min-width:1000px) and (max-width:1350px) { #ahhh-container--2 { width: 97%; background-image: url('http://www.vanessavevoda.com/spexercises/1168SD-C-053_med_bkg_img.jpg'); background-position: 0% 0%; height: auto; padding-left: 0; } #ahhh-left-box--2, #ahhh-middle-box--2, #ahhh-right-box--2 { width: 30%; padding: 0; display: inline-block; float: none; } #ahhh-left-box--2 { margin: 4px 5px; } #ahhh-right-box--2 { margin: 4px 7px; } #cta-btn--2 a { width: 70%; padding: 18px 20px; margin: 10px auto; display: block; }	}	/* ////// break 1120px-70em ////// */	@media screen and (max-width: 70em) { #ahhh-container--2 { width:100%; height: 100%; padding: 0; margin: 10px 0px 10px 0px; border: 1px solid red; } #ahhh-left-box--2, #ahhh-middle-box--2, #ahhh-right-box--2 { width:95%; height: auto; float: none; clear: both; margin: 10px auto; padding: 0 0 20px 0; } #cta-btn--2 a { display: block; margin: 10px auto; width: 70%; }	}	/* ////// break 896px-56em ////// */	@media screen and (max-width: 56em) { #ahhh-container--2 {	background-image: url('http://www.vanessavevoda.com/spexercises/1168SD-C-053_sm_bkg_img.jpg');	background-position: 45% 75%; width:100%; height: 100%; display: table; clear: both; padding: 0; margin: 10px 0px 10px 0px; } #ahhh-left-box--2, #ahhh-middle-box--2, #ahhh-right-box--2 { width:95%; height: auto; float: none; margin: 0 auto; padding: 0 0 20px 0; }	}
#ahhh--hero--fund { background-image:; background-color: #003;
}
#ahhh--hero--fund h1 { font-weight: 300;	font-size: 3em; letter-spacing: 2px;	color: #003a6e; text-transform: uppercase; margin: 15px auto; }
/* STRUCTURE */
/*OVERRIDES*/
body.single-post .entry-content p, body.single-post .entry-content ul { padding-left: 0px;
}
body.single-post .entry-content h1 { text-transform: capitalize;
}
/*OVERRIDES END*/
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* 53.25*/
@media screen and (min-width: 48em) {	header#ahhh--hero--fund { position: relative; }	header#ahhh--hero--fund nav#sidebar--fund { min-width: 300px; float: right; margin: 10px auto; position: absolute; bottom: 0;	}
}
/* for 700px or less */
@media (max-width: 48em) { header#ahhh--hero--fund, #ahhh-container { position: relative; height: 100%; padding:0 0 3% 0; } header nav#sidebar--fund { width: 95%; min-height: 30px; float: none; text-align: left; color: red; padding:0; margin:10px auto;	}
}
header, #left, #middle, #right {	margin-bottom: 25px;
} header, #left, #middle, #right, footer {	border: solid 1px #ccc;
}
.clr { clear: both;
}
script[src^="//player.ooyala"] { border: 1px dashed gray;
}
My Own 3-col CSS - Script Codes
My Own 3-col CSS - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 4,573 Kb
Views 32,384
Do you need developer help for My Own 3-col CSS?

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!

Vanessa Vevoda (vanessav) Script Codes
Name
EDM Page
Year-Round Packing Ideas
Fundraising Concept
Fundraising Campaign Profiles w FlexBox
A Pen by Vanessa Vevoda
9901 2016 Nov NCW Starts Now
Short-Term Volunteer Page P1
Fundraising Category Onboard Rebuild w FlexBox
Fundraising FlexBox-Athletic Events
V1 Fundraising Category Wires
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!