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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <main>
      <header id="header">
        <div id="header-contents-wrapper">
          <div id="header-channel-logo-wrapper">
            <a
              id="header-img-link"
              class="remove-focus-outline channel-link"
              href="https://www.youtube.com/channel/UCGQWVs9xPkUTdH1r70cQ4Bg"
            >
              <img
                id="header-img"
                class="channel-img"
                src="https://raw.githubusercontent.com/Bryan123BG/Bryan-s_FCC-Product-Landing-Page/master/images/BPMc-Channel-profile-picture--1--circle.png"
                alt="BryanPlaysMinecraft! Channel Profile Picture"
              />
            </a>
            <h1 id="BPMc-h1" class="BPMc-logo-font">BryanPlayzMinecraft!</h1>
          </div>
          <nav id="nav-bar">
            <a class="remove-focus-outline nav-link" href="#about">About</a>
            <a class="remove-focus-outline nav-link" href="#featured-video"
              >Featured Video</a
            >
            <a class="remove-focus-outline nav-link" href="#ongoing-series"
              >Ongoing Series</a
            >
          </nav>
        </div>
      </header>
      <section id="email-form">
        <h2 id="email-form-heading">
          Get fresh
          <em class="emphasize--color">modded Minecraft let's plays</em> in your
          inbox!
        </h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input
            id="email"
            class="remove-focus-outline"
            type="email"
            placeholder="Enter your email address here"
            name="email"
            required
          />
          <input
            id="submit"
            class="remove-focus-outline"
            type="submit"
            value="Sign me up :D"
          />
        </form>
        <p id="email-form-note" class="small-note">
          P.S. This doesn't actually work; it's only for FCC project purpouses
          (uses their dummy link)
        </p>
      </section>
      <section id="about">
        <div id="about-contents-wrapper--1" class="about-contents-wrapper">
          <h2 id="about-heading">About</h2>
          <p>
            Hello, my name is Bryan and
            <em class="emphasize--color emphasize--bold"
              >I make clean Minecraft gameplay videos</em
            >. I used to make Hypixel Skywars videos but now I generally focus
            on Minecraft modpacks.
          </p>
          <p>
            The more recent videos are aimed to be
            <em class="emphasize--bold">focused</em>,
            <em class="emphasize--bold">concise</em>, and (hopefully)
            <em class="emphasize--bold">entertaining</em> let's plays, as said
            in the channel tagline.
          </p>
          <p>
            Thank you for checking out my channel and I hope you have a great
            time here watching my videos and interacting with me in the comments
            section :)
          </p>
          <p>~ Bryan123BG</p>
        </div>
        <div id="about-contents-wrapper--2a" class="about-contents-wrapper">
          <h3>Click below to go to my YouTube Channel!</h3>
          <a
            class="
              remove-focus-outline
              channel-link channel-link--about channel-link--about--BPMc
            "
            href="https://www.youtube.com/channel/UCGQWVs9xPkUTdH1r70cQ4Bg"
            ><img
              id="BPMc-YouTube-Channel-img"
              class="channel-img channel-img--about"
              src="https://raw.githubusercontent.com/Bryan123BG/Bryan-s_FCC-Product-Landing-Page/master/images/BPMc-Channel-profile-picture--1--circle.png"
              alt="BryanPlaysMinecraft! Channel Profile Picture"
          /></a>
          <p
            id="BPMc-YouTube-Channel-name"
            class="BPMc-logo-font YouTube-Channel-name"
          >
            BryanPlaysMinecraft!
          </p>
        </div>
        <div id="about-contents-wrapper--2b" class="about-contents-wrapper">
          <h3>Check out my other YouTube channel too :)</h3>
          <a
            class="
              remove-focus-outline
              channel-link channel-link--about channel-link--about--MRTP
            "
            href="https://www.youtube.com/channel/UC5ix3PcyKFl84_uxhH-KxeA"
            ><img
              id="MRTP-YouTube-Channel-img"
              class="channel-img channel-img--about"
              src="https://raw.githubusercontent.com/Bryan123BG/Bryan-s_FCC-Product-Landing-Page/master/images/MRTP-Channel-profile-picture--1--circle.png"
              alt="Minecraft Rail Transport Project Channel Profile Picture"
          /></a>
          <p
            id="MRTP-YouTube-Channel-name"
            class="MRTP-logo-font YouTube-Channel-name"
          >
            Minecraft Rail Transport Project
          </p>
        </div>
      </section>
      <section id="featured-video">
        <h2>Featured Video</h2>
        <div class="YouTube-video-wrapper">
          <iframe
            id="video"
            src="https://www.youtube.com/embed/EWQZUlvDfA0"
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </section>
      <section id="ongoing-series">
        <h2>Ongoing series</h2>
        <div class="YouTube-video-wrapper">
          <iframe
            id="playlist"
            src="https://www.youtube.com/embed/videoseries?list=PL81tbw2YkT1gGyWNLciS6psx0aXUkFkCF"
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </section>
    </main>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;1,500&family=Open+Sans:wght@400;700&display=swap");
