Skip to content

Instantly share code, notes, and snippets.

@CforED

CforED/AC Custom HTML .v 4

Last active August 1, 2022 15:57
Show Gist options
  • Save CforED/6b3dc41f37ed65537e74f25fbb5fe720 to your computer and use it in GitHub Desktop.
Save CforED/6b3dc41f37ed65537e74f25fbb5fe720 to your computer and use it in GitHub Desktop.
Download ZIP
AC Custom HTML .v 4
Raw
AC Custom HTML .v 4
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Cfored Mail</title>
</head>
<body>
<!-- <script>
window.onload = function () {
// Insert Users First Name here
var fname = "User Name";
// Insert Users First Name here
document.getElementById('fname').innerHTML = fname;
};
</script> -->
<!-- Start -->
<div class="title_container">
<p class="title">Make a Donation</p>
<p class="title_content">
The Council for Education is a registered<br>
501(c)(3) tax-exempt organization</br>
(EIN:82-3295336)</p><br>
<a
href="https://apps.irs.gov/app/eos/detailsPage?ein=823295336&name=COUNCIL%20FOR%20EDUCATION&city=Las%20Vegas&state=NV&countryAbbr=US&dba=%20&type=EPOSTCARD&orgTags=EPOSTCARD">Read
more</a>
</div>
<!-- Start -->
<!-- Header HTML -->
<div class="image_container"></div>
<div class="content_container">
<div class="content_text">
Hi, <label id="fname" class="fname">{first_name | default}</label><br><br>
According to U.S. Speaker Nancy Pelosi, President Biden does not have the executive authority to cancel
federal student loan debt.<br>&nbsp
<a href="https://cfored.ac-page.com/donation-webform-p1">
<div class="donate_button">Donate</div>
</a>
</div>
<div class="content_stats">
<label style="font-size:40px;">46</label> Million<br>
About 46 million <br>Americans have <br>student loan<br> debt.
</div>
</div>
<!-- Header HTML -->
<!-- Footer HTML -->
<style>
a {
text-decoration: none;
}
.footer_container {
display: flex;
/* flex-direction: column; */
color: #555555 !important;
}
.footer_container>div {
margin: 25px 50px;
}
.footer_image {
flex: 1;
max-width: 200px;
}
.footer_content {
flex: 2;
letter-spacing: 1px;
line-height: 2vw;
font-size: 1.5vw;
}
.footer_address {
flex: 1;
font-size: 1.2vw;
line-height: 1.8vw;
}
.footer_social {
flex: 1;
}
.aaa {
color: #000 !important;
padding: 10px;
padding-top: 0;
font-size: 30px;
width: 30px;
}
.aaa:hover {
/* color: #fff; */
opacity: 60% !important;
}
.header__logo svg {
height: 40px;
margin-top: -10px;
}
.header__logo svg {
width: auto;
}
/* Responsive design */
@media (max-width: 700px) {
.footer_container {
flex-direction: column;
align-items: center;
text-align: center !important;
}
.footer_content {
flex: 1 !important;
font-size: 1em;
line-height: 1.5em;
}
.footer_address {
line-height: 1.5em;
font-size: 1em;
}
}
/* Responsive design */
</style>
<div class="footer_container">
<div class="footer_image">
<img src="https://i.ibb.co/Lz6JTP0/Logo.png" width="100%">
</div>
<div class="footer_content">
The Council for Education is a public-interest organization advocating for federal student loan borrowers.
We believe that no student should be burdened with excessive student loan debt.<br><br>
<a class="header__logo" href="#">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
sodipodi:docname="hero_logo.svg" id="SVGRoot" version="1.1" viewBox="0 0 16.0 16.0" height="16.0px"
width="16.0px">
<sodipodi:namedview inkscape:current-layer="g9" inkscape:window-maximized="0" inkscape:window-y="125"
inkscape:window-x="678" inkscape:cy="8" inkscape:cx="8" inkscape:zoom="47.0625" showgrid="false"
id="namedview10" inkscape:window-height="1305" inkscape:window-width="1482" inkscape:pageshadow="2"
inkscape:pageopacity="0" guidetolerance="10" gridtolerance="10" objecttolerance="10" borderopacity="1"
bordercolor="#666666" pagecolor="#ffffff" />
<title id="title1435">CED Logo</title>
<defs id="defs10" />
<metadata id="metadata13">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>CED Logo</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g id="layer1">
<g transform="translate(-357.2,-220.5)" id="g9">
<path
d="m 372.87791,229.68373 c -0.13564,0.58386 -0.36373,1.11671 -0.85693,1.52484 -0.41921,0.34578 -0.90624,0.58386 -1.46725,0.60653 -0.94324,0.0341 -1.88648,0.0114 -2.85437,0.0114 v -3.05535 h 1.41176 v 1.71757 c 0.48087,0 0.91858,0.0453 1.34396,-0.0114 0.57951,-0.0737 0.99256,-0.54985 0.94941,-1.08269 -0.0554,-0.57819 -0.53019,-0.97499 -1.17752,-0.97499 -0.83226,0 -1.6707,0 -2.52761,0 v -1.32077 c 0.0986,-0.006 0.20343,-0.0114 0.30824,-0.0114 0.75829,0 1.51041,0 2.2687,0 1.23916,-0.0114 2.31186,0.80493 2.53379,1.92731 0.0185,0.0794 0.0431,0.15305 0.0617,0.23241 v 0.43654 z"
class="st1" id="path44" style="
fill: #555555;
stroke-width: 0.0591154;
" />
<path
d="M 364.62305,230.12021 V 230.5 H 367.2 v 1.3151 h -4.03805 v -1.74024 c -0.41305,0 -0.78912,0 -1.16518,0 -1.41177,-0.006 -2.58311,-1.08836 -2.57078,-2.3808 0.0123,-1.29242 1.17134,-2.35244 2.57078,-2.35244 h 1.18984 v 1.32077 c -0.38839,0 -0.78295,-0.006 -1.17751,0 -0.50552,0.0114 -0.96173,0.34012 -1.07271,0.77092 -0.12945,0.48183 0.0925,0.96366 0.56102,1.18473 0.1418,0.068 0.29592,0.1077 0.45004,0.11904 0.30826,0.017 0.61649,0.006 0.92475,0.006 h 0.26509 v -1.64387 h 4.05038 v 1.30376 h -2.56462 c -0.006,0.1247 -0.0123,0.22673 -0.0185,0.36845 h 2.58929 v 1.34345 h -2.57079 z"
class="st1" id="path46" style="
fill: #555555;
stroke-width: 0.0591154;
" />
</g>
</g>
</svg>
</a><br>
<a href="https://privacy.ced.fund/privacy" style="color: #555555 !important;">Privacy Agreement</a>
<br>
2022 Council for Education
</div>
<div class="footer_address">
Council for Education<br>
4625 West Nevso Drive<br>
Suite 2 <br>
Las Vegas, Nevada 89103<br>
Telephone: 800-307-1076<br>
Fax: 877-459-7907<br>
Email: [email protected]<br>
www.ced.fund
</div>
<div class="footer_social">
<a href="https://www.instagram.com/fedloans/" class="aaa fa fa-instagram"></a>
<a href="https://web.facebook.com/SLIPExchange" class="aaa fa fa-facebook"></a>
<a href="https://twitter.com/CforEd" class="aaa fa fa-twitter"></a>
</div>
</div>
<!-- Footer HTML -->
<!-- <image href="https://i.ibb.co/Lz6JTP0/Logo.png" height="1000px" width="1000px"></image> -->
<style>
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 15.2569px;
/* line-height: 15px; */
}
body {
background-color: #D8D8D8;
}
a {
text-decoration: none;
font-size: 1em;
}
.title_container {
position: absolute;
z-index: 10;
color: #fff;
margin: 60px;
padding: 24px;
border-radius: 30px;
background-color: rgba(10, 10, 10, .5);
}
.title {
font-size: 30px;
margin-bottom: 10px;
}
.title_content {
font-size: 20px;
}
.title_container>a {
color: #fff !important;
font-size: 18px;
}
/* https://i.ibb.co/Lz6JTP0/Logo.png */
.image_container {
background-image: url("https://i.ibb.co/ZNY7fMD/aea49694-16b8-4a5c-84c9-522bd3e4ea5f.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 60vh;
border-radius: 0 0 30% 30%;
min-height: 400px !important;
}
.content_container {
width: calc(90% - 32px);
background-color: #fff;
border-radius: 16px;
/* position: absolute; */
/* left: 50%; */
/* top: 30%; */
/* transform: translateX(-50%); */
padding: 32px;
margin: auto;
display: flex;
}
.content_text {
flex: 2;
padding: 24px 24px 0 0;
}
.content_stats {
max-width: 250px;
flex: 1;
background-color: #41A2FC;
border-radius: 8px;
padding: 24px;
color: #fff;
text-align: center;
}
.donate_button {
border-radius: 8px;
background-color: #FF4B55;
padding: 16px;
color: #fff;
text-align: center;
font-weight: 600;
}
.footer_container {
display: flex;
}
/* Responsive design */
@media (max-width: 550px) {
.content_container {
flex-direction: column-reverse;
align-items: center;
}
.footer_container {
flex-direction: column;
align-items: center;
/* top: 40vh; */
}
.title {
font-size: 25px;
margin-bottom: 10px;
}
.title_content {
font-size: 16px;
}
.title_container>a {
color: #fff !important;
font-size: 14px;
}
}
/* Responsive design */
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment