Skip to content

Instantly share code, notes, and snippets.

@Erudite885

Erudite885/index.html

Created February 12, 2022 09:39
Show Gist options
  • Save Erudite885/f6028b0bcc46c2c1468c91c342bbdf45 to your computer and use it in GitHub Desktop.
Save Erudite885/f6028b0bcc46c2c1468c91c342bbdf45 to your computer and use it in GitHub Desktop.
Download ZIP
Landing Page
Raw
index.html
<header class="main-header" id="header">
<img id="header-img"
src="https://dl.dropbox.com/s/3v716rqxmt2697o/Screenshot_20210929-091300_1.png?dl=0"
alt="power wash"/>
<nav class="main-nav" id="nav-bar">
<ul>
<li>
<a class="nav-link" href="#features"> Features </a>
</li>
<li>
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li>
<a class="nav-link" href="#how-it-works">How it Works </a> </li>
<!-- cto -->
<li class="nav__link--cta">
<a class="cta" href="#buy"> BUY</a>
</li>
</ul>
</nav>
</header>
<!--main section-->
<main>
<div class="temp" id="features"></div>
<!--insert image here to serve as home-->
<section id="product-overview">
<h1> Whiter and Brighter.</h1>
<!-- form section-->
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input
name="email"
id="email"
type="email"
placeholder="Enter your email address"
required />
<input id="submit" type="submit" value="Get Started" class="btn" />
</form>
</section>
<!--insert content and video here to serve as features-->
<section id="how-it-works">
<iframe
id="video"
height="315"
src="https://www.youtube.com/embed/7yikOiJ3cMs"
frameborder="0"
allowfullscreen
></iframe>
</section>
<!--end of insert-->
<section id="plans">
<h1 class="section-title" id="pricing">Choose Your Size</h1>
<div class="plan__list">
<article class="plan">
<h1 class="plan__title">100g</h1>
<!--can add image here-->
<h2 class="plan__price">$10/month</h2>
<h3>For Personal Use.</h3>
<ul class="plan__features">
<li class="plan__feature">1 Workspace</li>
<li class="plan__feature">Unlimited Material</li>
<li class="plan__feature">10 Spin Cycles </li>
<li class="plan__feature">Basic Support</li>
</ul>
<div>
<button class="button"> PURCHASE</button>
</div>
</article>
<article class="plan plan--highlighted">
<h1 class="plan__annotation">RECOMMENDED</h1>
<h1 class="plan__title">200g</h1>
<!--can add image here-->
<h2 class="plan__price">$45/month</h2>
<h3>For Large Families.</h3>
<ul class="plan__features">
<li class="plan__feature">5 Workspaces</li>
<li class="plan__feature">Unlimited Material</li>
<li class="plan__feature">100 Spin Cycles</li>
<li class="plan__feature">Plus Support</li>
</ul>
<div id="buy">
<button class="button">PURCHASE</button>
</div>
</article>
<article class="plan">
<h1 class="plan__title">300g</h1>
<!--can add image here-->
<h2 class="plan__price">$85/month</h2>
<h3>Commercial Laundry Use.</h3>
<ul class="plan__features">
<li class="plan__feature">10 Workspaces</li>
<li class="plan__feature">Unlimited Material</li>
<li class="plan__feature">1000 Spin Cycles </li>
<li class="plan__feature">Priority Support</li>
</ul>
<div>
<button class="button">PURCHASE</button>
</div>
</article>
</div>
</section>
<!--Features of product-->
<section id="key-features">
<h1 class="section-title" id="how-it-works">Many Good Reasons to Stick Around</h1>
<ul class="key-feature__list">
<li class="key-feature">
<div class="key-feature__image">
<svg viewBox="0 0 512 512">
<path style="fill:#F09B24;" d="M344,248h-32V112c0-4.418-3.582-8-8-8h-40c-4.418,0-8,3.582-8,8s3.582,8,8,8h32v128h-32 c-4.418,0-8,3.582-8,8s3.582,8,8,8h32v128h-32c-4.418,0-8,3.582-8,8s3.582,8,8,8h40c4.418,0,8-3.582,8-8V264h32c4.418,0,8-3.582,8-8 S348.418,248,344,248z"
/>
<path style="fill:#8E9AA9;" d="M264,64H8c-4.418,0-8,3.582-8,8v80c0,4.418,3.582,8,8,8h256c4.418,0,8-3.582,8-8V72 C272,67.582,268.418,64,264,64z"
/>
<path style="fill:#7C899B;" d="M24,144c-4.418,0-8-3.582-8-8V64H8c-4.418,0-8,3.582-8,8v80c0,4.418,3.582,8,8,8h256 c4.418,0,8-3.582,8-8v-8H24z"
/>
<rect x="152" y="96" style="fill:#B8E3A8;" width="88" height="32" />
<g>
<polygon style="fill:#7EC97D;" points="152,96 152,128 166,128 198,96 " />
<polygon style="fill:#7EC97D;" points="220,96 188,128 240,128 240,96 " />
</g>
<path style="fill:#56677E;" d="M240,136h-88c-4.418,0-8-3.582-8-8V96c0-4.418,3.582-8,8-8h88c4.418,0,8,3.582,8,8v32 C248,132.418,244.418,136,240,136z M160,120h72v-16h-72V120z"
/>
<g>
<path style="fill:#435670;" d="M32,136c-4.418,0-8-3.582-8-8V96c0-4.418,3.582-8,8-8s8,3.582,8,8v32C40,132.418,36.418,136,32,136z "
/>
<path style="fill:#435670;" d="M56,136c-4.418,0-8-3.582-8-8V96c0-4.418,3.582-8,8-8s8,3.582,8,8v32C64,132.418,60.418,136,56,136z "
/>
<path style="fill:#435670;" d="M80,136c-4.418,0-8-3.582-8-8V96c0-4.418,3.582-8,8-8s8,3.582,8,8v32C88,132.418,84.418,136,80,136z "
/>
<path style="fill:#435670;" d="M104,136c-4.418,0-8-3.582-8-8V96c0-4.418,3.582-8,8-8s8,3.582,8,8v32 C112,132.418,108.418,136,104,136z"
/>
<path style="fill:#435670;" d="M128,105c-4.418,0-8-3.582-8-8v-1c0-4.418,3.582-8,8-8s8,3.582,8,8v1 C136,101.418,132.418,105,128,105z"
/>
<path style="fill:#435670;" d="M128,136c-4.418,0-8-3.582-8-8v-1c0-4.418,3.582-8,8-8s8,3.582,8,8v1 C136,132.418,132.418,136,128,136z"
/>
</g>
<path style="fill:#8E9AA9;" d="M264,208H8c-4.418,0-8,3.582-8,8v80c0,4.418,3.582,8,8,8h256c4.418,0,8-3.582,8-8v-80 C272,211.582,268.418,208,264,208z"
/>
<path style="fill:#7C899B;" d="M24,288c-4.418,0-8-3.582-8-8v-72H8c-4.418,0-8,3.582-8,8v80c0,4.418,3.582,8,8,8h256 c4.418,0,8-3.582,8-8v-8H24z"
/>
<rect x="152" y="240" style="fill:#B8E3A8;" width="88" height="32" />
<g>
<polygon style="fill:#7EC97D;" points="152,240 152,272 166,272 198,240 " />
<polygon style="fill:#7EC97D;" points="220,240 188,272 240,272 240,240 " />
</g>
<path style="fill:#56677E;" d="M240,280h-88c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8h88c4.418,0,8,3.582,8,8v32 C248,276.418,244.418,280,240,280z M160,264h72v-16h-72V264z"
/>
<g>
<path style="fill:#435670;" d="M32,280c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32C40,276.418,36.418,280,32,280 z"
/>
<path style="fill:#435670;" d="M56,280c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32C64,276.418,60.418,280,56,280 z"
/>
<path style="fill:#435670;" d="M80,280c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32C88,276.418,84.418,280,80,280 z"
/>
<path style="fill:#435670;" d="M104,280c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32 C112,276.418,108.418,280,104,280z"
/>
<path style="fill:#435670;" d="M128,249c-4.418,0-8-3.582-8-8v-1c0-4.418,3.582-8,8-8s8,3.582,8,8v1 C136,245.418,132.418,249,128,249z"
/>
<path style="fill:#435670;" d="M128,280c-4.418,0-8-3.582-8-8v-1c0-4.418,3.582-8,8-8s8,3.582,8,8v1 C136,276.418,132.418,280,128,280z"
/>
</g>
<path style="fill:#8E9AA9;" d="M264,352H8c-4.418,0-8,3.582-8,8v80c0,4.418,3.582,8,8,8h256c4.418,0,8-3.582,8-8v-80 C272,355.582,268.418,352,264,352z"
/>
<path style="fill:#7C899B;" d="M24,432c-4.418,0-8-3.582-8-8v-72H8c-4.418,0-8,3.582-8,8v80c0,4.418,3.582,8,8,8h256 c4.418,0,8-3.582,8-8v-8H24z"
/>
<rect x="152" y="384" style="fill:#B8E3A8;" width="88" height="32" />
<g>
<polygon style="fill:#7EC97D;" points="152,384 152,416 166,416 198,384 " />
<polygon style="fill:#7EC97D;" points="220,384 188,416 240,416 240,384 " />
</g>
<path style="fill:#56677E;" d="M240,424h-88c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8h88c4.418,0,8,3.582,8,8v32 C248,420.418,244.418,424,240,424z M160,408h72v-16h-72V408z"
/>
<g>
<path style="fill:#435670;" d="M32,424c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32C40,420.418,36.418,424,32,424 z"
/>
<path style="fill:#435670;" d="M56,424c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32C64,420.418,60.418,424,56,424 z"
/>
<path style="fill:#435670;" d="M80,424c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32C88,420.418,84.418,424,80,424 z"
/>
<path style="fill:#435670;" d="M104,424c-4.418,0-8-3.582-8-8v-32c0-4.418,3.582-8,8-8s8,3.582,8,8v32 C112,420.418,108.418,424,104,424z"
/>
<path style="fill:#435670;" d="M128,393c-4.418,0-8-3.582-8-8v-1c0-4.418,3.582-8,8-8s8,3.582,8,8v1 C136,389.418,132.418,393,128,393z"
/>
<path style="fill:#435670;" d="M128,424c-4.418,0-8-3.582-8-8v-1c0-4.418,3.582-8,8-8s8,3.582,8,8v1 C136,420.418,132.418,424,128,424z"
/>
</g>
<path style="fill:#F7C14D;" d="M424,168c-48.523,0-88,39.477-88,88s39.477,88,88,88s88-39.477,88-88S472.523,168,424,168z" />
<path style="fill:#FFDB66;" d="M424,184c-39.701,0-72,32.299-72,72s32.299,72,72,72s72-32.299,72-72S463.701,184,424,184z" />
<path style="fill:#69788D;" d="M484.893,314.16C476.393,274.588,451.922,248,424,248s-52.393,26.588-60.893,66.16 c-0.605,2.82,0.354,5.749,2.511,7.664C381.731,336.124,402.465,344,424,344s42.269-7.876,58.381-22.176 C484.539,319.909,485.498,316.98,484.893,314.16z"
/>
<path style="fill:#56677E;" d="M434.053,249.171C430.768,248.403,427.411,248,424,248c-27.922,0-52.393,26.588-60.893,66.16 c-0.605,2.82,0.354,5.749,2.511,7.664c3.383,3.002,6.979,5.703,10.734,8.125C384.904,286.243,407.373,255.378,434.053,249.171z"
/>
<path style="fill:#69788D;" d="M424,192c-17.645,0-32,14.355-32,32s14.355,32,32,32s32-14.355,32-32S441.645,192,424,192z" />
<path style="fill:#56677E;" d="M432,248c-17.645,0-32-14.355-32-32c0-6.783,2.128-13.076,5.742-18.258 C397.444,203.53,392,213.138,392,224c0,17.645,14.355,32,32,32c10.862,0,20.471-5.444,26.258-13.742 C445.076,245.872,438.783,248,432,248z"
/>
</svg>
</div>
<p class="key-feature__description">3,857,000 Trusting Customers</p>
</li>
<li class="key-feature">
<div class="key-feature__image">
<svg viewBox="0 0 512 512">
<path style="fill:#69788D;" d="M248,0H8C3.582,0,0,3.582,0,8v496c0,4.418,3.582,8,8,8h240c4.418,0,8-3.582,8-8V8 C256,3.582,252.418,0,248,0z"
/>
<path style="fill:#56677E;" d="M24,504V8c0-4.418,3.582-8,8-8H8C3.582,0,0,3.582,0,8v496c0,4.418,3.582,8,8,8h24 C27.582,512,24,508.418,24,504z"
/>
<g>
<rect x="0" y="112" style="fill:#435670;" width="256" height="16" />
<rect x="0" y="240" style="fill:#435670;" width="256" height="16" />
</g>
<path style="fill:#F7C14D;" d="M128,392c-22.056,0-40,17.944-40,40s17.944,40,40,40s40-17.944,40-40S150.056,392,128,392z" />
<path style="fill:#FFDB66;" d="M128,408c-13.233,0-24,10.767-24,24s10.767,24,24,24s24-10.767,24-24S141.233,408,128,408z" />
<path style="fill:#F7C14D;" d="M128,392c-2.739,0-5.414,0.278-8,0.805V424c0,4.418,3.582,8,8,8c4.418,0,8-3.582,8-8v-31.195 C133.414,392.278,130.739,392,128,392z"
/>
<g>
<path style="fill:#435670;" d="M216,288H40c-4.418,0-8-3.582-8-8s3.582-8,8-8h176c4.418,0,8,3.582,8,8S220.418,288,216,288z"
/>
<path style="fill:#435670;" d="M216,328H40c-4.418,0-8-3.582-8-8s3.582-8,8-8h176c4.418,0,8,3.582,8,8S220.418,328,216,328z"
/>
<path style="fill:#435670;" d="M216,368H40c-4.418,0-8-3.582-8-8s3.582-8,8-8h176c4.418,0,8,3.582,8,8S220.418,368,216,368z"
/>
<path style="fill:#435670;" d="M216,16H40c-4.418,0-8,3.582-8,8v64c0,4.418,3.582,8,8,8h176c4.418,0,8-3.582,8-8V24 C224,19.582,220.418,16,216,16z"
/>
</g>
<rect x="48" y="32" style="fill:#56677E;" width="160" height="48" />
<path style="fill:#435670;" d="M216,144H40c-4.418,0-8,3.582-8,8v64c0,4.418,3.582,8,8,8h176c4.418,0,8-3.582,8-8v-64 C224,147.582,220.418,144,216,144z"
/>
<rect x="48" y="160" style="fill:#56677E;" width="160" height="48" />
<path style="fill:#F09B24;" d="M511.747,180.237c-0.194-6.537-8.107-10.107-13.135-5.894c-5.6,4.693-42.904,21.282-98.514,21.282 c-33.45,0-64.625-20.999-64.929-21.206c-2.9-1.991-6.764-1.85-9.512,0.346c-2.677,2.135-27.201,20.86-63.793,20.86 c-55.607,0-92.914-16.589-98.515-21.282c-5.028-4.211-12.941-0.645-13.135,5.894c-1.634,54.834,4.655,105.941,18.693,151.903 c12.096,39.604,29.759,74.047,52.497,102.373c27.538,34.304,62.743,59.882,104.66,76.045c3.069,1.918,6.757,1.921,9.83,0 c41.917-16.163,77.122-41.741,104.66-76.045c22.738-28.326,40.401-62.77,52.497-102.373 C507.092,286.179,513.381,235.071,511.747,180.237z"
/>
<path style="fill:#F7C14D;" d="M476.21,221.226c-1.953-1.631-4.568-2.235-7.036-1.628c-21.686,5.327-44.926,8.028-69.075,8.028 c-25.926,0-49.633-8.975-64.955-16.504c-2.307-1.134-5.016-1.091-7.284,0.116c-14.059,7.477-36.919,16.388-65.994,16.388 c-24.153,0-47.394-2.701-69.075-8.028c-5.155-1.268-10.221,2.966-9.894,8.261c2.077,33.693,7.668,65.635,16.616,94.935 c22.774,74.565,66.139,126.334,128.888,153.868c2.032,0.891,4.397,0.891,6.43,0c61.777-27.107,104.716-78.876,127.62-153.868 c8.948-29.3,14.539-61.241,16.616-94.935C479.224,225.319,478.163,222.856,476.21,221.226z"
/>
<path style="fill:#FFDB66;" d="M331.609,451.727c-52.604-25.289-89.304-70.987-109.144-135.944 c-6.532-21.39-11.162-44.336-13.82-68.447c17.133,2.852,34.952,4.291,53.22,4.291c29.394,0,53.376-7.793,69.978-15.561 c17.44,7.736,41.656,15.561,68.256,15.561c18.267,0,36.085-1.439,53.219-4.291c-2.659,24.112-7.288,47.06-13.82,68.448 C419.545,381.108,383.27,426.805,331.609,451.727z"
/>
<g>
<path style="fill:#2C9DD4;" d="M479.066,227.858c0.157-2.539-0.903-5.002-2.856-6.633s-4.568-2.235-7.036-1.628 c-21.686,5.327-44.926,8.028-69.075,8.028c-25.926,0-49.633-8.975-64.955-16.504c-1.057-0.52-2.2-0.78-3.345-0.806l-0.072,133.351 h123.601c2.556-6.746,4.933-13.702,7.123-20.874C471.398,293.493,476.989,261.552,479.066,227.858z"
/>
<path style="fill:#2C9DD4;" d="M206.658,343.667c24.153,63.42,65.028,108.108,121.743,132.995c1.031,0.452,2.147,0.673,3.263,0.666 l0.063-133.661H206.658z"
/>
</g>
<g>
<path style="fill:#3CBDE8;" d="M439.497,315.783c6.532-21.389,11.161-44.336,13.82-68.448c-17.134,2.852-34.952,4.291-53.219,4.291 c-26.6,0-50.815-7.824-68.256-15.561l-0.116,107.601h97.758C433.179,334.807,436.524,325.518,439.497,315.783z"
/>
<path style="fill:#3CBDE8;" d="M232.523,343.667c21.144,50.298,54.363,86.56,99.087,108.06l0.117-108.06H232.523z" />
</g>
</svg>
</div>
<p class="key-feature__description">99.999% Uptime Guarantee</p>
</li>
<li class="key-feature">
<div class="key-feature__image">
<svg viewBox="0 0 512 512">
<path style="fill:#8E9AA9;" d="M168,200c-4.418,0-8,3.582-8,8v120h-17.376c-3.302-9.311-12.194-16-22.624-16 c-13.234,0-24,10.767-24,24s10.766,24,24,24c10.429,0,19.321-6.689,22.624-16H168c4.418,0,8-3.582,8-8V208 C176,203.582,172.418,200,168,200z"
/>
<path style="fill:#FFDB66;" d="M120,328c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S124.411,328,120,328z" />
<path style="fill:#56677E;" d="M208,200c-4.418,0-8,3.582-8,8v184H94.624C91.322,382.689,82.43,376,72,376 c-13.234,0-24,10.767-24,24s10.766,24,24,24c10.429,0,19.321-6.689,22.624-16H208c4.418,0,8-3.582,8-8V208 C216,203.582,212.418,200,208,200z"
/>
<path style="fill:#FFDB66;" d="M72,392c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S76.411,392,72,392z" />
<path style="fill:#69788D;" d="M240,208c-4.418,0-8,3.582-8,8v239H47.24c-2.671-10.34-12.078-18-23.24-18c-13.234,0-24,10.767-24,24 s10.766,24,24,24c9.666,0,18.009-5.747,21.809-14H240c4.418,0,8-3.582,8-8V216C248,211.582,244.418,208,240,208z"
/>
<path style="fill:#FFDB66;" d="M24,453c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S28.411,453,24,453z" />
<path style="fill:#69788D;" d="M488,464c-10.429,0-19.321,6.689-22.624,16H280V208c0-4.418-3.582-8-8-8s-8,3.582-8,8v280 c0,4.418,3.582,8,8,8h193.376c3.302,9.311,12.194,16,22.624,16c13.234,0,24-10.767,24-24S501.234,464,488,464z"
/>
<path style="fill:#FFDB66;" d="M488,480c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S492.411,480,488,480z" />
<path style="fill:#56677E;" d="M456,408c-10.429,0-19.321,6.689-22.624,16H312V208c0-4.418-3.582-8-8-8s-8,3.582-8,8v224 c0,4.418,3.582,8,8,8h129.376c3.302,9.311,12.194,16,22.624,16c13.234,0,24-10.767,24-24S469.234,408,456,408z"
/>
<path style="fill:#FFDB66;" d="M456,424c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S460.411,424,456,424z" />
<path style="fill:#8E9AA9;" d="M416,344c-10.429,0-19.321,6.689-22.624,16H352V208c0-4.418-3.582-8-8-8s-8,3.582-8,8v160 c0,4.418,3.582,8,8,8h49.376c3.302,9.311,12.194,16,22.624,16c13.234,0,24-10.767,24-24S429.234,344,416,344z"
/>
<path style="fill:#FFDB66;" d="M416,360c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S420.411,360,416,360z" />
<path style="fill:#3CBDE8;" d="M362,88c-8.741,0-17.231,1.751-25.06,5.085C337.646,88.797,338,84.43,338,80 c0-44.112-35.888-80-80-80c-42.823,0-77.895,33.816-79.909,76.149C170.393,73.415,162.244,72,154,72c-39.701,0-72,32.299-72,72 s32.299,72,72,72h208c35.29,0,64-28.71,64-64S397.29,88,362,88z"
/>
<path style="fill:#2C9DD4;" d="M368,200H160c-39.701,0-72-32.299-72-72c0-5.863,0.721-11.559,2.05-17.019 C84.918,120.88,82,132.102,82,144c0,39.701,32.299,72,72,72h208c30.389,0,55.88-21.296,62.379-49.743 C413.565,186.327,392.352,200,368,200z"
/>
<path style="fill:#2A7DB5;" d="M256,128c-13.234,0-24,10.767-24,24s10.766,24,24,24c13.233,0,24-10.767,24-24S269.233,128,256,128z"
/>
<path style="fill:#2C9DD4;" d="M256,144c-4.411,0-8,3.589-8,8s3.589,8,8,8c4.411,0,8-3.589,8-8S260.411,144,256,144z" />
<g>
<path style="fill:#C5F1FA;" d="M221.755,87.695c-2.994,0-5.864-1.688-7.233-4.572c-1.894-3.991-0.194-8.763,3.798-10.657 C230.157,66.849,242.834,64,256,64c13.166,0,25.844,2.849,37.68,8.466c3.992,1.895,5.692,6.666,3.798,10.657 s-6.666,5.692-10.657,3.798C277.144,82.328,266.774,80,256,80c-10.774,0-21.144,2.328-30.821,6.921 C224.072,87.446,222.904,87.695,221.755,87.695z"
/>
<path style="fill:#C5F1FA;" d="M276.545,116.618c-1.148,0-2.316-0.249-3.424-0.774C267.745,113.293,261.985,112,256,112 c-5.985,0-11.745,1.293-17.121,3.844c-3.991,1.895-8.763,0.192-10.657-3.798c-1.894-3.992-0.193-8.764,3.798-10.657 C239.557,97.813,247.625,96,256,96c8.376,0,16.444,1.813,23.98,5.389c3.991,1.894,5.692,6.665,3.798,10.657 C282.41,114.93,279.539,116.618,276.545,116.618z"
/>
</g>
</svg>
</div>
<p class="key-feature__description">Lightning Fast CDN</p>
</li>
</ul>
</section>
</main>
<!--footer section-->
<footer class="main-footer">
<nav>
<ul class="main-footer__links">
<li class="main-footer__link">
<a href="#">Support</a>
</li>
<li class="main-footer__link">
<a href="#">Terms of Use</a>
</li>
</ul>
</nav>
</footer>
Raw
landing-page.markdown
Raw
script.babel
// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
Raw
scripts
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
Raw
style.css
* {
margin: 0;
box-sizing: border-box;
}
html{
margin: 0;
}
.temp{
background: url('https://dl.dropbox.com/s/l2aapcgvpzj68r5/Screenshot_20210929-091836_1.png?dl=0') center no-repeat border-box;
background-size: contain;
width:100vw;
height: 270px;
margin-top:80px;
padding:20px;
}
@media (min-width: 40rem){
.temp{
margin-top:25px;
width: 100%;
height:36rem;
}
}
.main-header {
position:fixed;
top:0;
width:100vw;
background-color:#eee;
display:flex;
align-items:center;
justify-content:space-between;
}
#header-img{
width:45px;
height:45px;
margin-left:14px;
}
nav {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 5px;
}
#nav-bar{
box-shadow: 0 8px 8px -4px lightblue;
}
nav li {
padding-bottom: 5px;
list-style-type:none;
margin:0 1rem;
}
.nav-link {
text-decoration:none;
color: #0c435a;
font-weight:bold;
}
.nav-link:hover, .nav-link:active {
color: f67418;
border-bottom: 1px solid #f67418;
}
.cta {
color:white;
background:red;
padding:4px 8px;
border-radius:8px;
text-decoration:none;
}
cta:hover, .cta:active {
color: red;
background:white;
border: 1px dotted red;
}
@media (min-width: 40rem)
{
nav > ul {
width: 35vw;
display: flex;
flex-direction: row;
align:right;
justify-content: space-around;
}
}
#video {
width: 80%;
max-width:30rem;
height: 250px;
margin: 60px auto;
display: block;
}
#product-overview, .section-title{
text-align:center;
color: #0c435a;
margin:0.5rem 0;
}
.plan__list{
width:100%;
margin:auto;
text-align: center;
}
.plan{
background:#ccf2ff;
text-align:center;
padding:1rem;
margin:0.5rem 0;
width:100%;
}
@media (min-width: 40rem) {
.plan{
background:#ccf2ff;
text-align:center;
padding:2rem;
margin:1rem 0;
width:30%;
min-width:13rem;
display: inline-block;
vertical-align: middle;
}
}
.plan--highlighted {
background:#0099cc;
color:white;
}
@media (min-width: 40rem){
.plan--highlighted {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
}
.plan__annotation{
background:#d2edf9;
color:#0c435a;
padding:2px;
border-radius:16px;
}
.plan__title{
color:#0086b3;
font-size:2rem;
}
.plan--highlighted .plan__title{
color:white;
margin-top:15px;
}
.plan__price{
color: #8fb1bc;
font-size:1.2rem;
}
.plan--highlighted .plan__price{
color: #004d66;
}
.plan__features{
list-style:none;
margin:0;
padding:0;
}
.plan__features li {
margin:8px 0;
}
.button{
background:#002633;
color:white;
font:inherit;
padding:8px;
border:none;
border-radius:8px;
}
.button:hover, .button:active{
background:white;
color:#002633;
border:1.5px dotted red;
font-weight:bold;
cursor:pointer;
}
.button:focus{
outline:none;
}
#key-features{
background-image:
linear-gradient(#ccf2ff, #0099cc);
margin-top:8m
}
#key-features .section-title{
margin:32px;
padding:1rem
}
.key-feature__list{
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.key-feature{
margin:1rem 0;
}
@media (min-width:40rem){
.key-feature {
display:inline-block;
width:30%;
vertical-align:top;
}
}
.key-feature__description{
font-weight:bold;
font-size:0.8rem;
text-align:center;
}
.key-feature__image{
background:#b3ecff;
width:128px;
height:128px;
border:2px solid #007399;
border-radius:50%;
margin:auto;
}
.main-footer{
background:#002633;
padding:18px;
margin-top:28px;
}
.main-footer__links{
list-style:none;
padding:0;
margin:0;
text-align:center;
}
.main-footer__link a {
text-decoration:none;
color:white;
}
@media (min-width: 40rem) {
.main-footer__link {
display: inline-block;
margin: 0 1rem;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment