Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <!-- Start Header -->
<nav class="navbar" id="navbar">
  <div class="container">
    <a href="#" class="logo">portfolio</a>
    <div class="nav-links">
      <a href="#welcome-section" class="fill">home</a>
      <a href="#projects" class="fill">projects</a>
      <a href="#contact" class="fill">contact</a>
      <div class="toggle-menu scale-effect">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <div class="toggle-menu scale-effect">
      <i class="fas fa-bars"></i>
    </div>
  </div>
</nav>
<!-- Landing Section -->
<section class="landing" id="welcome-section">
  <div class="container">
    <div class="text">
      <h1>welcome to my portfolio.</h1>
      <span>I'm front end developer which is cool.!</span>
      <p>I have made up this portfolio for puplishing my projects into it so feel free to explorer it and don't forget to give me your feedbacks. your feedbacks will make this portfolio much more and more better.!</p>
      <div class="btns-group">
        <a href="#projects" class="btn btn-primary">let's explorer</a>
      </div>
    </div>
    <div class="image">
      <img src="https://image.freepik.com/free-vector/web-development-programmer-engineering-coding-website-augmented-reality-interface-screens-developer-project-engineer-programming-software-application-design-cartoon-illustration_107791-3863.jpg" alt="Coding Illsturation">
    </div>
  </div>
</section>
<!-- Projects Section -->
<section class="projects" id="projects">
  <h2 class="section-title fill">Projects</h2>
  <div class="container">
    <div class="projects-content">
      <div class="project">
        <div class="project-image">
          <img src="https://images.unsplash.com/photo-1498049860654-af1a5c566876?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="Project Image">
        </div>
        <div class="project-details">
          <h3 class="project-tile">project name</h3>
          <p class="project-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, quos recusandae. Vitae hic sit accusantium!</p>
          <div class="btns-group">
            <a href="#" class="btn btn-primary">view project</a>
          </div>
        </div>
      </div>
      <div class="project">
        <div class="project-image">
          <img src="https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80" alt="Project Image">
        </div>
        <div class="project-details">
          <h3 class="project-tile">project name</h3>
          <p class="project-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, quos recusandae. Vitae hic sit accusantium!</p>
          <div class="btns-group">
            <a href="#" class="btn btn-primary">view project</a>
          </div>
        </div>
      </div>
      <div class="project">
        <div class="project-image">
          <img src="https://images.unsplash.com/photo-1516542076529-1ea3854896f2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1171&q=80" alt="Project Image">
        </div>
        <div class="project-details">
          <h3 class="project-tile">project name</h3>
          <p class="project-description">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio, quos recusandae. Vitae hic sit accusantium!</p>
          <div class="btns-group">
            <a href="#" class="btn btn-primary">view project</a>
          </div>
        </div>
      </div>
    </div>
    <div class="more-projects">
      <a href="https://codepen.io/FedLover/" target="_blank" class="btn btn-primary" id="profile-link">show more <i class="fas fa-chevron-right"></i></a>
    </div>
  </div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
  <h2 class="section-title fill">Contact</h2>
  <p class="description">send me your feedbacks here and your opinions about this portfolio and remember to be <span class="special">nice</span> <i class="fas fa-heart"></i>.</p>
  <div class="container">
    <form action="#" enctype="multipart/form-data" method="post">
      <div class="field">
        <label for="first-name">first name</label>
        <input type="text" id="first-name" placeholder="First name" required>
      </div>
      <div class="field">
        <label for="last-name">last name</label>
        <input type="text" id="last-name" placeholder="Last name">
      </div>
      <div class="field">
        <label for="email-name">email</label>
        <input type="text" id="email-name" placeholder="Email" required>
      </div>
      <textarea name="user-opinion" placeholder="Your Message..."></textarea>
      <input type="submit" value="Send Feedback" class="btn btn-primary">
    </form>
  </div>
</section>
<!-- Footer -->
<footer class="footer">
  <div class="container">
    <p>personal portfolio for responsive web design course certificate by <a href="https://www.freecodecamp.org/learn/responsive-web-design/">freeCodeCamp</a> website.</p>
    <p>&copy; <a href="https://www.freepik.com" target="_blank">Freepik</a> & <a href="https://www.unsplash.com">Unsplash</a></p>
  </div>
