EDM Page

Developer
Vanessa Vevoda
Size
12,326 Kb
Views
28,336
  1. EDM Page Previews
  2. EDM Page HTML Codes
  3. EDM Page CSS Codes
  4. EDM Page JS Codes

How do I make an edm page?

Built to be optimized in 1300pxw in Chrome Version 54.0.2840.71 desktop browser. Client insisted on page with a full understand of viewport constraints. So on we go!. What is a edm page? How do you make a edm page? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

EDM Page Previews
IQ Test

EDM Page - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>EDM Page</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main class="safari_only_main"> <section class="safari_only_header_intro section-1 inner-col-2">
<header class="green"> <div>
<img src="https://s3.amazonaws.com/spweb-uploads/2016/11/EvangelismDiscipleshipMultiplication-title.png" class="section-title">
</div>
</header> </section> <header class="section-1-bkg section-1" alt="hero image for EDM page"> <section class="col-1 graph-container safari_only_intro"> <p class="circle-left circle-right"><strong>EVERY SHOEBOX GIFT IS AN EXCELLENT RESOURCE</strong> for evangelism and discipleship leading to the multiplication of new believers and churches around the world. Local Christians share the Gospel, inviting children to trust in Jesus. Then boys and girls receive a surprise that may be their first gift ever. They hold in their hands a tangible expression of God’s love.</p> </section> <section class="col-1 list-role-descs ministry-divisions"> <section class="col-3"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/10/section-1-evangelism.png"/>
<a href="#evangelism"> <button class="yellow-inpage-cta"> EVANGELISM </button>
</a> </section> <section class="col-3"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/10/section-1-discipleship.png"/>
<a href="#discipleship"> <button class="yellow-inpage-cta"> DISCIPLESHIP </button>
</a> </section> <section class="col-3"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/10/section-1-multiplication.png"/>
<a href="#multiplication"> <button class="yellow-inpage-cta"> MULTIPLICATION </button>
</a> </section> </section> </header> <section class="col-1 graph-container safari_only_intro"> <p class="circle-left circle-right"><strong>AFTER THEY RECEIVE SHOEBOXES</strong> many children also participate in our 12-lesson discipleship program, The Greatest Journey. Through this course, which includes Bible stories and Scripture memorization, they learn how to follow Christ in their daily lives as they share Him with friends and family.</p> </section> <section id="evangelism" class="section-2 inner-col-2"> <!-- ------------section 2 background image and talk bubble------------- --> <header class="section-2-bkg"> <section class="call-out zambia" style="position: relative"> <aside> <div id="talkbubble"> <h6>- ZAMBIA -</h6> <p>A ministry partner presents the Gospel using a colorful resource from Operation Christmas Child.</p> </div> <aside> </section> </header> <!-- ------------section 2 title------------- --> <header class="orange"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/ShoeboxOutreachEvents-title.png" class="section-title"> </header> <!-- ------------section 2 book and text block------------- --> <article class="narrow-content-column section-2-content"> <section class="col-3" style="position: relative"> <img class="TGJ-partner-booklet-placement" src="https://s3.amazonaws.com/spweb-uploads/2016/10/ministry-partner-guide.png" > </section> <section class="col-2 graph-container section-2"> <p>Local Christians are taught to host a successful shoebox outreach event through the Ministry Partner Guide, a 36-page resource that outlines how to organize a distribution, share the Gospel and invite children to participate in follow-up discipleship. It is full of colorful pictures and a suggested script to use as they present the Gospel message in a child-friendly way.</p> </section> </article> </section> <section class="section-3 inner-col-2"> <!-- ------------section 3 title------------- --> <header class="yellow" style="z-index: -5;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/TheGreatestGift-title.png" class="section-title"> </header> <div class="section-3-bkg"> <section class="section-3-text-block"> <div class="narrow-content-column section-3-inset-container"> <article> <section class="col-3"> <figure><img src="https://s3.amazonaws.com/spweb-uploads/2016/10/section-3-tgj-booklet.png" class="section-3-booklet"></figure> </section> <section class="col-2 graph-container"> <p>Local Christians are taught to host a successful shoebox outreach event through the Ministry Partner Guide, a 36-page resource that outlines how to organize a distribution, share the Gospel and invite children to participate in follow-up discipleship. It is full of colorful pictures and a suggested script to use as they present the Gospel message in a child-friendly way.</p> </section> </article> </div> </section> </div> </section> <section id="discipleship" class="section-4 inner-col-2"> <!-- ------------section 4 title------------- --> <header class="green" style="z-index: 10;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/TheGreatestJourney-title.png" class="section-title"> </header> <!-- ------------section 4 intro graph------------- --> <header class="section-4-bkg"> <section style="position:relative"> <aside> <div class="section-4-inset-container"> <article> <section class="col graph-container"> <p>After receiving shoebox gifts, many children are invited back to participate in our discipleship program, The Greatest Journey. During this 12-lesson course, children come to know Christ, grow in faith, and learn how to share the Gospel with others.</p> </section> </article> </div> </aside> </section> <section> <figure><img src="https://s3.amazonaws.com/spweb-uploads/2016/11/section-9-bubbles-updated-teacher.png" class="section-4-teacher-guide"></figure> <figure><img src="https://s3.amazonaws.com/spweb-uploads/2016/11/section-4-bubbles-updated-student.png" class="section-4-student-guide"></figure> <figure style="position: relative"><img src="https://s3.amazonaws.com/spweb-uploads/2016/11/TGJ-teacher-guide-call-out.png" class="section-4-inset-example"></figure> </section> </header> </section> </section> <section class="section-5 inner-col-2"> <!-- ------------section 5 title------------- --> <header class="yellow" style="z-index: 10;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/AGraduationCelebration-title.png" class="section-title"> </header> </section> <article class="section-5-bkg safari_only_article_1 content-aligned-bottom"> <section class="call-out uganda" style="position: relative"> <aside style="position: absolute;top: -110px;left: -300px;"> <div id="talkbubble"> <h6>- UGANDA -</h6> <p>Children rejoice at their graduation from The Greatest Journey.</p> </div> </aside> </section> <div class="section-5-inset-container"> <section class="section-5-graph-container"> <p>After completing The Greatest Journey, children attend a graduation celebration and receive a certificate. Most importantly, they are given a Bible that includes the New Testament and selected Old Testament stories along with a dictionary of Biblical terms and a map of Bible lands. Complete with illustrations, it is often the first copy of God’s Word the child, or their family, will own.</p> <section style="-webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap;
-webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;"> <p class="col-1 graph-container" style="padding-top: 0">Family and friends who attend the ceremony hear the Gospel of Jesus Christ. Hearing the Good News and testimonies during their loved one’s graduation reinforces the changes they have seen in the students’ lives, and their families often come to faith in Christ.</p> <figure class="col-3 section-5-graph-inset"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/10/the-new-testament.png"> </figure> </section> </section> </div> </article> <section id="multiplication" class="section-6 inner-col-2"> <!-- ------------section 6 title------------- --> <header class="green" style="z-index: 10;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/TheGospelMultiplies-title.png" class="section-title"> </header> </section> <section class="col-1 graph-container safari_only_intro"> <p class="circle-left circle-right"><strong>Every shoebox gift is an excellent RESOURCE</strong> for evangelism and discipleship leading to the multiplication of new believers and churches around the world. Local Christians share the Gospel, inviting children to trust in Jesus. Then boys and girls receive a surprise that may be their first gift ever. They hold in their hands a tangible expression of God’s love.</p> </section> <div class="safari_only_article_1_body"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/10/multiplication-graphic.jpg"> </div> <!-- Container start --> <article class="section-6-bkg safari_only_article_1"> <section class="timeline-container safari_only_article_1_header"> <section class="safari_only_article_1_body timeline-text"> <p>Several times a week, Pastor Waisea Liwaiono walks up to 10 miles to villages in Fiji like Vunika, a rural community that had no church.</p> </section> <section class="safari_only_article_1_body timeline-text"> <p>Pastor Waisea hosted an Operation Christmas Child outreach event to hand out shoebox gifts and share the Gospel. </p> </section> <section class="safari_only_article_1_body timeline-text"> <p>The local witchdoctor, a grandparent of one of the students, became a believer and offered his property as a place for the new church to meet.</p> </section> <section class="safari_only_article_1_body timeline-text"> <p>Pastor Waisea invited the children to attend The Greatest Journey discipleship program. The parents of the students grew curious and began attending too.</p> </section> <section class="safari_only_article_1_body timeline-text"> <p>When the church outgrew the space, they built a new larger building across the road.</p> </section> <section class="safari_only_article_1_body timeline-text"> <p>Today 80 people attend the church regularly. The children continue to share their faith with others, and five additional churches have been started in surrounding villages!</p> </section> </section> </article> <!-- container end --> <section class="section-7 inner-col-2"> <!-- ------------section 7 title------------- --> <header class="green" style="z-index: 10;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/GetInvolved-title.png" class="section-title"> </header> </section> <article class="section-7-bkg"> <!--<section class="col-1 graph-container safari_only_intro"> <p><strong>Every shoebox gift is an excellent resource</strong> for evangelism and discipleship leading to the multiplication of new believers and churches around the world. Local Christians share the Gospel, inviting children to trust in Jesus. Then boys and girls receive a surprise that may be their first gift ever. They hold in their hands a tangible expression of God’s love.</p> </section>--> </article> <section class="section-8 inner-col-2"> <!-- ------------section 8 title------------- --> <header class="orange" style="z-index: 10;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/Prayer-title.png" class="section-title"> </header>
<section class="col-1 graph-container safari_only_intro"> <p>After receiving shoebox gifts, many children are invited back to participate in our discipleship program, The Greatest Journey. During this 12-lesson course, children come to know Christ, grow in faith, and learn how to share the Gospel with others.</p> </section> <article class="section-8-bkg"> <section class="call-out ecuador" style="position: relative"> <aside> <div id="talkbubble"> <h6>- ECUADOR -</h6> <p>A little girl in ecuador prays to thank god for her shoebox gift. prayer is an essential element of outreach events around the world.</p> </div> <aside> </section> </article> </section> <section class="section-9 inner-col-2"> <!-- ------------section 9 title------------- --> <header class="yellow" style="z-index: 10;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/Training-title.png" class="section-title"> </header> <header class="section-9-bkg" style="position:relative; display:block"> <div class="section-9-header-image-bkg"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/1640PE-B-073-overlayed2.png"> </div> </header>
<img style="z-index: 40; margin: 0 auto; text-align: center" src="https://s3.amazonaws.com/spweb-uploads/2016/11/multiplication-diag.png"> <article class="section-8-inset-container" style=""> <section class="col-1 graph-container safari_only_intro" style="border-bottom: 2px solid black; border-top: 2px solid black;"> <p><strong>TO ENSURE QUALITY OUTREACH EVENTS AND THE GREATEST JOURNEY COURSES,</strong> National Leadership Teams consist of year-round volunteers from various evangelical denominations. Together they strategize how to reach all the children in their country with the Gospel of Jesus Christ. With this approach, local Christians who know the culture and language best are given effective resources and a solid Biblical foundation so that they can communicate the Gospel within their own communities.</p> </section> </article> <header class="green" style="z-index: 10;"> <section class="col-1 list-role-descs volunteer-divisions"> <section class="col-3"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/section-9-volunteer1.png"/> </section> <section class="col-3"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/section-9-volunteer2.png"/> </section> <section class="col-3"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/section-9-volunteer3.png"/> </section> </section> </header> <header class="section-9-bkg-2"> <article class="section-8-inset-container" style=""> <section class="col-1 graph-container safari_only_intro" style="border-bottom: 2px solid black; border-top: 2px solid black;"> <p><strong>EVERY YEAR, MILLIONS OF PEOPLE LIKE YOU PACK SHOEBOXES</strong> and drop them off at thousands of locations. Another 9,000+ volunteers serve year-round to support the project. Join the faithful servants of Christ who make this happen! </p> </section> </div> </header> </section> <section class="section-10 inner-col-2"> <!-- ------------section 10 title------------- --> <header class="orange" style="z-index: 10;"> <img src="https://s3.amazonaws.com/spweb-uploads/2016/11/ItStartsWithYou-title.png" class="section-title"> </header> <div class="section-10-inset-container"> <section class="graph-container safari_only_intro"> <p></p> <h4>GIVE</h4> <ul class="section-10-lists"> <li><b>Pack a shoebox!</b> National Collection Week is the third week of November.</li> <li><b>Support The Greatest Journey discipleship program.</b> Every aspect of this program from teacher training to graduation is implemented for just $6 a child.</li> </ul> </section> <section class="graph-container safari_only_intro"> <h4>PRAY</h4> <ul class="section-10-lists"> <li><b>Pray for the worldwide ministry of Samaritan’s Purse</b>, and Gospel opportunities through simple shoebox gifts.</li> </ul> </section> <section class="graph-container safari_only_intro"> <h4>VOLUNTEER</h4> <ul class="section-10-lists"> <li><b>Year-round:</b> Join a team of volunteers to serve in leadership, church relations, community relations, media relations, student relations, prayer mobilization, administrative support, or logistics.</li> <li><b>Short-term:</b> <i>Drop–Off Locations:</i> During National Collection Week, serve at one of 4,000 Operation Christmas Child drop-off locations. <i>Processing Centers:</i> After National Collection Week, volunteer at one of eight processing centers around the country to prepare shoeboxes for international delivery. </li> </ul> </section> </div> </section> <section class="section-11 inner-col-2"> <!-- ------------section 11 title------------- --> <header class="section-11-bkg"> <div class="col-3 section-11-rectangle"> <section class="graph-container safari_only_intro"> <h6>Visit samaritanspurse.org/occ</h6> <p>to order free materials, or to see ideas of how to participate in Operation Christmas Child with your family, group, or church.</p> </section> </div> </header> </section>
</main> <script src="js/index.js"></script>
</body>
</html>

