Fundraising Landing Page w Flexbox
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 - 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 →</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 →</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 →</a> </button> </section> </div> <button><a href="https://www.classy.org/charity/samaritans-purse/c21127" target="_blank">create my page now →</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](http://shots.codepen.io/vanessav/pen/OVYrER-512.jpg)
Developer | Vanessa Vevoda |
Username | vanessav |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 3,987 Kb |
Views | 26,312 |
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!
Name | Size |
CSS Email Background Shapes | 3,044 Kb |
Fundraising Campaign Profiles w FlexBox | 5,190 Kb |
Fundraising Category Onboard Rebuild w FlexBox | 5,147 Kb |
Fundraising FlexBox-OotB | 6,628 Kb |
CSS Button with Transitions | 2,310 Kb |
Design System for OCC | 6,889 Kb |
Year-Round Packing Ideas | 16,439 Kb |
EDM Page | 12,326 Kb |
9901 2016 Nov NCW Starts Now | 7,244 Kb |
Volunteer Page Build P2 | 8,293 Kb |
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!
Name | Username | Size |
About Mazano | Kiti | 2,585 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Calculator | Rzencoder | 4,572 Kb |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
DevCamp 2014 - Denver Public Library | See8ch | 5,033 Kb |
Random Gradients - JS | Aldlevine | 2,026 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Fixed with using Calc | Tomleo | 2,542 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!