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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
  <ul class="nav-list">
    <li><a href="#welcome-section" class="nav-link" id="home">Home</a></li>
    <li><a href="#about" class="nav-link">About</a></li>
    <li><a href="#projects" class="nav-link">Work</a></li>
    <li><a href="#contact-section" class="nav-link">Contact</a></li>
  </ul>
</nav>

<section id="welcome-section">
  <div class="header">
    <h1>
      <small>Hello, I'm</small>
      <br>
      Junaid Shaikh
    </h1>
    <p>A web developer</p>
    <a href="#projects" class="theme-btn my-work">My work</a>
    <a href="#" class="theme-btn hire-me">Hire me</a>
  </div>
</section>

<section id="about">
  <h3 class="title">About Me</h3>
  <p>The name is Junaid Shaikh. My career objective is to work in the organization where I can use my skills to
    fullest to achieve organizatinal and personal goals.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque expedita dignissimos qui tempora ipsum
    officia, eum esse, nihil quaerat animi quis at aliquam, alias quod. Ut soluta architecto qui quas Lorem
    ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, perferendis veritatis unde velit quia
    laborum et minima itaque voluptate voluptatem est quae! Nostrum inventore cupiditate, mollitia commodi
    doloribus quos eveniet.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam eligendi voluptate maxime nemo? Soluta impedit
    rerum reiciendis, maiores voluptas quia labore, voluptatem esse rem, repellat non ad. Officiis, ex autem.
    Eaque facere, sapiente quae veniam blanditiis odio delectus suscipit at totam eligendi explicabo eius quas
    reiciendis voluptates fuga voluptas non, inventore in atque exercitationem, pariatur assumenda laborum
    commodi. At, nisi.
  </p>
  <a href="#" class="theme-btn cv">Download CV</a>
</section>

<section id="projects">
  <div class="box">
    <h3 class="title">Latest Work</h3>
    <div class="container">
      <div class="project project-tile">
        <a href="https://codepen.io/junaidshaikh_js/full/eYzbGOw" target="_blank">
          <img src="https://assets.codepen.io/5320265/internal/screenshots/pens/eYzbGOw.default.png?fit=cover&format=auto&ha=false&height=360&quality=75&v=2&version=1605340550&width=640" alt="Project">
          <h2><span>&lt;</span> Tribute Page <span>/&gt;</span></h2>
        </a>

      </div>

      <div class="project">
        <a href="https://codepen.io/junaidshaikh_js/full/abZXLQm" target="_blank">
          <img src="https://assets.codepen.io/5320265/internal/screenshots/pens/abZXLQm.default.png?fit=cover&format=auto&ha=false&height=360&quality=75&v=2&version=1605423350&width=640" alt="Project">
          <h2><span>&lt;</span> Survey Form <span>/&gt;</span></h2>
        </a>
      </div>

      <div class="project">
        <a href="https://codepen.io/junaidshaikh_js/full/yLJwmwp" target="_blank">
          <img src="https://assets.codepen.io/5320265/internal/screenshots/pens/yLJwmwp.default.png?fit=cover&format=auto&ha=true&height=360&quality=75&v=2&version=1605875036&width=640" alt="Project">
          <h2><span>&lt;</span> Product Landing Page <span>/&gt;</span></h2>
        </a>
      </div>
    </div>
  </div>
  <div class="show-all-btn">
    <a href="https://codepen.io/junaidshaikh_js/pens/public" class="theme-btn show-all" target="_blank">Show
      all</a>
  </div>
</section>

<section id="contact-section">
  <h3 class="title">Drop Me A Message</h3>
  <div class="contact-box">
    <div>
      <form action="" class="contact-form">
        <input type="text" name="name" id="name" placeholder="Name">
        <input type="email" name="email" id="email" placeholder="E-mail">
        <input type="text" name="subject" id="subject" placeholder="Subject">
        <textarea name="message" id="message" cols="30" rows="10" placeholder="Your Message"></textarea>
        <button class="theme-btn send">Send</button>
      </form>
    </div>

    <div class="last-box">
      <div class="address tile">
        <h2 class="contact-title add">Address:</h2>
        <p class="add">
          GCOEA,<br>
          Near Kathora Square,<br>
          Amravati, 444304 <br>
          Maharashtra,<br>
          India.
        </p>
      </div>
      <div class="phone tile">
        <h2 class="contact-title">Phone:</h2>
        <p>+91 3467890873</p>
        <p>+91 7890876556</p>
      </div>
      <div class="email tile">
        <h2 class="contact-title">Email:</h2>
        <p>junaidsk456@hotmail.com</p>
      </div>
    </div>
  </div>
</section>

<section class="social">
  <div>
    <h2 class="social-title">Connect with Me !</h2>
  </div>
  <div class="icon-box">
    <div class="icon">
      <a href="https://www.facebook.com/junaidsk0/" target="_blank">
        <i class="fab fa-2x fa-facebook-square"></i> Facebook</a>
    </div>
    <div class="icon">
      <a href="https://twitter.com/junaidshaikh_js" target="_blank">
        <i class="fab fa-2x fa-twitter"></i> Twitter</a>
    </div>
    <div class="icon">
      <a href="https://www.instagram.com/junaidshaikh_js/" target="_blank">
        <i class="fab  fa-2x fa-instagram"></i> Instagram</a>
    </div>
    <div class="icon">
      <a href="https://www.freecodecamp.org/junaidshaikh_js" target="_blank" id="profile-link">
        <i class="fab fa-2x fa-free-code-camp"></i> FCC</a>
    </div>
    <div class="icon">
      <a href="https://www.linkedin.com/in/junaidshaikhjs/" target="_blank">
        <i class="fab fa-2x fa-linkedin"></i> Linkedin</a>
    </div>
  </div>
