Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="page-wrapper">
  <header id="header">
		<div class="logo">
			<img id="header-img" src="https://i.ibb.co/HpJZQ4G/product-logo1.png" alt="A Logo Example" />
      <!-- Moderators, please note that I have designed this logo myself using Inkscape -->
		</div>

		<nav id="nav-bar">
      <ul class="nav">
			  <li><a class="nav-link" href="#custom-designs">Custom Logos</a></li>
			  <li><a class="nav-link" href="#learn">Make Your Own</a></li>
			  <li><a class="nav-link" href="#contact-us">Contact Us</a></li>
      </ul>
		</nav>
	</header>

	<div class="container"></div>

	<section id="custom-designs">
		<h2>Design Your Own Logo</h2>
      <div id="first-section">
		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquet tortor tellus, vel convallis ante pulvinar a. Vestibulum luctus tempus tortor eget luctus. In nec neque a est ullamcorper pharetra eu lobortis ex. Pellentesque non quam sit amet erat porta accumsan eu sit amet nulla. Nam libero felis, ultrices quis lectus in, volutpat tempus purus. Nulla eu magna sapien. Mauris viverra urna augue, ut blandit sapien commodo nec. Nunc placerat risus et metus elementum, nec gravida purus congue. Quisque nec lacus vel urna varius vestibulum et quis velit. Curabitur dignissim, ante vel sodales laoreet, lectus tellus viverra augue, viverra mollis arcu tortor in massa.</p>
        <p>Donec sed nisi ac quam pharetra tincidunt. Praesent viverra sapien in eros condimentum, dapibus venenatis leo dictum. Sed dignissim in lacus id porttitor. Donec varius dapibus commodo. Morbi sollicitudin nibh sed augue feugiat porttitor sed tempor ipsum. Donec eu laoreet urna. Vestibulum consectetur aliquam dui ac blandit. Sed mollis, dui at pretium lobortis, justo ipsum volutpat diam, non rhoncus elit orci molestie tortor. Duis ullamcorper ex a elit pretium consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent suscipit, orci id rhoncus porttitor, massa risus volutpat lacus, in lacinia odio nisi ac eros.</p>
        <img id="example" src="https://i.ibb.co/HpJZQ4G/product-logo1.png" alt="Here is our example">
			  <div id="logo-eg-id" class="logo-eg-class">
				<span class="close-modal">&times;</span>
				<img class="modal-content-class" id="modal-content-id" src="https://i.ibb.co/HpJZQ4G/product-logo1.png" alt="Here is our example" />
					<div id="modal-caption">A Logo Example</div>
				  </div>
			  </div>
        <p>Suspendisse potenti. Integer molestie odio in nisi feugiat, at pulvinar odio aliquam. Curabitur eleifend metus posuere enim interdum rhoncus. Nam egestas, sem non sollicitudin placerat, est mi mollis tortor, eget commodo sem lectus auctor diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse luctus metus ac porttitor sagittis. Nulla non enim vestibulum, interdum dui eget, pretium risus. Phasellus ac neque dictum, cursus diam a, mattis tellus. Nam faucibus elit arcu, id aliquam purus tristique sed.</p>
        <p>Integer non mollis enim, nec vestibulum dui. Donec et erat sed ante cursus vestibulum. Aliquam dignissim ac ante ut euismod. Nulla efficitur neque quis bibendum tempus. Nullam porta suscipit justo non laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ac fringilla purus. Praesent dapibus laoreet metus eu tempus.</p>
        <p>Vestibulum ultricies pharetra purus ac sagittis. Integer vehicula massa commodo dolor dictum fringilla. Etiam condimentum ex vel sem fermentum faucibus. Quisque lacinia, velit eget tristique condimentum, tellus nisl aliquam dui, nec rutrum nibh nisl vel felis. Proin ac hendrerit ex. In tempor, lacus nec pulvinar gravida, libero est cursus justo, vitae rhoncus massa enim sed diam. Sed in porttitor metus.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Nunc auctor auctor pulvinar. Curabitur porttitor dui et tempor sodales. In dapibus ex sit amet neque aliquam, sit amet feugiat neque euismod. Sed lobortis dictum nunc eu porta. Donec quis enim eget magna sagittis facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eget ex blandit, malesuada dui nec, congue nulla. Curabitur id lectus magna. Praesent lobortis vehicula justo, ut interdum tortor pellentesque et. Quisque ullamcorper odio lectus, a congue enim rhoncus vitae. </p>
      </div>
