Fundraising Campaign Profiles w FlexBox

Developer
Vanessa Vevoda
Size
5,190 Kb
Views
32,384
  1. Fundraising Campaign Profiles w FlexBox Previews
  2. Fundraising Campaign Profiles w FlexBox HTML Codes
  3. Fundraising Campaign Profiles w FlexBox CSS Codes

How do I make an fundraising campaign profiles w flexbox?

What is a fundraising campaign profiles w flexbox? How do you make a fundraising campaign profiles w flexbox? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

Fundraising Campaign Profiles w FlexBox Previews
IQ Test

Fundraising Campaign Profiles w FlexBox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fundraising Campaign Profiles w FlexBox</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container--parent">	<!--<div class="container--child">	<div class="container--steps">	<section class="container--text">	<header>	<h4>	<span>Step 1</span>	<span>First, sign up for an event.</span>	</h4>	</header>	<article>	Sign up for any running, cycling, triathlon, or other athletic event. Any event of any distance at any location can count!	</article>	<button>	<a href="#">BIKE ACROSS AMERICA</a>	</button>	</section>	</div>	<div class="container--steps">	<section class="container--text">	<header>	<h4>	<span>Step 2</span>	<span>Then, choose your project</span>	</h4>	</header>	<article>	Choose a Samaritan’s Purse project or program to support. Remember: You can always give to “most needed” or purchase items from our gift catalog all year long.	</article>	<button>	<a href="#">most needed</a>	<a href="#">gift catalog</a>	</button>	</section>	</div>	<div class="container--steps">	<section class="container--text">	<header>	<h4>	<span>Step 3</span>	<span>Decide how you will collect funds</span>	</h4>	</header>	<article>	If you’re collecting funds online, set up your fundraising page.	</article>	<button>	<a href="#">go to fundraising &rarr;</a>	</button>	</section>	</div>	<div class="container--steps">	<section class="container--text">	<article>	Have fun! As you train and compete, remember to enjoy the experience and embrace the joy of the Lord.	</article>	</section>	</div>	<div class="container--steps">	<section class="container--text">	<header>	<h4>	<span>Step 4</span>	<span>Spread the Word!</span>	</h4>	</header>	<article>	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. [Below are some downloadable resources to get you started... like a solicitation	letter template and a best practices list.]	</article>	<button>	<a href="#">Resource 1</a>	<a href="#">Resource 2</a>	</button>	</section>	</div>	<div class="container--steps">	<section class="container--text">	<header>	<h4>	<span>Step 6</span>	<span>Get Inspired Today</span>	</h4>	</header>	<article>	</article>	<button>	<a href="#">Check out others' campaigns! &rarr;</a>	</button>	</section>	</div>	<div class="container--steps">	<header class="part-2">	<h3>How to Raise Your Funds</h3>	<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>	<section class="container--text">	<header>	<h4>	<span>EXAMPLE</span>	<span>Create A Page</span>	</h4>	</header>	<article>	Create your own fundraising webpage. There, you’ll be able to describe your event and goal in details. Send the link to your friends and family so that they can donate electronically.	</article>	<button>	<a href="#">create page &rarr;</a>	</button>	</section>	<section class="container--text">	<header>	<h4>	<span>EXAMPLE</span>	<span>Collect the Money</span>	</h4>	</header>	<article>	<p>Collect the money yourself, and when you’re finished, send a check to Samaritan's Purse at the following address:	<br> P.O. Box 3000	<br> Boone, NC 28607</p>	</article>	<button>	<a href="#">?</a>	<a href="#">?</a>	</button>	</section>	<section class="container--text">	<header>	<h4>	<span>EXAMPLE</span>	<span>Tell Us About Your Campaign</span>	</h4>	</header>	<article>	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.	</article>	<button>	<a href="#">facebook</a>	<a href="#">twitter</a>	</button>	</section>	</div>	</div>-->
</div>
<!-- RECENT CAMPAIGNS -->
<div class="container--bottom">
<header class="part-3">	<h3>Recent Campaigns</h3>	<section>	<p>Check out what some other people have done and be inspired below. Don't forget to come back and share yours!</p>	</section>
</header>
<div class="container--features">	<section class="container--inner athletic">	<h5 class="athletic">ATHLETIC</h5>	<article>	<img src="" />	<header>	<h4>	<span>Katie Smith</span>	</h4>	</header>	This is a short blurb about how awesome little Katie Smith used her singing talent to raise funds for a well. We can put the fundraising campaign category at the top and color code them by category. If someone wants to get ideas about fundraising done in a spec category then they can easily spot their category.	</article>	<button>	<a href="#">MORE</a>	</button>	</section>	<section class="container--inner holiday">	<article>	<h5 class="holiday">Holiday & birthday</h5>	<img src="" />	<header>	<h4>	<span>Janethine Doe</span>	</h4>	</header>	Jane was able to raise enough money to build a church in South Sudan using her birthday as a fundraising event. See how she did it!	</article>	<button>	<a href="#">MORE</a>	</button>	</section>	<section class="container--inner custom">	<article>	<h5 class="custom">HELLO</h5>	<img src="" />	<header>	<h4>	<span>Catherine Roberston</span>	</h4>	</header>	This is a short blurb about how awesome little Katie Smith used her singing talent to raise funds for SP, okay wait this is an athletic even page. Maybe we only want to feature athletic campaign profiles... up to you Chelsea. Just let me know.	</article>	<button>	<a href="#">MORE</a>	</button>	</section>	<section class="container--inner">	<article>	<img src="" />	<header>	<h4>	<span>Katie Smith</span>	</h4>	</header>	This is a short blurb about how awesome little Katie Smith used her singing talent to raise funds for SP, okay wait this is an athletic even page. Maybe we only want to feature athletic campaign profiles... up to you Chelsea. Just let me know.	</article>	<button>	<a href="#">MORE</a>	</button>	</section>	<section class="container--inner">	<article>	<img src="" />	<header>	<h4>	<span>Katie Smith</span>	</h4>	</header>	This is a short blurb about how awesome little Katie Smith used her singing talent to raise funds for SP, okay wait this is an athletic even page. Maybe we only want to feature athletic campaign profiles... up to you Chelsea. Just let me know.	</article>	<button>	<a href="#">MORE</a>	</button>	</section>	<section class="container--inner">	<article>	<img src="" />	<header>	<h4>	<span>Katie Smith</span>	</h4>	</header>	This is a short blurb about how awesome little Katie Smith used her singing talent to raise funds for SP, okay wait this is an athletic even page. Maybe we only want to feature athletic campaign profiles... up to you Chelsea. Just let me know.	</article>	<button>	<a href="#">MORE</a>	</button>	</section>
</div>
</div>
</body>
</html>

