Personal Portfolio 2.0

HTML

              
                <div class="scroll-up-btn">
  <i class="fas fa-angle-up"></i>
</div>
<nav class="navbar">
  <div class="max-width">
    <div class="logo"><a href="#">GoogolDKhan</a></div>
    <ul class="menu">
      <li><a href="#home" class="menu-btn">Home</a></li>
      <li><a href="#about" class="menu-btn">About</a></li>
      <li><a href="#services" class="menu-btn">Services</a></li>
      <li><a href="#skills" class="menu-btn">Skills</a></li>
      <li><a href="#teams" class="menu-btn">Teams</a></li>
      <li><a href="#contact" class="menu-btn">Contact</a></li>
    </ul>
    <div class="menu-btn">
      <i class="fas fa-bars"></i>
    </div>
  </div>
</nav>

<!-- HOME SECTION -->
<section class="home" id="home">
  <div class="max-width">
    <div class="home-content">
      <div class="text-1">Hello, my name is</div>
      <div class="text-2"><span>S</span>arfaraz <span>K</span>han</div>
      <div class="text-3">And I'm a <span class="typing"></span></div>
      <a href="https://github.com/GoogolDKhan" target="_blank"><i class="fab fa-github"></i> Github</a>
    </div>
  </div>
</section>

<!-- ABOUT SECTION -->
<section class="about" id="about">
  <div class="max-width">
    <h2 class="title">About me</h2>
    <div class="about-content">
      <div class="column left">
        <img src="https://i.ibb.co/519RzY5/Profile-Toon.jpg" alt="" />
      </div>
      <div class="column right">
        <div class="text">
          I am Sarfaraz and I'm a <span class="typing-2"></span>
        </div>
        <p>
          Graduated with a Bachelor's degree in Mechanical Engineering as I
          completed my final year research-based project on Computational
          Fluid Dynamic Analysis on Helical Coil Heat Exchanger using ANSYS
          Fluent software and completed 6 months industry internship at
          Water Resource Department. I worked at WirCab Machines as a design
          engineer where I got proficient with AutoCAD and SolidWorks. Now I
          am a Full-Stack Web Developer and exploring the world of
          programming.
        </p>
        <a href="https://drive.google.com/file/d/1nphjZ5DbAGzRQjQbm1TIZ2xN1CM1EPZV/view?usp=sharing" target="_blank">Download Resume</a>
      </div>
    </div>
  </div>
</section>

<!-- SERVICE SECTION -->
<section class="services" id="services">
  <div class="max-width">
    <h2 class="title">My services</h2>
    <div class="serv-content">
      <div class="card">
        <div class="box">
          <i class="fas fa-code"></i>
          <div class="text">Web Development</div>
          <p>
            Using Front-End libraries, I build fast, interactive websites. I
            use Node JS and Express app in Back-End side.
          </p>
        </div>
      </div>
      <div class="card">
        <div class="box">
          <i class="fas fa-industry"></i>
          <div class="text">CAD Design</div>
          <p>
            I have a working knowledge of drafting mechanical drawings and
            creating 3D models in SolidWork
          </p>
        </div>
      </div>
      <div class="card">
        <div class="box">
          <i class="fas fa-chart-bar"></i>
          <div class="text">Data Insights</div>
          <p>
            I am currently getting fimiliar with data science and machine
            learning technologies
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- SKILLS SECTION -->
<section class="skills" id="skills">
  <div class="max-width">
    <h2 class="title">My skills</h2>
    <div class="skills-content">
      <div class="column left">
        <div class="text">My skills & experiences.</div>
        <p>
          I am currently learning from curriculum of FreeCodeCamp and
          youtube channel CodeWithHarry.
        </p>
        <a href="https://www.freecodecamp.org/sarfarazkhan" target="_blank">FreeCodeCamp<i class="fab fa-free-code-camp"></i></a>
      </div>
      <div class="column right">
        <div class="bars">
          <div class="info">
            <span>Python, JavaScript</span>
            <span>70%</span>
          </div>
          <div class="line html"></div>
        </div>
        <div class="bars">
          <div class="info">
            <span>Front-End Development</span>
            <span>80%</span>
          </div>
          <div class="line css"></div>
        </div>
        <div class="bars">
          <div class="info">
            <span>Back-End Development</span>
            <span>65%</span>
          </div>
          <div class="line js"></div>
        </div>
        <div class="bars">
          <div class="info">
            <span>Database & Testing</span>
            <span>60%</span>
          </div>
          <div class="line php"></div>
        </div>
        <div class="bars">
          <div class="info">
            <span>3D-Modeling</span>
            <span>75%</span>
          </div>
          <div class="line mysql"></div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- TEAMS SECTION -->