</section>

  <div class="container"></div>

	<section id="learn">
		<h2>Learn How To Make Your Own Logo</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra nunc risus, eget mollis est luctus quis. Nunc venenatis non arcu non lacinia. Cras non diam eu sapien viverra hendrerit sed ut magna. Quisque imperdiet et quam in scelerisque. Nam vestibulum ornare tristique. Aenean auctor ante eu felis ullamcorper commodo. Aenean cursus pretium risus sed suscipit. Proin venenatis tellus enim, a rhoncus mi venenatis vitae. Nullam condimentum magna tristique, sagittis odio eget, eleifend quam. Nulla facilisi. Cras hendrerit, quam id pretium accumsan, turpis elit egestas odio, id mattis orci lorem quis ex. Mauris euismod lacinia convallis. Fusce nibh sem, tincidunt nec blandit eu, gravida non est.</p>

      <p>Etiam sit amet ligula sed augue molestie mattis a sit amet lorem. Cras sit amet turpis ullamcorper, feugiat sem sed, feugiat justo. Fusce sed diam sagittis ipsum blandit faucibus. Aenean semper vitae mauris id interdum. Donec quis risus eu turpis imperdiet viverra non vitae enim. In bibendum erat sem, ut elementum massa tincidunt sit amet. Praesent tempor malesuada urna, quis consectetur lacus congue mollis. Aliquam aliquam enim sed consequat maximus. Mauris volutpat quam sit amet feugiat euismod. Vivamus et ex nibh. Nam placerat ornare velit ut mattis. </p>
      <iframe
      id="video"
      width="560"
      height="315"
      src="https://www.youtube.com/embed/9AxIW39TeAk"
      title="YouTube video player"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen>
      </iframe>

	</section>

  <div class="container"></div>

	<section id="contact-us">
		<h2>Contact Us</h2>
    <p class="subscribe">Subscribe to our newsletter</p>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input
        name="email"
        id="email"
        type="email"
        placeholder="Enter your email"
      />
      <input id="submit" type="submit" value="Subscribe" class="btn" />
    </form>
	</section>

  <div class="container"></div>

  <section id="social-media">
      <h2 class="follow-us">Follow Us</h2>

      <div class="icon">
        <ul class="social-media">
          <li class="social-icons">
            <a href="https://www.facebook.com/" target="blank" role="button" title="Follow us on Facebook">
              <i id="fb" class="fab fa-facebook-square"></i>
            </a>
          </li>
          <li class="social-icons">
            <a href="https://twitter.com/" target="blank" role="button" title="Follow us on Twitter">
              <i id="twitter" class="fab fa-twitter"></i>
            </a>
          </li>
          <li class="social-icons">
            <a href="https://www.instagram.com/" target="blank" role="button" title="Follow us on Instagram">
              <i id="insta" class="fab fa-instagram"></i>
            </a>
          </li>
          <li class="social-icons">
            <a href="https://www.whatsapp.com/" target="blank" role="button" title="Join our WhatsApp Group">
              <i id="wa" class="fab fa-whatsapp"></i>
            </a>
          </li>
        </ul>
      </div>
  </section>
</div>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
              
            
!

CSS

              
                @import 'https://fonts.googleapis.com/css2?family=Comfortaa&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&display=swap';

:root {
  --light-gray: #727272;
  --dark-gray: #2e2e2e;
  --hover-gray: #3a3a3a;
  --very-light-gray: #e0d8cc;
  --very-dark-gray: #1b1b1b;
  --lighter-gray: #c2b49f;
  --gray-gradiant: linear-gradient(to right, black, gray)
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: var(--very-dark-gray);
  background-color: var(--very-light-gray);
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
}
#page-wrapper {
  position: relative;
  background-color: var(--very-light-gray);
}
.nav li {
  list-style: none;
  background-color: var(--lighter-gray);
}
@media screen and (max-width: 600px) {
  li {
    font-size: 5vw;
  }
}
ul.nav {
  background-color: var(--lighter-gray);
}
header {
  position: fixed;
  top: 0;
  max-height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: var(--lighter-gray);
  padding: 10px;
  min-width: 100%;
  box-shadow: 1px 1px 10px black;
}
@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}
#header-img {
  background: transparent;
}
.logo {
  background: transparent;
}
@media (max-width: 600px) {
  .logo {
    width: 100%;
    position: relative;
  }
}

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 20px;
}
@media (max-width: 600px) {
  .logo > img {
    margin: 0 auto;
    width: 50%;
    height: 50%;
  }
}
a.nav-link {
  color: var(--very-dark-gray);
  background-color: var(--lighter-gray);
  list-style: none;
  font-size: 1.1rem;
  transition: 0.1s;
}
a.nav-link:hover {
  font-size: 130%;
}
@media screen and (max-width: 600px) {
  a.nav-link {
    padding: 10 0 10 0;
    font-size: 0.9rem;
  }
}
@media screen and (max-width: 600px) {
  a.nav-link:hover {
    font-size: inherit;
    
  }
}
a {
  text-decoration: none;
}

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

