Fundraising Landing Page w Flexbox

Developer
Vanessa Vevoda
Size
3,987 Kb
Views
26,312
  1. Fundraising Landing Page w Flexbox Previews
  2. Fundraising Landing Page w Flexbox HTML Codes
  3. Fundraising Landing Page w Flexbox CSS Codes

How do I make an fundraising landing page w flexbox?

Three column flexbox with nested flexboxes to create baselines for titles... looks like I didn't do it for the buttons though.. What is a fundraising landing page w flexbox? How do you make a fundraising landing page w flexbox? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

Fundraising Landing Page w Flexbox Previews
IQ Test

Fundraising Landing Page w Flexbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fundraising Landing Page w Flexbox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="part-2">	<h3>Fundraising with Samaritan's Purse</h3>	<p>You want to change the world. We can help. Start by creating a fundraising campaign following the seven simple steps below. Together we can reach some of the most desperate and remote places on earth in the Name of Jesus Christ.</p>	<!--<section>	<p>Share the news with your family and friends to get them excited about your project and goals. Share your fundraising link on social media and ask people to help you spread the word.</p>	<p>Below are the some resources to help you collect your funds</p>	</section>-->
</header>
<div class="container--parent">	<div class="container--child">	<div class="container--steps">	<section class="container--text athletic">	<header>	<div><h4>Athletic Events</h4></div>	</header>	<article class="container--media">	<video controls preload="auto">	<source src="athlete.mp4" type="video/mp4">	<source src="athlete.ogg" type="video/ogg">	</video>	</article>	<article><p>	Whether you run, bike, swim, or participate in other athletic activities, you can use your abilities to glorify God. As you train for your next race or competition, consider using it to raise awareness and money for Samaritan’s Purse projects.	</p></article>	<button>	<a href="https://codepen.io/vanessav/full/LpYWbj/" target="_blank">learn how &rarr;</a>	</button>	</section>	<section class="container--text holiday">	<header>	<div><h4>Holidays & Special Occasions</h4></div>	</header>	<article class="container--media">	<video controls preload="auto">	<source src="athlete.mp4" type="video/mp4">	<source src="athlete.ogg" type="video/ogg">	</video>	</article>	<article>	<p>What better way to celebrate a special occasion than by making an impact around the world in Jesus’ Name? Let your next birthday, baby shower, Christmas, and or other gathering be a way to raise awareness and funds for the work God is doing	through Samaritan’s Purse.</p>	</article>	<button>	<a href="https://codepen.io/vanessav/full/LpYWbj/" target="_blank">learn how &rarr;</a>	</button>	</section>	<section class="container--text out-of-box">	<header>	<div><h4>Out of the Box Fundraiser</h4></div>	</header>	<article class="container--media">	<video controls preload="auto">	<source src="athlete.mp4" type="video/mp4">	<source src="athlete.ogg" type="video/ogg">	</video>	</article>	<article>	<p>Want to make a worldwide impact in Jesus’ Name? You can fundraise for Samaritan’s Purse projects all year long in any way you choose. Lemonade stands, bake sales, pet sitting—whatever you can do, you can do it in the name of Jesus.</p>	</article>	<button>	<a href="https://codepen.io/vanessav/full/LpYWbj/" target="_blank">learn how &rarr;</a>	</button>	</section>	</div>	<button><a href="https://www.classy.org/charity/samaritans-purse/c21127" target="_blank">create my page now &rarr;</a></button>	</div>
</div>
</body>
</html>