Fundraising Campaign Profiles 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;	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;	-webkit-box-orient: vertical;	-webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;	-ms-flex-wrap: nowrap; flex-wrap: nowrap;	margin: 0 auto;
}
h3 {	font-weight: 300;	font-size: 2.6rem;	line-height: 136%;	letter-spacing: 1px;	padding-bottom: 3%;	text-align: center;	-webkit-margin-before: 2.6rem;	-webkit-margin-after: 1.625rem;	/*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: 2.2rem;	line-height: 116%;	letter-spacing: 1px;	padding-bottom: 3%;	-webkit-margin-before: 2.6rem;	-webkit-margin-after: 1.625rem;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	-ms-flex-wrap: wrap; flex-wrap: wrap;	/*flex-direction: column; creates a full-width underline although I need it.*/	align-item: stretch;	/*text-shadow: 0 2px 5px rgba(0, 0, 0, 0.30), 0 2px 15px rgba(0, 0, 0, 0.16);*/
}
.container--inner h4,
.container--inner h4 span {	margin-bottom: 0;	margin-top: 0;
}
h4>span {	text-align: center;
}
h4>span:nth-child(1) {	font-weight: 300;	font-size: 1.1rem;	border-bottom: 1px solid rgba(0, 0, 0, .3);	/*background-color: rgba(0,0,0,.16);*/	margin-bottom: 5%;	padding: 0 3%;	text-transform: uppercase;
}
.container--inner h4>span:nth-child(1) {	border-bottome: none;	font-size: 1.33rem;	font-weight: 400;	margin-bottom: 1%
}
h5 {	font-size: 1.125rem;	padding: 10px;	margin: 0 auto;	text-transform: uppercase
}
h5.athletic {	color: #002D56;	background: rgba(0, 45, 86, .2)
}
section.athletic {	background: rgba(0, 45, 86, .2)
}
h5.holiday {	color: #FF6319;	background: rgba(255, 99, 25, .2)
}
section.holiday {	background: rgba(255, 99, 25, .2)
}
h5.custom {	color: #00A599;	background: rgba(0, 165, 153, .2)
}
section.custom {	background: rgba(0, 165, 153, .2)
}
h5.ministry {	color: #002D56
}
h5.ministry {	color: #002D56
}
h5.ministry {	color: #002D56
}
.container--inner article {	margin: 0 auto;	font-size: .825rem;	line-height: 150%;
}
article {	text-align: center;	margin: 4% auto 8%;	font-size: 1rem;	font-weight: 300;	letter-spacing: .035rem;	line-height: 1.525rem;
}
.container--steps:nth-child(4) article {	font-size: 2.6rem;	line-height: 3rem;	font-style: italic;	font-family: Georgia, san-serif;	margin: 6% auto;
}
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: vertical;	-webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;	-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;	text-align: center;	/*background: rgba(6, 140, 203, 0.4)*/
}
.container--steps:nth-child(2) {	-ms-flex-wrap: wrap; flex-wrap: wrap;	background: url("http://staging.samaritanspurse.org/wp-content/uploads/2015/07/1519CB-B-049-bkgcover.jpg") center left / cover no-repeat;	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.30), 0 2px 15px rgba(0, 0, 0, 0.16);
}
.container--steps:nth-child(1),
.container--steps:nth-child(3),
.container--steps:nth-child(6) {	/*flex-direction: row;*/	-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.container--steps:nth-child(4) {	-webkit-box-orient: horizontal;	-webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	width: 85%;
}
.container--steps:nth-child(4) > .container--text {	width: 100%;	margin: 0 auto;	padding: 0 4%;	border: 0;
}
.container--steps:nth-child(7) > .container--text {	width: 25%;	margin: 0 auto;
}
.container--steps:last-of-type {	-webkit-box-orient: horizontal;	-webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
/*
.container--steps:nth-child(1), .container--steps:nth-child(3) {background-color: lightcoral;}
.container--steps:nth-child(5) {background: #F0B880;}
.container--steps:nth-child(6){background:#67C294;}
*/
.container--text {	width: 300px;	-webkit-box-align: center; -ms-flex-align: center; align-items: center;	margin: 0 3%;	vertical-align: top;	/*background-color: rgba(0,0,0,0.3);*/	padding: 0% 3%;	color: #5a5a5a;	border: 3px solid #002D56;	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);	-webkit-transition: box-shadow .25s;	transition: box-shadow .25s;
}
.container--steps:nth-child(2) > .container--text {	color: #fff;	background-color: rgba(0, 0, 0, .45);	border-left: 1px solid rgba(0, 0, 0, .2);	border-right: 1px solid rgba(0, 0, 0, .2);	border-top: 0;	border-bottom: 0;
}
.container--steps:last-of-type > .container--text {	border: 1px solid rgba(0, 0, 0, .2);	box-shadow: none;
}
.container--text:last-child {	padding-bottom: 5%;
}
.container--bottom {	width: 100%;	max-width: 1600px;	margin: 0 auto;	padding: 0;	text-align: center;
}
.container--features {	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-pack: distribute; justify-content: space-around;	-webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;	-ms-flex-line-pack: stretch; align-content: stretch;	text-align: center;
}
.container--inner {	max-width: 27%;	margin: 7px;	vertical-align: top;	background-color: #fff;	padding: 2% 2%;	color: #5a5a5a;	border: 1px solid rgba(0, 0, 0, .2);	-webkit-transition: box-shadow .25s;	transition: box-shadow .25s;
}
@media (max-width: 1000px) {	.container--inner {	min-width: 340px;	}
}
.container--inner img {	padding: 4% 0 0 0;	-webkit-clip-path: circle(90px at center); clip-path: circle(90px at center);	background-color: lightcoral;	-ms-flex-line-pack: stretch; align-content: stretch;	width: 200px;	height: 200px;
}
Fundraising Campaign Profiles w FlexBox - Script Codes
Fundraising Campaign Profiles w FlexBox - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 5,190 Kb
Views 32,384
Do you need developer help for Fundraising Campaign Profiles 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
Fundraising Category Onboard Rebuild w FlexBox
Year-Round Packing Ideas
Fundraising FlexBox-Athletic Events
CSS Email Background Shapes
Volunteer Form
V1 Fundraising Category Wires
Design System for OCC
Story Roll
Fundraising Landing Page w Flexbox
Volunteer Page Build P2
Create amazing sales emails 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!