/* I. Phone Styles */
/* Overarching div styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-padding-top: 7em;
}
body {
  width: 100%;
  min-height: 100%;
  background: hsl(127, 100%, 10%);
  display: flex;
  justify-content: center;
}
main {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section {
  position: relative;
  padding: 1em;
  width: 100%;
}
section::after {
  /* This is the small graphical element to separate sections */
  content: "";
  display: block;
  position: absolute;
  /* Centering to the middle */
  left: 50%; /* Brings the left side of the element to the middle */
  margin-left: -2.5em; /* Offset by half the width of element to center */
  bottom: -0.1em; /* Offset by half the height of the element so it's in the middle of both sections */
  height: 0.2em;
  width: 5em;
  background: hsl(127, 100%, 17%);
}
section:last-of-type::after {
  content: unset;
}
.remove-focus-outline:focus {
  outline: none;
}

/* Header */
header {
  z-index: 100;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 7em;
  width: 100%;
  background: hsl(127, 100%, 25%);
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.014),
    0 6.7px 5.3px rgba(0, 0, 0, 0.02), 0 12.5px 10px rgba(0, 0, 0, 0.025),
    0 22.3px 17.9px rgba(0, 0, 0, 0.03), 0 41.8px 33.4px rgba(0, 0, 0, 0.036),
    0 100px 80px rgba(0, 0, 0, 0.05);
}
#header-channel-logo-wrapper {
  display: flex;
  align-items: center;
}
#BPMc-h1 {
  margin: 0 0 0 1em;

  /* copy-pasted from FCC :D */
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
div#header-contents-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.7em 1em;
}
nav#nav-bar {
  display: grid;
  grid-template-rows: repeat(3, 2em);
}

/* General styling for channel profile picture that links to my YouTube Channel */
.channel-link,
.channel-img {
  display: inline-block;
  position: relative;
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}
.channel-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  border-radius: 50%;
  box-shadow: 0 1.4px 2.2px rgba(0, 0, 0, 0.056),
    0 3.3px 5.3px rgba(0, 0, 0, 0.081), 0 6.3px 10px rgba(0, 0, 0, 0.1),
    0 11.2px 17.9px rgba(0, 0, 0, 0.119), 0 20.9px 33.4px rgba(0, 0, 0, 0.144),
    0 50px 80px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s;
  transition-timing-function: ease-out;
}
.channel-link::after,
a.nav-link::after {
  content: "";
  position: absolute;

  width: 100%;
  height: 100%;
  opacity: 0;

  border: hsl(127, 80%, 80%) solid 0.15em;
  box-sizing: unset;

  transition: opacity 0.2s;
  transition-timing-function: ease-out;
}
.channel-link::after {
  top: -0.3em;
  left: -0.3em;
  border-radius: 50%;
  padding: 0.15em;
}
.channel-link:hover,
.channel-link:focus {
  transform: translateY(-0.1em);
}
.channel-link:hover::before,
.channel-link:focus::before,
.channel-link:hover::after,
.channel-link:focus::after,
a.nav-link:hover::after,
a.nav-link:focus::after {
  opacity: 1;
}
/* Specifics for the heading one */
a#header-img-link,
img#header-img {
  height: 3em;
}