</section>
              
            
!

CSS

              
                :root {
  --body-color: rgb(243, 234, 234);
  --primary-color: #ea3a60;
  --text-color: #5a5a5a;
  --icon-color: gray;
  --white-color: white;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  margin: 0px;
  margin-bottom: 2rem;
  padding: 0px;
  font-size: 1.6rem;
  font-family: "Baloo Bhai 2", sans-serif;
}

#navbar {
  max-width: 100%;
  background-color: var(--white-color);
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
  z-index: 100;
}

#navbar ul {
  padding: 0px;
  margin: 0px;
}

#navbar li {
  display: inline-block;
  margin: 2rem;
}

#navbar a {
  text-decoration: none;
  color: black;
  font-size: 2rem;
  font-weight: bold;
}

#navbar a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

@media only screen and (max-width: 850px) {
  #navbar li {
    margin: 1rem;
  }
}

#welcome-section {
  background-color: var(--body-color);
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.header h1 {
  font-size: 5rem;
  margin: 0px;
}

.header small {
  font-weight: 400;
  font-size: 80%;
}

.header p {
  font-size: 2.5rem;
  margin-bottom: 4rem;
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
}

.theme-btn {
  text-decoration: none;
  margin: 2rem;
  padding: 2rem 3rem;
  font-size: 1.4rem;
  line-height: 2rem;
  text-transform: uppercase;
  font-weight: bold;
}

.my-work {
  color: var(--white-color);
  border: var(--primary-color);
  background-color: var(--primary-color);
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.my-work:hover {
  background-color: #f10639;
}

.hire-me {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: var(--body-color);
  border-radius: 5px;
  transition: background-color, color 0.3s ease-in-out;
}

.hire-me:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
}

@media only screen and (max-width: 400px) {
  .theme-btn {
    margin: 1rem;
  }
}

#about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 70vw;
  margin: 1rem auto;
  visibility: hidden;
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    opacity: 0;
  }
  100% {
    visibility: visible;
    opacity: 1;
  }
}

.title {
  font-size: 5rem;
  text-decoration: underline;
  text-decoration-color: var(--primary-color);
}

#about p {
  font-size: 2rem;
  color: var(--text-color);
}

#about h3 {
  margin-bottom: 2rem;
}
.cv {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  background-color: var(--white-color);
  border-radius: 5px;
  transition: background-color, color 0.3s ease-in-out;
  margin: 2rem 0px;
}

.cv:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
}

@media only screen and (max-width: 850px) {
  #about {
    width: 80vw;
  }
}

#projects {
  background-color: #f8f9fa;
}

.box {
  width: 70vw;
  margin: 0px auto;
}

.box h3 {
  margin: 2rem 0px;
  padding-top: 10rem;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 3rem;
}

.project {
  background-color: var(--white-color);
  transition: transform 0.3s ease-in-out;
}

.container img {
  max-width: 100%;
  height: auto;
  padding: 1rem 1rem 0px 1rem;
}

.container h2 {
  font-size: 2rem;
  text-align: center;
  margin: 1rem;
  color: black;
}

.container a {
  text-decoration: none;
}

.container span {
  color: var(--primary-color);
}

.project:hover {
  transform: translateY(1rem);
}

.show-all {
  margin: 3rem auto;
  color: var(--white-color);
  border: var(--primary-color);
  background-color: var(--primary-color);
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

.show-all:hover {
  background-color: #f10639;
}

.show-all-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 850px) {
  .container {
    grid-template-columns: 1fr;
  }
  
  .box h3{
    padding-top: 5rem;
  }
}

#contact-section {
  width: 70vw;
  margin: 0px auto;
  margin-bottom: 8rem;
}

#contact-section h3 {
  padding-top: 8rem;
}

.contact-box {
  display: flex;
}

.contact-form {
  display: flex;
  flex-direction: column;
}

.contact-form input,
textarea {
  width: 50vw;
  margin: 1rem 0px;
  border-radius: 5px;
  background-color: #f8f9fa;
}

[placeholder] {
  padding: 1.2rem;
  font-size: 1.5rem;
}

.send {
  color: var(--white-color);
  border: var(--primary-color);
  background-color: var(--primary-color);
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
  margin: 0px;
  width: 10rem;
}

.send:hover {
  background-color: #f10639;
}

.last-box {
  margin-left: 4rem;
}

.address h2,
p {
  margin: 0;
}

.phone h2,
p {
  margin: 0;
}

.email h2, p{
  margin: 0;
}

@media only screen and (max-width: 850px) {
  .contact-box {
    flex-direction: column;
  }

  .contact-form input,
  textarea {
    width: 80vw;
  }

  .last-box {
    margin-left: 0px;
    margin-top: 3rem;
  }
  
  #contact-section{
    margin-left: 3rem;
  }
  #contact-section h3{
    padding-top: 5rem;
  }
}

.social {
  background-color: black;
  color: var(--icon-color);
}

.social-title {
  text-align: center;
  font-size: 4rem;
  margin: 5rem 0px 0rem 0px;
  padding-top: 5rem;
}

.icon-box {
  display: flex;
  justify-content: center;
}

.icon:hover {
  transform: scale(1.2);
}

.icon {
  margin: 3rem;
  font-size: 1.5rem;
  transition: transform 0.3s ease-in-out;
}

.icon a {
  text-decoration: none;
  color: var(--icon-color);
}

.icon a:hover {
  color: var(--primary-color);
}

@media only screen and (max-width: 530px) {
  .icon-box {
    flex-wrap: wrap;
  }

  .social-title {
    margin-top: 1rem;
  }
  .icon {
    margin: 2rem;
  }

  .title {
    font-size: 4rem;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console