Fundraising Landing Page w Flexbox - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
body {	font-family: 'Roboto', sans-serif;
}
header {	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-pack: distribute; justify-content: space-around;	-ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-line-pack: end; align-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;	margin:0 auto;	height: 150px;
}
header.part-2 {	margin: 100px auto 0;	max-width:60%;
}
h3 {	font-weight: 300;	font-size: 2.6rem;	line-height: 120%;	letter-spacing: 1px;	text-align: center;	-webkit-margin-before: 2rem; -webkit-margin-after: .5rem;	/*text-shadow: 0 2px 5px rgba(0, 0, 0, 0.30), 0 2px 15px rgba(0, 0, 0, 0.16);*/
}
h4 {	font-weight: 300;	font-size: 1.8rem;	line-height: 116%;	letter-spacing: 1px;	padding-bottom: 0%;	-webkit-margin-before: 2.6rem; -webkit-margin-after: 1.625rem;	-ms-flex-item-align: start; align-self: flex-start;	/*text-shadow: 0 2px 5px rgba(0, 0, 0, 0.30), 0 2px 15px rgba(0, 0, 0, 0.16);*/
}
article {	text-align:center;	align-item: stretch;	margin: 4% auto 8%;	font-size: .9rem;	font-weight: 300;	letter-spacing: .035rem;	line-height: 1.45435rem;
}
video {	border: 1px solid #ddd;	width:100%;	height: auto;	margin:0 auto;	padding:0;
}
button {	background-color: transparent;	border: 0; width: 98%; font-weight: 600; -webkit-transition: all .2s ease-out; transition: all .2s ease-out;	margin: 3% auto;	text-decoration: none;	text-align: center;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-wrap: wrap; flex-wrap: wrap;	-ms-flex-pack: distribute; justify-content: space-around;
}
a {	font-size: .825rem;	letter-spacing: .1rem; text-align: center;	text-transform: uppercase; text-decoration: none;	margin: 5px;	padding: 15px 25px; will-change: auto /*opacity, transform*/ ;	background-color: rgba(0,0,0,.5);	color:#fff;	border: 2px solid #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), 0 5px 15px 0 rgba(0, 0, 0, 0.16); -webkit-transition: all .4s ease-out; transition: all .4s ease-out;
}
a:hover, a:focus, a:active {	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6), 0 5px 14px 0 rgba(0, 0, 0, 0.4), 0 10px 25px 0 rgba(0, 0, 0, 0.16);	background-color: rgba(0,0,0,1);
}
.container--parent {	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-orient: vertical;	-webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	/*justify-content deals with the X-axis*/	/* values:	flex-start = align left or at the beginning,	flex-end = align right or at the end,	space-between = justifies content across width of container,	space-around =	center = centers of course */	-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;	/*align-items deals wiht the Y-axis*/	/* values:	flex-start,	flex-end,	center,	stretch = will stretch to the max height of the container,	baseline = all items will line up on the lowest baseline */	-ms-flex-line-pack: stretch; align-content: stretch; /*applies to content when it wraps */	/*value:	stretch = default; when no height is defined for child containers */
}
/* We tell all items to be 100% width */
.container--parent > * {	-webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%;
}
/* container--child has direct child properties of flexbox when container--parent is given parent properties */
/* container--steps has to then reset with parent properties */
.container--steps {	margin: 6% auto;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-wrap: wrap; flex-wrap: wrap;	-webkit-box-orient: horizontal;	-webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-line-pack: stretch; align-content: stretch;	-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;	text-align: center;	/*background: rgba(6, 140, 203, 0.4)*/
}
.container--steps:last-of-type {	-webkit-box-orient: horizontal;	-webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.athletic {background-color:#F05624}
.holiday {background-color: #0C835D}
.out-of-box {background-color: #0b5b7c}
.container--text {	width: 26%;	margin: 2% auto;	vertical-align: top;	/*background-color: rgba(0,0,0,0.3);*/	padding: 0% 3% 5%;	color: #fff;	border: 1px solid rgba(0, 0, 0, .2);
}
article p {	max-width:80%;	margin:0 auto;
}
@media screen and (max-width: 60rem) {	.container--text {	width: 60%;	}
}
@media screen and (max-width: 52rem) {	.container--text {	width: 75%;	}
}
Fundraising Landing Page w Flexbox - Script Codes
Fundraising Landing Page w Flexbox - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 3,987 Kb
Views 26,312
Do you need developer help for Fundraising Landing Page w Flexbox?

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
Volunteer Page Build V3
Fundraising FlexBox-Athletic Events
Fundraising Concept
Fundraising FlexBox-OotB
Volunteer Form
My Own 3-col CSS
Fundraising Campaign Profiles w FlexBox
Short-Term Volunteer Page P1
CSS Button with Transitions
Design System for OCC
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!