</footer>
              
            
!

CSS

              
                /* Start Global Rules */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
}
*::placeholder {
  font-size: 15px;
  font-family: "poppins", sans-serif;
  font-weight: 500;
}
:root {
  --f-transition: 0.2s; /*  Fast Transition */
  --main-transition: 0.3s; /* Main Transition */
  --m-transition: 0.4s; /* Medium Transition */
  --s-transition: 0.5s; /* Slow Transition */
  --header-height: 60px;
  --sections-padding: 60px;
  --main-color: hsl(206, 92%, 46%);
  --second-color: hsl(247, 74%, 63%);
  --third-color: hsl(179, 100%, 40%);
  --light-main-color: hsl(206, 92%, 50%);
  --light-second-color: hsl(247, 74%, 67%);
  --light-third-color: hsl(179, 100%, 44%);
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
}
a {
  text-decoration: none;
}
a:active {
  transform: scale(0.91);
  transition: transform var(--f-transition);
}
p {
  line-height: 1.5;
}
ul,
ol {
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
  background-size: cover;
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
}
/* Small Screens */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
/* Medium Screens */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
/* Large Screens */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
/* End Global Rules */

/* Start Utility Classes */
.btn {
  text-transform: capitalize;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  padding: 6px 15px;
  transition: var(--main-transition), background-color var(--f-transition);
}
.btn-primary {
  background: var(--third-color);
  color: #fff;
}
.btn-primary:hover {
  background: var(--light-third-color);
}
.scale-effect:active {
  transform: scale(0.88);
  transition: transform var(--f-transition);
}
.fill::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: -6px;
  width: 0;
  height: 3px;
  background: var(--second-color);
  transition: var(--main-transition);
}
.fill:hover::after {
  width: 100%;
}
.section-title {
  width: fit-content;
  max-width: 400px;
  margin: auto;
  margin-bottom: 50px;
  position: relative;
  text-transform: capitalize;
  font-weight: bold;
  font-size: 35px;
  color: var(--main-color);
  cursor: pointer;
}
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 40px;
  }
}
.btns-group {
  margin-top: 20px;
  display: flex;
  text-align: center;
  gap: 10px;
}
/* End Utility Classes */