nav {
  font-weight: 600;
  background-color: var(--lighter-gray);
}
@media (max-width: 600px) {
  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0px 3px 5px black;
  }
  nav li {
    padding-bottom: 5px;
  }
}
nav > ul.nav {
  background-color: var(--lighter-gray);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  align-items: flex-end;
}
@media (max-width: 600px) {
  nav > ul.nav {
    flex-direction: row;
    align-items: center;
    width: 95vw;
  }
}
section {
  display: block;
}
#example {
  width: 50%;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}
#example:hover {
  opacity: 0.7;
}
.logo-eg-class {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 100px; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: #000000;
}
.modal-content-class {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 1000px;
}
#modal-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  background-color: #1b1b1b;
  color: #ccc;
  padding: 10px 0;
  height: 50px;
  font-size: 1.5rem;
}
.modal-content-class, #modal-caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoon {
  from {-webkit-transform:scale(0)}
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform: scale(1)}
}

.close-modal {
  background-color: transparent;
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-modal:hover, 
.close-modal:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
@media only screen and (max-width: 600px) {
  .modal-content-class {
    width: 100%;
  }
}
#custom-designs {
  text-align: center;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 80px;
  padding-top: 110px;
}
#custom-designs > h2 {
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  #custom-designs {
    margin-top: 150px;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 150px;
  }
}

#learn {
  text-align: center;
  margin-left: 20%;
  margin-right: 20%;
  padding-top: 110px;
}
#learn > h2 {
  margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
  #learn {
    flex-wrap: wrap;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 150px;
  }
}
iframe {
  margin-top: 50px;
  display: inline-flex;
  max-width: 560px;
  width:100%;
  border: none;
}
@media screen and (max-width: 600px) {
  iframe {
    width: 90vw;
    display: flex;
  }
}
#contact-us {
  text-align: center;
  margin-left: 20%;
  margin-right: 20%;
  padding-top: 120px;
}
@media (max-width: 600px) {
  #contact-us {
    flex-wrap: wrap;
  }
}
#form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
p {
  margin-top: 20px;
}
#social-media > h2 {
  text-align: center;
  margin-top: 1em;
  font-weight: 600;
  font-size: 1.3rem;
}
.social-media {
  list-style: none;
  margin-bottom: 50px;
  padding: 20px;
  text-align: center;
  background-color: var(--very-light-gray);
}
.social-icons {
  display: inline-block;
}
i {
  font-size: 2rem;
}
h2 {
  font-size: 2rem;
}
@media screen and (max-width: 600px) {
  h2 {
    font-size: 1.5rem;
  }
}
.btn {
  margin-top: 10px;
  border: none;
  width: 150px;
  height: 30px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--lighter-gray);
  box-shadow: 0px 2px 10px #1b1b1b;
  transition: 0.2s;
  text-transform: uppercase;
  border-radius: 10px;
}
.btn:hover {
  color: var(--very-light-gray);
  background-color: var(--very-dark-gray);
  box-shadow: 0px 2px 10px white;
}
#email {
  height: 30px;
  width: 500px;
  transition: 0.3s;
  text-align: center;
}
@media screen and (max-width: 600px) {
  #email {
    width: 200px;
  }
}
#fb {
  transition: 0.3s;
}
#twitter {
  transition: 0.3s;
}
#insta {
  transition: 0.3s;
}
#wa {
  transition: 0.3s;
}
#fb:hover {
 color: #065FB5;
 size: 120%;
}
#twitter:hover {
  color: #065FB5;
}
#insta:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#wa:hover {
  color: #25D366;
}
p.subscribe {
  font-size: 1.5rem;
}
::placeholder {
  text-align: center;
  color: black;
}
input:hover {
  background-color: var(--lighter-gray);
}
.follow-us {
  animation: follow-us;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes follow-us {
  0%{color: #000}
  50%{color: #0059ff}
  100%{color: #000}
}

              
            
!

JS

              
                var modal = document.getElementById("logo-eg-id");

var img = document.getElementById("example");
var modalImg = document.getElementById("modal-content-id");
var captionText = document.getElementById("modal-caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close-modal")[0];

span.onclick = function() {
    modal.style.display = "none";
  }

              
            
!
999px

Console