a.nav-link {
  display: block;
  position: relative;
  align-self: center;
  text-align: right;
  color: white;
  text-decoration: underline 0.1em hsla(127, 100%, 95%, 0);
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}
a.nav-link::after {
  top: -0.35em;
  left: -0.5em;
  border-radius: 0.5em;
  padding: 0.2em 0.35em;
}
a.nav-link:hover,
a.nav-link:focus {
  /* text-decoration-color: hsl(127, 80%, 80%); */
  transform: translateY(-0.2em);
}

/* Email form section */
section#email-form {
  padding: 1.5em 1em 1em 1em;
  display: grid;
  grid-row-gap: 1.5em;
}
form#form {
  display: grid;
  grid-row-gap: 0.7em;
}
h2#email-form-heading {
  margin-bottom: unset;
}
/* Removing default form elements styles (iOS, etc. see from here: https://www.daretothink.co.uk/stop-ios-styling-your-input-fields-and-buttons/)  */
/* Note: intentionally separated since some of these CSS properties are browser specific and will break if combined together. */
input[type="email"],
input[type="submit"] {
  -webkit-appearance: none;
}
input[type="email"],
input[type="submit"] {
  -moz-appearance: none;
}
input[type="email"],
input[type="submit"] {
  appearance: none;
}
/* back to regular styling... */
input[type="email"],
input[type="submit"] {
  position: relative;
  border: none;
  padding: 0.7em;
  border-radius: 0.5em;
  transition: box-shadow 0.2s;
}
input[type="email"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  box-shadow: 0 0 0 0.2em hsl(127, 100%, 10%), 0 0 0 0.35em hsl(127, 100%, 35%);
}
input[type="submit"] {
  background-color: hsl(49, 100%, 50%);
  color: black;
  cursor: pointer;
  font-weight: 700;
  transition: box-shadow 0.2s, transform 0.2s, background-color 0.2s;
  transition-timing-function: ease-out;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
  transform: translateY(-0.2em);
  background-color: hsl(49, 100%, 65%);
}
input[type="submit"]:active {
  transform: translateY(0);
  background-color: hsl(49, 100%, 45%);
}

/* About section */
section#about {
  display: grid;
  grid-row-gap: 1em;
}
#about-contents-wrapper--2a,
#about-contents-wrapper--2b {
  grid-row-gap: 1em;
}
.channel-link--about,
.channel-img--about {
  height: 10em;
  width: 10em;
  align-self: center;
}
.channel-link--about::after {
  top: -0.6em;
  left: -0.6em;
  padding: 0.35em;
}
.channel-link--about--BPMc::after {
  border: hsl(127, 80%, 80%) solid 0.25em;
}
.channel-link--about--MRTP::after {
  border: hsl(212, 80%, 78%) solid 0.25em;
}
.channel-link--about:hover,
.channel-link--about:focus {
  transform: translateY(-0.25em);
}
.YouTube-Channel-name {
  align-self: center;
  z-index: 2;
}
.about-contents-wrapper {
  display: flex;
  flex-direction: column;
}

/* Featured video section & Ongoing series section */
section#featured-video,
section#ongoing-series {
  max-width: calc(560px + 4em);
  height: auto;
}

/* General font styles */
/* Font styles - Headings */
h1,
h2,
h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: white;
  margin-bottom: 0.3em;
}
h1 {
  font-size: 0.7rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.2rem;
}
/* Font styles - Paragraphs, links, input */
a,
p,
input {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
}
a,
p {
  color: white;
}
p {
  margin-bottom: 1em;
}
.BPMc-logo-font,
.MRTP-logo-font {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-align: center;
}
/* Miscellaneous */
p.small-note {
  font-size: 0.7rem;
  font-style: italic;
}
em.emphasize--color {
  color: hsl(127, 80%, 80%);
  font-style: normal;
}
em.emphasize--bold {
  font-weight: 700;
  font-style: normal;
}
/* Almost all copy-pasted from CSS Tricks */
.YouTube-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.YouTube-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border: none;
}

