CforED/AC Custom HTML .v 4

## 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: hello@CforED.com<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>
	<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: hello@CforED.com<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>