<section class="teams" id="teams">
  <div class="max-width">
    <h2 class="title">My teams</h2>
    <div class="carousel owl-carousel">
      <div class="card">
        <div class="box">
          <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" />
          <div class="text">Sameer</div>
          <p>AI/ML Engineer</p>
        </div>
      </div>
      <div class="card">
        <div class="box">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="" />
          <div class="text">Riddhi</div>
          <p>Security Analyst at TCS</p>
        </div>
      </div>
      <div class="card">
        <div class="box">
          <img src="https://randomuser.me/api/portraits/men/34.jpg" alt="" />
          <div class="text">Prabhjot</div>
          <p>M.S in Industrial Engineering</p>
        </div>
      </div>
      <div class="card">
        <div class="box">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" />
          <div class="text">Sashant</div>
          <p>Assistant System Engineer at TCS</p>
        </div>
      </div>
      <div class="card">
        <div class="box">
          <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="" />
          <div class="text">Hrishikesh</div>
          <p>Analyst at Flex</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- CONTACT SECTION -->
<section class="contact" id="contact">
  <div class="max-width">
    <h2 class="title">Contact me</h2>
    <div class="contact-content">
      <div class="column left">
        <div class="text">Don't be shy</div>
        <p>
          Feel free to get in touch with me. I am always open to discussing
          new projects, creative ideas or opportunities to be part of your
          visions.
        </p>
        <div class="icons">
          <div class="row">
            <i class="fas fa-user"></i>
            <div class="info">
              <div class="head">Name</div>
              <div class="sub-title">Sarfaraz Khan</div>
            </div>
          </div>
          <div class="row">
            <i class="fas fa-map-marker-alt"></i>
            <div class="info">
              <div class="head">Address</div>
              <div class="sub-title">Mumbai, Maharashtra</div>
            </div>
          </div>
          <div class="row">
            <i class="fas fa-envelope"></i>
            <div class="info">
              <div class="head">Email</div>
              <div class="sub-title">googoldkhan@gmail.com</div>
            </div>
          </div>
        </div>
      </div>
      <div class="column right">
        <div class="text">Message me</div>
        <form action="#">
          <div class="fields">
            <div class="field name">
              <input type="text" placeholder="Name" required />
            </div>
            <div class="field email">
              <input type="email" placeholder="Email" required />
            </div>
          </div>
          <div class="field">
            <input type="text" placeholder="Subject" required />
          </div>
          <div class="field textarea">
            <textarea cols="30" rows="10" placeholder="Message.." required></textarea>
          </div>
          <div class="button-area">
            <button type="submit">Send message</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- FOOTER SECTION -->
<footer>
  <span>Created By
    <a href="https://github.com/GoogolDKhan" target="_blank"><span class="fab fa-github"></span> Sarfaraz Khan</a>
    | <span class="far fa-copyright"></span> 2021 All rights reserved.</span>
</footer>

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

/* custom scroll bar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* all similar content styling codes */
section {
  padding: 100px 0;
}

.max-width {
  max-width: 1300px;
  padding: 0 80px;
  margin: auto;
}

.about,
.services,
.skills,
.teams,
.contact,
footer {
  font-family: "Poppins", sans-serif;
}

.about .about-content,
.services .serv-content,
.skills .skills-content,
.contact .contact-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

section .title {
  position: relative;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 60px;
  padding-bottom: 20px;
  font-family: "Ubuntu", sans-serif;
}

section .title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 180px;
  height: 3px;
  background: #111;
  transform: translateX(-50%);
}

section .title::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  font-size: 20px;
  color: crimson;
  padding: 0 5px;
  background: #fff;
  transform: translateX(-50%);
}

/* navbar styling */
.navbar {
  position: fixed;
  width: 100%;
  z-index: 999;
  padding: 30px 0;
  font-family: "Ubuntu", sans-serif;
  transition: all 0.3s ease;
}

.navbar.sticky {
  padding: 15px 0;
  background: crimson;
}