/* II. Tablet Styles */
@media (min-width: 600px) {
  /* Overarching div styles */
  * {
    scroll-padding-top: 5em;
  }
  section {
    padding: 2em;
    max-width: 50em;
  }
  /* Header */
  header {
    height: 5em;
  }
  #BPMc-h1 {
    position: unset;
    left: unset;
    width: unset;
    height: unset;
    top: unset;
    overflow: unset;
  }
  div#header-contents-wrapper {
    justify-content: space-between;
    align-items: center;
    height: 5em;
    padding: 0 2em;
    max-width: 50em;
  }
  nav#nav-bar {
    grid-auto-flow: column;
    grid-column-gap: 1.5em;
    grid-template-rows: unset;
  }

  /* Email form section */
  section#email-form {
    padding: 3em 2em 2em 2em;
    grid-template-areas:
      "h2 form"
      "note note";
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5em;
    grid-row-gap: 0.7em;
    max-width: 50em;
  }
  h2#email-form-heading {
    grid-area: h2;
  }
  form#form {
    display: grid;
    grid-area: form;
    width: 100%;
    height: min-content;
    align-self: center;
    justify-self: right;
    grid-row-gap: 0.7em;
    max-width: 20em;
  }
  input[type="email"],
  input[type="submit"] {
    padding: 0.7em 1em;
  }
  p#email-form-note {
    grid-area: note;
  }

  /* About section */
  section#about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2em;
    grid-template-areas:
      "about-text about-text"
      "BPMc MRTP";
  }
  div#about-contents-wrapper--1 {
    grid-area: about-text;
  }
  div#about-contents-wrapper--2a {
    grid-area: BPMc;
  }
  div#about-contents-wrapper--2b {
    grid-area: MRTP;
  }
}
/* Just to bump up that font size so that it doesn't look too small */
@media (min-width: 700px) {
  h1 {
    font-size: 1rem;
  }
}

@media (min-width: 1200px) {
  /* Overarching div styles */
  section {
    padding: 5em 2em;
    max-width: 65em;
  }
  /* Header */
  div#header-contents-wrapper {
    max-width: 65em;
  }
  /* Email form section */
  section#email-form {
    padding: 6em 2em 5em 2em;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 1.5em;
    grid-row-gap: 0.7em;
    max-width: 65em;
  }
  form#form {
    justify-self: center;
    grid-row-gap: 1em;
  }
  input[type="submit"] {
    padding: 1em 1.2em;
  }
  /* General font styles */
  h2 {
    font-size: 2.5em;
  }
}

/* 
Stuff that helped me make this website (not everything is included here... there's so much xD)
- Of course FCC and their example Product Landing Page
- FCC community and forums :)
- FCC Responsive Web Design Certification tutorials
Flexbox:
- CSS Tricks (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Grid:
- MDN Web Docs (https://developer.mozilla.org/en-US/docs/Glossary/Grid_Areas)
Miscleaneous:
- W3 schools (Circles in CSS: https://www.w3schools.com/howto/howto_css_circles.asp) (HTML em tag: https://www.w3schools.com/tags/tag_em.asp) (box shadow property: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp) (and many other ones...)
- Centering position: absolute elements (https://thoughtbot.com/blog/positioning#position)
- Sticky position (https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work)
- CSS Tricks (Fluid With Video: https://css-tricks.com/fluid-width-video/) (last of type: https://css-tricks.com/almanac/selectors/l/last-of-type/)
- Offsetting border (https://codepen.io/fxm90/pen/yNVeQm)
- Gave me idea of offsetting border: https://www.bestagencies.com/tools/outline-border-css-generator/
- *** Offsetting scrolling (https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/)
- Removing default form elements styles (iOS, etc. see from here: https://www.daretothink.co.uk/stop-ios-styling-your-input-fields-and-buttons/)
- Fonts taken from Google Fonts
- Google's color picker
- Quick google search of css box model
Transitions:
- CSS Tricks (Ease in and out: https://css-tricks.com/ease-out-in-ease-in-out/) (animating borders: https://css-tricks.com/animating-border/)
Shadows:
- How to animate box-shadow with silky smooth performance (https://tobiasahlin.com/blog/how-to-animate-box-shadow/)
- Smooth shadow generator (https://shadows.brumm.af/)
Acccessibility:
- WebAim contrast checker (https://webaim.org/resources/contrastchecker/)
- Alternatives when replacing outline (https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/)
- Semantic HTML (https://www.internetingishard.com/html-and-css/semantic-html/)
*/

              
            
!

JS

              
                
              
            
!
999px

Console