/* Start Header */
.navbar {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 15px 0;
  background: #fff;
  z-index: 99;
  border-bottom: 1px solid aliceblue;
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.navbar .logo {
  color: var(--main-color);
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}
.navbar .logo:active {
  transform: scale(1);
}
.nav-links {
  transition: var(--main-transition);
}
.nav-links.active {
  opacity: 1;
  visibility: visible;
  transform: translatey(0);
}
@media (max-width: 992px) {
  .nav-links {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translatex(100%);
    opacity: 0;
    visibility: hidden;
  }
}
.nav-links a {
  position: relative;
  display: inline-block;
  text-transform: capitalize;
  margin-right: 25px;
  color: var(--second-color);
  font-weight: 500;
  font-size: 16px;
}
@media (max-width: 992px) {
  .nav-links a {
    margin-right: 0;
    margin-bottom: 25px;
    font-size: 20px;
  }
}
.nav-links .toggle-menu {
  position: absolute;
  top: 15px;
  right: 20px;
}
.navbar .toggle-menu {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: var(--second-color);
  font-size: 22px;
  cursor: pointer;
  display: none;
  transition: var(--main-transition);
}
@media (max-width: 992px) {
  .navbar .toggle-menu {
    display: block;
  }
}
/* End Header */

/* Start Landing Section */
.landing {
  height: 100vh;
}
.landing .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  height: 100%;
}
.landing .text {
  text-align: start;
  flex: 1;
}
@media (max-width: 992px) {
  .landing .text {
    text-align: center;
  }
}
.landing .text h1 {
  font-size: 40px;
  text-transform: capitalize;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--main-color);
}
@media (max-width: 1200px) {
  .landing .text h1 {
    font-size: 36px;
  }
}
@media (max-width: 500px) {
  .landing .text h1 {
    font-size: 30px;
  }
}
.landing .text span {
  font-size: 18px;
  text-transform: capitalize;
  color: var(--second-color);
  font-weight: 500;
}
@media (max-width: 992px) {
  .landing .text span {
    font-size: 17px;
  }
}
.landing .text p {
  margin-top: 14px;
  max-width: 600px;
  line-height: 1.7;
  font-size: 17px;
}
@media (max-width: 992px) {
  .landing .text p {
    font-size: 16px;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 992px) {
  .landing .btns-group {
    justify-content: center;
  }
}
.landing .image {
  flex: 0.85;
  z-index: -1;
}
@media (max-width: 992px) {
  .landing .image {
    display: none;
  }
}
/* End Landing Section */

/* Start Projects */
.projects {
  padding-top: var(--sections-padding);
  padding-bottom: var(--sections-padding);
  background: aliceblue;
}
.projects-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.projects-content .project {
  position: relative;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
}
.project .project-details {
  padding: 15px;
  text-align: start;
  color: #000;
}
.project .project-tile {
  text-transform: capitalize;
  margin-bottom: 8px;
  color: var(--main-color);
  font-size: 22px;
  font-weight: 600;
}
.project .project-description {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}
.project .btn {
  font-weight: 500;
  padding: 5px 10px;
  font-size: 15px;
}
.projects .more-projects {
  text-align: center;
}
.projects .more-projects a {
  display: inline-block;
  white-space: nowrap;
  margin: 80px auto 0;
}
.projects .more-projects .btn-primary {
  background: var(--second-color);
}
.projects .more-projects .btn-primary:hover {
  background: var(--light-second-color);
}
.projects .more-projects i {
  margin-left: 2px;
  transform: translateX(0);
  transition: var(--main-transition);
}
.projects .more-projects:hover i {
  transform: translateX(4px);
}
/* End Projects */

/* Start contact */
.contact {
  padding-top: var(--sections-padding);
  padding-bottom: var(--sections-padding);
}
.contact .description {
  text-transform: capitalize;
  font-size: 20px;
  text-align: center;
  max-width: 70%;
  margin: 0 auto;
  color: var(--light-second-color);
}
@media (max-width: 992px) {
  .contact .description {
    max-width: 100%;
    font-size: 18px;
  }
}
.contact form {
  width: 70%;
  margin: 40px auto;
}
@media (max-width: 992px) {
  .contact form {
    width: 100%;
    margin: 40px auto;
  }
}
.contact form .field {
  margin-bottom: 15px;
}
.contact form label {
  display: block;
  text-transform: capitalize;
  font-weight: 500;
  margin-bottom: 4px;
}
.contact form input,
.contact form textarea {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px 12px;
  font-size: 18px;
  border-radius: 4px;
  transition: var(--f-transition);
}
input[type="text"]:focus,
textarea:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.1rem rgb(0 123 255 / 25%);
}
.contact form textarea {
  resize: vertical;
  min-height: 220px;
  font-family: inherit;
}
.contact form input[type="submit"] {
  border: none;
  width: fit-content;
  max-width: 400px;
  cursor: pointer;
  margin-top: 5px;
}
/* End contact */

/* Start Footer */
.footer {
  background: aliceblue;
  padding: 15px 0;
  text-transform: capitalize;
  text-align: center;
  color: var(--main-color);
  font-size: 17px;
}
.footer a {
  font-weight: 500;
  color: var(--second-color);
}
/* End Footer */

              
            
!

JS

              
                /*
    Global Variables
*/
let toggleMenu = document.querySelectorAll(".navbar .toggle-menu");
let navLinks = document.querySelector(".nav-links");
let links = document.querySelectorAll(".nav-links a");

/*
    Main Function
*/
function toggleLinks(ourArray, ourFubction) {
  ourArray.forEach((element) => {
    element.addEventListener("click", () => {
      ourFubction();
    });
  });
}
/*
    Show & Hide Links Sidebar
*/
function toggleNavLinks() {
  navLinks.classList.toggle("active");
}

toggleLinks(toggleMenu, toggleNavLinks);
toggleLinks(links, toggleNavLinks);

              
            
!
999px

Console