EDM Page - Script Codes CSS Codes

@import url(//fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);
/*------------------------- Start TABULA RASA updates ---------------------------*/
#inner {padding-top: 0;margin-bottom: 0px!important;}
#megaMenu {margin-top: 10px;z-index: 100001;}
#content {margin: 0;}
.article-headline {display: none;}
.hentry {padding: 0;}
#inner,#content-container {max-width: 100%;}
#subNav {height: 50px;background: #EBEBEB;width: 100%;display: none;}
#subNavTitle {float: left;font-size: 18px;margin-top: 15px;text-transform: uppercase;margin-left: 7px;}
#subNavLinks {float: left;font-size: 16px;margin: 4px 0 0 40px;display: block;}
#subNavLinks a {color: #ffffff;display: block;float: left;padding: 10px 16px;background-color: #B7BB2F;}
#subNavSocial {float: right;margin-top: 9px;margin-right: 7px;}
#subNavSocTitle {position: relative;top: 4px;Font-size: 16px;margin-right: 5px;}
span.icons {cursor: pointer;}
span.icons a {text-decoration: none;}
#postTitleWrap {display: none;}
.entry-content {overflow: hidden;margin: 0;}
.entry-content ol,.entry-content ul {margin: 0 auto;}
.entry-content p {margin-bottom:0}
#footerMoreArts,div#moreArts {display: none;}
div.social-bar {text-align: center;}
.entry-content ol,.entry-content ul {padding: 0;	margin: 0 auto;}
.archive-page ul li,.entry-content ul li {margin: 0 10px 10px 0;}
body.single-post .entry-content p, body.single-post .entry-content ul {padding-left: 20px}
/*------------------------- End TABULA RASA updates ---------------------------*/
body {	margin: 0;
}
*,
*:before,
*:after {	box-sizing: border-box;	/* 2 */	max-width: 100%;	/* 1 */
}
main {	display: -webkit-box;	/* OLD - iOS 6-, Safari 3.1-6 */	/* OLD - Firefox 19- (buggy but mostly works) */	display: -ms-flexbox;	/* TWEENER - IE 10 */	/* NEW - Chrome */	display: flex;	-ms-flex-flow: column nowrap; flex-flow: column nowrap;	-ms-flex-pack: distribute; justify-content: space-around;	-webkit-box-align: center; -ms-flex-align: center; align-items: center;	-ms-flex-line-pack: center; align-content: center;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: auto;	background: none;	font-family: 'Roboto', sans-serif;
font-size: 1rem;
}
main > *,
section > * {	-webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto;	/* 2 */	padding: 0;
}
article {	display: -webkit-box;	/* OLD - iOS 6-, Safari 3.1-6 */	/* OLD - Firefox 19- (buggy but mostly works) */	display: -ms-flexbox;	/* TWEENER - IE 10 */	/* NEW - Chrome */	display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; /* tweak the where items line up on the row */ /* valid values are: flex-start, flex-end, space-between, space-around, stretch */ -ms-flex-line-pack: start; align-content: flex-start;
}
article { width: 97%;
margin:0 auto;
}
article.content-aligned-bottom {
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;	-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;	-ms-flex-line-pack: end; align-content: flex-end;
}
section,
aside {	display: -webkit-box;	/* OLD - iOS 6-, Safari 3.1-6 */	/* OLD - Firefox 19- (buggy but mostly works) */	display: -ms-flexbox;	/* TWEENER - IE 10 */	/* NEW - Chrome */	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;	width: 100%
}
section.safari_only_article {	padding-top:4%
}
section.section-3 {	padding-top: 30px
}
/******************** INNER CONTAINERS WITH CLASS NAMES **********************/
.col { margin: 0 auto; width: 90%; text-align: center;
}
.col-1 {	margin: 0 auto;	width: 70%;
max-width:700px;	text-align: center;
}
.col-2 {	margin: 0 auto;	width: 60%;	text-align: center;
}
.col-3 {	margin: 0 auto;	width: 31%;
}
@media screen and (max-width:60em) {	.col-3 {	width: 61%	}
}
/*.inner-col-2*/
.list-role-descs,
.list-quote-descs {	margin: 0 auto;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-flow: row wrap; flex-flow: row wrap;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;	-ms-flex-line-pack: center; align-content: center;	width: 100%;
}
.ministry-divisions {	margin-top:45%;	max-width: 1100px;
}
.ministry-divisions .col-3 {	text-align: center;	margin: 0 auto;	max-width: 325px;
}
.ministry-divisions img {	text-align: center;	margin:0 auto;
}
@media screen and (max-width: 63em) {	.col-1 {	width: 100%;	}	.col-2 {	width: 100%;	}	.list-role-descs, .list-quote-descs {	width: 100%;	}
}
header {	position: relative;
}
/* container for talk bubbles */
aside {position:relative; padding-top:0%; margin: 30px auto;}
.narrow-content-column {	max-width: 990px;
}
/*------------------------- section background images ---------------------*/
header.section-1-bkg { width: 100%; margin: 0 auto; padding: 0; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1641PE-B-406-section-1-bkg1.jpg") no-repeat top center;
width:1200px
}
.section-2-bkg { margin: 0 auto; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1648ZM-A-110-section-2-bkg.jpg") center / cover no-repeat; padding: 0;	width: 1200px;
height: 799px
}
.section-3-bkg { margin: 0 auto; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1575MW-J-317_YELLOW-section-3-bkg.jpg") center / cover no-repeat; padding: 0;
width: 1200px;	height: 1375px;	z-index:-100;
}
.section-4-bkg { margin: 0 auto; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/section-4_bkg-1200w1.jpg") no-repeat center center; padding: 0;	height: 1942px;
width: 1200px
}
.section-5-bkg { width: 100%;	height:100%; margin: 0 auto; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1446UG-L-797.jpg") bottom center / cover no-repeat; padding: 0;
width:1200px;
height: 800px;
}
.section-6-bkg { margin: 0 auto; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1530FJ-K-067-section-6-timeline-bkg2.jpg") bottom center / cover no-repeat; padding: 0; height: 900px;
width: 1200px
}
.section-7-bkg { margin: 0 auto; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/15122US-A-003_section-7-bkg.jpg") top center / cover no-repeat; padding: 0;
width:1200px;	height: 801px;
}
.section-8-bkg { width: 100%;	height:100%; margin: 50px auto 0; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1416HN-D-305-section-8-bkg.jpg") no-repeat center center; padding: 0 0 0;	height: 810px;
width:1200px
}
.section-9-bkg { margin: -50px auto; background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1640PE-B-073-bkg2.png") no-repeat center center; padding:0;	width:1200px;	height:570px
}
.section-9-bkg-2 {	width: 100%;	height:100%; margin: 150px auto 0;	background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/section-9-bkg-2.jpg") no-repeat center top; padding: 0 0 0;	height: 697px;
}
.section-11-bkg {	width:100%;	height: 100%;	background: url("https://s3.amazonaws.com/spweb-uploads/2016/11/1446UG-O-280-section-10-last-bkg.jpg") center center / cover no-repeat; padding: 0;
margin:0 auto;
width: 1200px;	height: 800px;
}
/*------------------------ section titles with background bars ------------------------*/
.section-2 header.orange, .section-8 header.orange, .section-10 header.orange {	background:#cd5129 url("https://s3.amazonaws.com/spweb-uploads/2016/10/orange-bkg-small.jpg");	height: 95px;	width:100%;
max-width: 1200px;	box-shadow: 0 0 6px 2px rgba(0, 0, 0, .2);	text-align: center;	margin: 0 auto;
}
.section-3 header.yellow, .section-5 header.yellow, .section-9 header.yellow {	background:#ffc708 url("https://s3.amazonaws.com/spweb-uploads/2016/10/yellow-bkg-small.jpg");	height:95px;	width:100%;
max-width: 1200px;	box-shadow: 0 0 6px 2px rgba(0, 0, 0, .2);	text-align: center;	margin: 0 auto;
}
.section-1 header.green, .section-4 header.green, .section-6 header.green, .section-7 header.green, .section-9 header.green {	background:#b2d234 url("https://s3.amazonaws.com/spweb-uploads/2016/10/occ-green-bkg-small.jpg");	height: 95px;	width:100%;
max-width: 1200px;	box-shadow: 0 0 6px 2px rgba(0, 0, 0, .2);	text-align: center;	margin: 0 auto;
}
.section-1 header.green {
margin-top:30px;
margin-bottom: 30px;
}
.section-9 header.green {	max-height:102px;	margin-top:150px
}
/* attempt at vertically centering the healine in the color bar, even as it scales... it still is disporportionately longer on the bottom in smaller viewports.
Also: min- was added to the height of the above color bars... if you take this out then you need to remove the min- above. */
section.inner-col-2 header.orange > svg, section.inner-col-2 header.green > svg, section.inner-col-2 header.yellow > svg {	vertical-align: middle;	margin: 1% auto;
}
.section-1 .section-title { text-align: center; margin: 19px auto; vertical-align: middle; padding: 14px 15px; background: rgba(255, 255, 255, .3); border: 3px solid black;
}
.section-2 .section-title,
.section-3 .section-title,
.section-4 .section-title,
.section-5 .section-title,
.section-6 .section-title,
.section-7 .section-title,
.section-8 .section-title,
.section-9 .section-title,
.section-10 .section-title,
.section-11 .section-title { text-align: center; margin: 16px auto; vertical-align: middle; padding: 4px 15px; background: rgba(255, 255, 255, .3); border: 4px solid black;
}
/*******************------------ ELEMENT STYLES ------------**********************/
h1,
h2,
h3,
h4,
h5,
h6 {	-webkit-margin-before: 0em;	-webkit-margin-after: 0em;
}
h1 {	font-size: 3rem;	color: #fff;	margin-top: 0;	margin-bottom: 2%;	font-weight: 300;	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
h3 {	font-weight: 900!important; font-size: 3.7rem; line-height: 1; color: #444; margin-top: 2%; margin-bottom: 1%; text-transform: capitalize; letter-spacing: -2px;
}
h4 {	font-weight: 600;	font-size: 5rem;	line-height: 3rem;	color: #fff;	margin-top: 15%;	margin-bottom: 0;	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.graph-container > h4 {	font-size:2rem;	margin: 20px auto 0;	line-height: 2rem;	color: #f15e30;	text-shadow: none;
}
@media screen and (max-width:60em) {	h3 {	font-size: 2rem;	line-height: 1.7rem;	color: #444;	margin-top: 20px;	margin-bottom: 0;	}	h4 {	font-size: 2rem;	line-height: 1.3rem;	margin-top: 19%;	}	h1 {	font-size: 3rem;	}	header.section-1-bkg {	background-position: center;	min-height: 300px;	}
}
h5 {	font-weight: 500;	font-size: 1.6rem;	color: #888;	margin-bottom: 3%;
}
h6 {	font-weight: 600;	font-size: 1.3rem;	letter-spacing: 0.02rem;	line-height: 1.25rem;	text-transform: uppercase;	color: #fff;	margin: 13% auto 0;	-webkit-transition: all .2s ease-in-out;	transition: all .2s ease-in-out;
}
div h6 {	margin: 14% auto 0;
}
@media screen and (max-width: 60em) {	h6 {	margin: 10% auto 0;	}
}
@media screen and (max-width: 50em) {	h6 {	margin: 13% auto 0;	}
}
.graph-container {	padding: 5px 0 10px;
}
.section-1 section.col-1.graph-container, section.col-1.graph-container {	margin:20px auto;	border-bottom: 2px solid black;	border-top: 2px solid black;	position: relative;
}
@media screen and (max-width: 50em) {	section.col-1.graph-container {	}
}
p {	padding:10px 20px;	margin: 0 auto;	text-align: left;	font-size: 1rem!important;	line-height: 1.4;	color: #000;	font-family: "museo-sans",sans-serif;	font-style: normal;	font-weight: 300;
}
.section-4 p {	max-width: 800px;
}
@media screen and (max-width: 50em) {	p {	max-width: 95%	}
}
@media screen and (max-width: 40em) {	p {	width: 100%;	line-height: 1.4;	margin-bottom: 2%;	text-align: left;	}
}
hr {	width: 30%;	border:1px dotted #ae2f28;	text-align: center
}
/*-------------------------------------------- Button -----------------------------------*/
button.yellow-inpage-cta {	letter-spacing: .02rem;	font-size: 1.125rem;	font-family: "museo-sans",sans-serif;	font-weight: 700;	text-transform: uppercase;	margin: 6% auto 40px;	padding: 7px 18px;	max-width: 100%;	text-align: center;	color: #000;	background: #ffe485;	-webkit-transition: all .2s ease-in;	transition: all .2s ease-in;	cursor: pointer;	border: 3px solid black;	position:relative;	box-shadow: 0 0 0 10px #ffc708;
}
button:focus {	outline: 0 !important;
}
/******************** Talk Bubbles **********************/
#talkbubble { width: 250px; height: 250px; background: #ffc708; position: relative; border-radius: 250px;	border:10px solid white;	z-index: 10;	box-shadow: 0 0 6px 3px rgba(0, 0, 0, .2);	text-align:center;	padding:10px 10px 0;	margin-top: 5%
}
#talkbubble p {	text-align: center;
}
#talkbubble::before { content:""; position: absolute; left: 75%; top: 33%; width: 0; height: 0; border-top: 60px solid transparent; border-right: 80px solid #ffc708; border-bottom: 110px solid transparent;	z-index:-10;	/*box-shadow: 0 0 6px 3px rgba(0, 0, 0, .2);*/
}
#talkbubble::before { -webkit-transform: rotate(-48deg); -moz-transform: rotate(-48deg); -ms-transform: rotate(-48deg); -o-transform: rotate(-48deg);
}
#talkbubble::after { -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg);
}
/*call out is a class on the talkbubble parent element*/
section.call-out {
display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-flow: row wrap; flex-flow: row wrap;	-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
section.call-out div {
-webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
}
/*-------------- SHOEBOX OUTREACH EVENTS: Partner booklet inset image on section 2 ---------------*/
.section-2-bkg aside {
position: absolute; left: 160px;
}
.narrow-content-column.section-2-content {
max-width: 880px;
}
.section-2-content {
-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
padding-top:10px;
margin: 10px auto 30px auto;
min-height: 200px;
}
.TGJ-partner-booklet-placement {
position: absolute;
left: 0;
top: -50px;
width: 100%;
min-width: 319px;
padding: 0;
margin: 0 auto;
}
@media screen and (max-width: 66em) {	.narrow-content-column.section-2-content {
max-width: 80%;
}	.TGJ-partner-booklet-placement {	position: relative;	}	.section-2-content {	margin-top:0	}
}
/*----------------------- THE GREATEST GIFT: Inset graph and image on section 3 -------------------*/
.section-3-text-block {
position:relative;
margin: 150px auto;
}
figure {	height: 100%;	margin: 0;	padding: 0;	width: 100%;
}
.section-3-inset-container figure {	position: relative;	text-align: center;	margin: 0 auto;
}
.section-3-inset-container { width: 57%; background: #fff; position: relative;	z-index: 10;	box-shadow: 0 0 6px 3px rgba(0, 0, 0, .15);	text-align:center;	margin: 10% auto;
}
.section-3-inset-container > article {
vertical-align: middle;
height: 236px
}
@supports (-moz-appearance:none) and (display:contents) {
.section-3-inset-container > article {
height: auto;
}
}
@-moz-document url-prefix() {
.section-3-inset-container > article {
height: auto;
}
}
.section-3-bkg .graph-container {
padding: 5px 0;
vertical-align: middle;
}
.section-3-booklet {	position:absolute;	top:-200px;	left: 0;	width: 238px;	min-width: 200px;	padding: 0;	margin: 0
}
.section-3 p {	padding-left: 0;	padding-right: 10px;
}
@media screen and (max-width:66em) {	.section-3-inset-container {	width: 80%;	padding-top: 40px;	margin-top: 120px;	}	.section-3-inset-container > article {	height: auto;	}	.section-3-booklet {	top: -270px;	width:200px;	}
}
/*----------------------- THE GREATEST JOURNEY: Inset paragraphs and assets and image on section 4 -------------------*/
.section-4-inset-container { width: 60%; background: #fff; position: relative;	box-shadow: 0 0 6px 3px rgba(0, 0, 0, .15);	text-align:center;	margin: 0 auto;
}
figure .section-4-teacher-guide {	display: block;	margin-top: 0;	margin-left: 0;
position: absolute;
right: 80px;
top: 240px;
width: 730px;
}
figure .section-4-student-guide { display: block; margin-top: 0; margin-left: 0; position: absolute; top: 1200px; right: 150px; width: 670px;
}
figure .section-4-inset-example {
width: 400px;
position: absolute;
right: 170px;
top: 1350px;	}
@media screen and (max-width: 66em) {	figure .section-4-teacher-guide {	display: block;
position: absolute;
right: 0;
top: 240px;
width: 730px;	}
}
@media screen and (max-width: 1350px) {
}
@media screen and (max-width: 1250px) {
}
@media screen and (max-width: 1180px) {	}
@media screen and (max-width: 1050px) {	}
/*----------------------- A GRADUATION CELEBRATION: Inset paragraphs and assets and image on section 5 -------------------*/
.uganda { float: left; z-index: 20;	-webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;
}
.uganda #talkbubble { width: 230px; height: 230px; background: #ffc708; border-radius: 230px;	border:10px solid white;	z-index: 10;	box-shadow: 0 0 6px 3px rgba(0, 0, 0, .2);	text-align:center;	padding:10px;	margin:0 auto
}
.uganda #talkbubble p {	margin: 10px auto;	padding: 0 10px;
}
.uganda #talkbubble:before { content:""; position: absolute; left: 60%; top: 50%; width: 0; height: 0; border-top: 60px solid transparent; border-right: 90px solid #ffc708; border-bottom: 110px solid transparent;	z-index:-10;	/*box-shadow: 0 0 6px 3px rgba(0, 0, 0, .2);*/
}
.uganda #talkbubble:before { -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg);
}
.uganda #talkbubble:after { -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg);
}
div.section-5-inset-container { width: 50%; background: #fff; position: relative;	box-shadow: 0 0 6px 3px rgba(0, 0, 0, .15);	margin: 100px 5% -20px auto;
}
div.section-5-inset-container section.section-5-graph-container p {	padding: 20px 10px 20px 20px;	float: left;
text-align: left
}
div.section-5-inset-container section.section-5-graph-container.inner-col-2 p { padding: 0 10px 20px 10px;
float: left;
}
.section-5-inset-container {	position: relative;
}
.section-5-graph-inset {	position: absolute; right: -70px;	bottom: -42%;	width: 300px;	z-index: 50;
}
/*----------------------- THE GOSPEL MULTIPLIES: Inset paragraphs and assets and image on section 6 -------------------*/
article.section-6-bkg { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -ms-flex-flow: row nowrap; flex-flow: row nowrap; margin-top: 30px;
}
section.timeline-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.timeline-container {	width: 50%;	margin: 0 auto 10%; /*padding: 20px 0 35% 0;	transform: rotate(-30deg)*/
}
.timeline-text { /*-webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap;*/ max-width: 100%;	-webkit-box-orient: horizontal;	-webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;	-webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;	padding: 0 10px 0 0;
}
.timeline-text p {	border-left: 4px solid black;	padding-left: 15px;	padding-right: 0;	font-weight: bold
}
/*section.timeline-text aside {	padding:0;	margin:0 auto 0 -10px;	text-align:right;	/*align-content: flex-start;	align-self: flex-start;	font-family: Helvetica, san-serif;	font-size: 2rem;	line-height: 0;	z-index:0;
}
section.timeline-text aside:last-of-type {
}*/
section.timeline-text p {	position: relative;
}
section.timeline-text p:before {	content:"";	position: absolute;	left: -12px; top: 7px;	width:20px;	height: 20px;	background: #ffc708;	border-radius: 50%;	border: 3px solid white;	-webkit-transform: rotate(90deg); transform: rotate(90deg);	z-index:10;	}
/*----------------------- Inset paragraphs and assets and image on section 8 (nothing needed for section 7) -------------------*/
.section-8-bkg aside {
position: absolute;
left:30px;
}
.section-8-inset-container { width: 70%; position: relative;	text-align:center;	margin: 0 auto;
}
/*position of talk bubble*/
.ecuador {z-index:40}
.ecuador #talkbubble { background: #f15e30; width: 260px; height: 260px;
}
.ecuador #talkbubble:before { content:""; position: absolute; left: 70%; top: -20%; width: 0; height: 0; border-top: 60px solid transparent; border-right: 90px solid #f15e30; border-bottom: 110px solid transparent;	z-index:-10;	/*box-shadow: 0 0 6px 3px rgba(0, 0, 0, .2);*/
}
.ecuador #talkbubble:before { -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -ms-transform: rotate(-120deg); -o-transform: rotate(-120deg);
}
.ecuador #talkbubble:after { -webkit-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -ms-transform: rotate(-60deg); -o-transform: rotate(-60deg);
}
/*----------------------- TRAINING: Inset paragraphs and assets and image on section 9 -------------------*/
.section-9-header-image-bkg {	text-align: center;	margin:0 auto;	width: 1200px;	height:600px;
}
.section-9-header-image-bkg>img { position: absolute; top: -30px;	left:0; text-align: center;	z-index: 30;
}
.section-9 .graph-container { width: 80%; position: relative;	text-align:center;	margin: 0 auto;
}
.volunteer-divisions {	padding-top:50px;	max-width: 1100px;
}
.volunteer-divisions .col-3 {	text-align: center;	margin: 0 auto;	max-width: 325px;	margin-top: -200px
}
.volunteer-divisions img {	max-width: 280px;	text-align: center;	margin:0 auto;
}
.section-9-inset-container { width: 70%;	text-align:center;	margin: 0 auto;
}
/*----------------------- GET INVOLVED!: Inset paragraphs and assets and image on section 10 -------------------*/
.section-10-inset-container { width: 50%;
max-width: 760px;	text-align:center;	margin: 0 auto;
}
ul.section-10-lists {	margin-top:0;	padding-top:5px;	font-weight: 300;	text-align: left;
}
ul.section-10-lists li {	padding: 3px 0;	line-height: 1.5;
}
.section-11 h6 {	margin: 15px auto 0;	padding: 0;	text-align: center
}
.section-11-rectangle {	padding:40px;	box-shadow: 0 0 15px 0 rgba(0,0,0,0.7); margin: 20% 60px 0 auto;	background: #47682b;	width: 40%
}
.section-11 .graph-container {	border-top: 2px solid #fff;	border-bottom: 2px solid #fff;	background: #47682b;
}
.section-11-rectangle .graph-container p {	font-family: "museo-sans",sans-serif;	font-weight: 500;	color: #fff;
}
/*---------------------------- WAY TOO FAR NESTED CONTAINERS AND THEIR CONTENTS ---------------------*/
.list-role-descs li.role-container {	margin:0;	width: 33%;	max-height: 300px;	background: #fff;	-webkit-transition: all .4s ease-in-out;	transition: all .4s ease-in-out;	overflow: hidden;
}
.inner-col--sq-container {	margin: 0 auto;	width: 24%;	max-width: 100%;	height: 500px;	max-heigh: 100%;
}
/* ------------------------------------------------ ----------------------------------------------- */
.list-quote-descs {	margin:0 auto;	-webkit-padding-start: 2px;
}
@media screen and (max-width:1250px){
.inner-col--sq-container {	margin: 0;	padding:0;	width: 23%;	max-width: 100%;	height: 500px;
}	}
.inner-col--sq-container figcaption div footer {	font-size: .8rem;	font-style: italic;	text-align: right;	font-family: 'Roboto', serif;
}
@media screen and (max-width:73em) {	.inner-col--sq-container figcaption {	position:absolute; bottom:0	}	.inner-col--sq-container {	width: 49%;	margin:0 auto;	}	.list-quote-descs {	margin:0;	padding:0;	}
}
@media screen and (max-width:71em) {	.list-role-descs li.role-container {	margin:0;	width: 50%;	background: #fff;	-webkit-transition: all .4s ease-in-out;	transition: all .4s ease-in-out;	overflow: hidden;	}
}
@media screen and (max-width:550px) {	.list-role-descs li.role-container {	width:100%;	}	.inner-col--sq-container {	width: 100%;	}
} li.inner-col--sq-container:nth-child(n+7), .list-quote-descs li:nth-child(n+7) { background-color:white;	-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start;
}
/******************** INNER CONTAINERS WITH CLASS NAMES **********************/
ul.list-role-descs li, ul.list-quote-descs li {	list-style-type: none;	box-sizing: border-box;
}
@media screen and (max-width: 50em) {	ul.list-role-descs li, ul.list-quote-desc li {	margin: 0;	}
}
.list-role-descs li a, .list-quote-descs li a {	text-decoration: none;
}
.list-role-descs li a p, .list-quote-descs li a p {	display: none;	opacity: 0;	-webkit-transition: opacity .2s ease-in-out;	transition: opacity .2s ease-in-out;
}
/******************** INNER CONTAINERS WITH CLASS NAMES :: ATTRIBUTE STATE(S) STYLES **********************/
.list-role-descs li.role-container:hover,
.list-role-descs li.role-container:active {	background: #444;	cursor: pointer;
}
.list-role-descs li:hover h6,
.list-role-descs li:focus h6,
.list-role-descs li:active h6 {	color: #fff;	margin: 4% auto 1%;	-webkit-transform: scale(.8); transform: scale(.8);
}
.inner-col--sq-container {	position: relative;
}
/* Safari 6.1+ (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {	@media {	_:-webkit-full-screen,	.safari_only_main {	display: -webkit-box;	display: flex;	min-height: 100%;	}	_:-webkit-full-screen,	.safari_only_article_header {	flex-shrink: 0;	}	_:-webkit-full-screen,	.safari_only_intro {	flex-shrink: 0;	}	}}
_:-webkit-full-screen:not(:root:root),
.safari_only_main {	display: -webkit-box;	display: flex;	min-height: 100%;
}
_:-webkit-full-screen:not(:root:root),
.safari_only_intro {	flex-shrink: 0;
}

EDM Page - Script Codes JS Codes

 (function(d) { var config = { kitId: 'xdp0dol', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document);
EDM Page - Script Codes
EDM Page - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 12,326 Kb
Views 28,336
Do you need developer help for EDM Page?

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 Campaign Profiles w FlexBox
A Pen by Vanessa Vevoda
Fundraising FlexBox-Athletic Events
Design System for OCC
Volunteer Page Build P2
My Own 3-col CSS
Story Roll
CSS Button with Transitions
Year-Round Packing Ideas
Volunteer Page Build V3
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!