.navbar .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .logo a {
  font-size: 35px;
  font-weight: 600;
  background: repeating-linear-gradient(
    -45deg,
    red 0%,
    yellow 7.14%,
    rgb(0, 255, 0) 14.28%,
    rgb(0, 255, 255) 21.4%,
    cyan 28.56%,
    blue 35.7%,
    magenta 42.84%,
    red 50%
  );
  background-size: 600vw 600vw;
  -webkit-text-fill-color: transparent;
  background-clip: border-box;
  -webkit-background-clip: text;
  animation: slide 8s linear infinite forwards;
}

@keyframes slide {
  0% {
    background-position-x: 0%;
  }

  100% {
    background-position-x: 600vw;
  }
}

.navbar.sticky .logo a {
  background: white;
  -webkit-text-fill-color: transparent;
  background-clip: border-box;
  -webkit-background-clip: text;
}

.navbar .menu li {
  list-style: none;
  display: inline-block;
}

.navbar .menu li a {
  display: block;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}

.navbar .menu li a:hover {
  color: crimson;
}

.navbar.sticky .menu li a:hover {
  color: #fff;
}

/* menu btn styling */
.menu-btn {
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  display: none;
}

.scroll-up-btn {
  position: fixed;
  height: 45px;
  width: 42px;
  background: crimson;
  right: 30px;
  bottom: 10px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  z-index: 9999;
  font-size: 30px;
  border-radius: 6px;
  border-bottom-width: 2px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.scroll-up-btn.show {
  bottom: 30px;
  opacity: 1;
  pointer-events: auto;
}

.scroll-up-btn:hover {
  filter: brightness(90%);
}

/* home section styling */
.home {
  display: flex;
  background: url("https://i.ibb.co/SPZD6fx/banner.jpg") no-repeat center;
  height: 100vh;
  color: #fff;
  min-height: 500px;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Ubuntu", sans-serif;
}

.home .max-width {
  width: 100%;
  display: flex;
}

.home .max-width .row {
  margin-right: 0;
}

.home .home-content .text-1 {
  font-size: 27px;
}

.home .home-content .text-2 {
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}

.home .home-content .text-2 span {
  color: crimson;
  transition: all 0.3s ease;
}

.home .home-content .text-3 {
  font-size: 40px;
  margin: 5px 0;
}

.home .home-content .text-3 span {
  color: crimson;
  font-weight: 500;
}

.home .home-content a {
  display: inline-block;
  background: crimson;
  color: #fff;
  font-size: 25px;
  padding: 12px 36px;
  margin-top: 20px;
  font-weight: 400;
  border-radius: 6px;
  border: 2px solid crimson;
  transition: all 0.3s ease;
}

.home .home-content a:hover {
  color: crimson;
  background: none;
}

/* about section styling */
.about .title::after {
  content: "who I am";
}

.about .about-content .left {
  width: 45%;
}

.about .about-content .left img {
  height: 400px;
  width: 400px;
  object-fit: cover;
  border-radius: 6px;
}

.about .about-content .right {
  width: 55%;
}

.about .about-content .right .text {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 10px;
}

.about .about-content .right .text span {
  color: crimson;
}

.about .about-content .right p {
  text-align: justify;
}

.about .about-content .right a {
  display: inline-block;
  background: crimson;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding: 10px 30px;
  margin-top: 20px;
  border-radius: 6px;
  border: 2px solid crimson;
  transition: all 0.3s ease;
}

.about .about-content .right a:hover {
  color: crimson;
  background: none;
}

/* services section styling */
.services,
.teams {
  color: #fff;
  background: #111;
}

.services .title::before,
.teams .title::before {
  background: #fff;
}

.services .title::after,
.teams .title::after {
  background: #111;
  content: "What I provide";
}

.services .serv-content .card {
  width: calc(33% - 20px);
  background: #222;
  text-align: center;
  border-radius: 6px;
  padding: 50px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.services .serv-content .card:hover {
  background: crimson;
}

.services .serv-content .card .box {
  transition: all 0.3s ease;
}

.services .serv-content .card:hover .box {
  transform: scale(1.05);
}

.services .serv-content .card i {
  font-size: 50px;
  color: crimson;
  transition: color 0.3s ease;
}

.services .serv-content .card:hover i {
  color: #fff;
}

.services .serv-content .card .text {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0 7px;
}

/* skills section styling */

.skills .title::after {
  content: "what I know";
}

.skills .skills-content .column {
  width: calc(50% - 30px);
}

.skills .skills-content .left .text {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.skills .skills-content .left p {
  text-align: justify;
}

.skills .skills-content .left a {
  display: inline-block;
  background: crimson;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 16px;
  margin-top: 20px;
  border-radius: 6px;
  border: 2px solid crimson;
  transition: all 0.3s ease;
}

.skills .skills-content .left a:hover {
  color: crimson;
  background: none;
}

.skills .skills-content .right .bars {
  margin-bottom: 15px;
}

.skills .skills-content .right .info {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  justify-content: space-between;
}

.skills .skills-content .right span {
  font-weight: 500;
  font-size: 18px;
}

.skills .skills-content .right .line {
  height: 5px;
  width: 100%;
  background: lightgrey;
  position: relative;
}

.skills .skills-content .right .line::before {
  content: "";
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  background: crimson;
}

.skills-content .right .html::before {
  width: 70%;
}

.skills-content .right .css::before {
  width: 80%;
}

.skills-content .right .js::before {
  width: 65%;
}

.skills-content .right .php::before {
  width: 60%;
}

.skills-content .right .mysql::before {
  width: 75%;
}

/* teams section styling */
.teams .title::after {
  content: "who with me";
}

.teams .carousel .card {
  background: #222;
  border-radius: 6px;
  padding: 25px 35px;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.teams .carousel .card:hover {
  background: crimson;
}

.teams .carousel .card .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.teams .carousel .card:hover .box {
  transform: scale(1.05);
}

.teams .carousel .card .text {
  font-size: 25px;
  font-weight: 500;
  margin: 10px 0 7px;
}

.teams .carousel .card img {
  height: 150px;
  width: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid crimson;
  transition: all 0.3s ease;
}

.teams .carousel .card:hover img {
  border-color: #fff;
}

.owl-dots {
  text-align: center;
  margin-top: 20px;
}

.owl-dot {
  height: 13px;
  width: 13px;
  margin: 0 5px;
  outline: none !important;
  border-radius: 50%;
  border: 2px solid crimson !important;
  transition: all 0.3s ease;
}

.owl-dot.active {
  width: 35px;
  border-radius: 14px;
}

.owl-dot.active,
.owl-dot:hover {
  background: crimson !important;
}

/* contact section styling */
.contact .title::after {
  content: "get in touch";
}

.contact .contact-content .column {
  width: calc(50% - 30px);
}

.contact .contact-content .text {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact .contact-content .left p {
  text-align: justify;
}

.contact .contact-content .left .icons {
  margin: 10px 0;
}

.contact .contact-content .row {
  display: flex;
  height: 65px;
  align-items: center;
}

.contact .contact-content .row .info {
  margin-left: 30px;
}

.contact .contact-content .row i {
  font-size: 25px;
  color: crimson;
}

.contact .contact-content .info .head {
  font-weight: 500;
}

.contact .contact-content .info .sub-title {
  color: #333;
}

.contact .right form .fields {
  display: flex;
}

.contact .right form .field,
.contact .right form .fields .field {
  height: 45px;
  width: 100%;
  margin-bottom: 15px;
}

.contact .right form .textarea {
  height: 80px;
  width: 100%;
}

.contact .right form .name {
  margin-right: 10px;
}

.contact .right form .field input,
.contact .right form .textarea textarea {
  height: 100%;
  width: 100%;
  border: 1px solid lightgrey;
  border-radius: 6px;
  outline: none;
  padding: 0 15px;
  font-size: 17px;
  font-family: "Poppins", sans-serif;
  transition: all 0.3s ease;
}

.contact .right form .field input:focus,
.contact .right form .textarea textarea:focus {
  border-color: #b3b3b3;
}

.contact .right form .textarea textarea {
  padding-top: 10px;
  resize: none;
}

.contact .right form .button-area {
  display: flex;
  align-items: center;
}

.right form .button-area button {
  color: #fff;
  display: block;
  width: 160px !important;
  height: 45px;
  outline: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  flex-wrap: nowrap;
  background: crimson;
  border: 2px solid crimson;
  transition: all 0.3s ease;
}

.right form .button-area button:hover {
  color: crimson;
  background: none;
}

/* footer section styling */
footer {
  background: #111;
  padding: 15px 23px;
  color: #fff;
  text-align: center;
}

footer span a {
  color: crimson;
  text-decoration: none;
}

footer span a:hover {
  text-decoration: underline;
}

/* responsive media query start */
@media (max-width: 1104px) {
  .about .about-content .left img {
    height: 350px;
    width: 350px;
  }
}

@media (max-width: 991px) {
  .max-width {
    padding: 0 50px;
  }
}

@media (max-width: 947px) {
  .menu-btn {
    display: block;
    z-index: 999;
  }

  .menu-btn i.active:before {
    content: "\f00d";
  }

  .navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: #111;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
  }

  .navbar .menu.active {
    left: 0;
  }

  .navbar .menu li {
    display: block;
  }

  .navbar .menu li a {
    display: inline-block;
    margin: 20px 0;
    font-size: 25px;
  }

  .home .home-content .text-2 {
    font-size: 70px;
  }

  .home .home-content .text-3 {
    font-size: 35px;
  }

  .home .home-content a {
    font-size: 23px;
    padding: 10px 30px;
  }

  .max-width {
    max-width: 930px;
  }

  .about .about-content .column {
    width: 100%;
  }

  .about .about-content .left {
    display: flex;
    justify-content: center;
    margin: 0 auto 60px;
  }

  .about .about-content .right {
    flex: 100%;
  }

  .services .serv-content .card {
    width: calc(50% - 10px);
    margin-bottom: 20px;
  }

  .skills .skills-content .column,
  .contact .contact-content .column {
    width: 100%;
    margin-bottom: 35px;
  }
}

@media (max-width: 690px) {
  .max-width {
    padding: 0 23px;
  }

  .home .home-content .text-2 {
    font-size: 60px;
  }

  .home .home-content .text-3 {
    font-size: 32px;
  }

  .home .home-content a {
    font-size: 20px;
  }

  .services .serv-content .card {
    width: 100%;
  }
}

@media (max-width: 500px) {
  .home .home-content .text-2 {
    font-size: 50px;
  }

  .home .home-content .text-3 {
    font-size: 27px;
  }

  .about .about-content .right .text,
  .skills .skills-content .left .text {
    font-size: 19px;
  }

  .contact .right form .fields {
    flex-direction: column;
  }

  .contact .right form .name,
  .contact .right form .email {
    margin: 0;
  }

  .right form .error-box {
    width: 150px;
  }

  .scroll-up-btn {
    right: 15px;
    bottom: 15px;
    height: 38px;
    width: 35px;
    font-size: 23px;
    line-height: 38px;
  }
}

JS

              
                $(document).ready(function () {
  $(window).scroll(function () {
    // sticky navbar on scroll script
    if (this.scrollY > 50) {
      $(".navbar").addClass("sticky");
    } else {
      $(".navbar").removeClass("sticky");
    }

    // scroll-up button show/hide script
    if (this.scrollY > 1600) {
      $(".scroll-up-btn").addClass("show");
    } else {
      $(".scroll-up-btn").removeClass("show");
    }
  });

  // slide-up script
  $(".scroll-up-btn").click(function () {
    $("html").animate({ scrollTop: 0 });
    // removing smooth scroll on slide-up button click
    $("html").css("scrollBehavior", "auto");
  });

  $(".navbar .menu li a").click(function () {
    // applying again smooth scroll on menu items click
    $("html").css("scrollBehavior", "smooth");
  });

  // toggle menu/navbar script
  $(".menu-btn").click(function () {
    $(".navbar .menu").toggleClass("active");
    $(".menu-btn i").toggleClass("active");
  });

  // typing text animation script
  var typed = new Typed(".typing", {
    strings: [
      "Mechanical Engineer",
      "Full Stack Developer",
      "Lifelong Learner",
      "Web Designer",
      "Freelancer"
    ],
    typeSpeed: 100,
    backSpeed: 60,
    loop: true
  });

  var typed = new Typed(".typing-2", {
    strings: [
      "Mechanical Engineer",
      "Full Stack Developer",
      "Lifelong Learner",
      "Web Designer",
      "Freelancer"
    ],
    typeSpeed: 100,
    backSpeed: 60,
    loop: true
  });

  // owl carousel script
  $(".carousel").owlCarousel({
    margin: 20,
    loop: true,
    autoplayTimeOut: 2000,
    autoplayHoverPause: true,
    responsive: {
      0: {
        items: 1,
        nav: false
      },
      600: {
        items: 2,
        nav: false
      },
      1000: {
        items: 3,
        nav: false
      }
    }
  });
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions