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

              
                <nav id="navbar">
  <div class="logo">StyleHouse</div>
  <ul class="nav-links">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

<div class="container">
  <section id="home">
    <div class="content">
      <div class="item">
        <h1>Unlock Your Style</h1>
      </div>
      <div class="item">
        <p>Discover a world of fashion that speaks to your unique personality. Our curated collection brings together the latest trends and timeless classics, helping you express yourself with confidence and flair.</p>
      </div>
      <div class="item">
        <a href="#" class="shop-now">Shop Now</a>
      </div>
    </div>
  </section>

  <section id="about">
    <img class="about-image" src="https://i.imghippo.com/files/uPJ1122gU.png" alt="About Us">
    <div class="content">
      <h2>About Company</h2>
      <p>Where style meets comfort! We are passionate about helping you find your perfect style. Our team of fashion experts carefully selects each piece to ensure quality, comfort, and trend-setting design.</p>
    </div>
  </section>

  <section id="portfolio">
    <div class="portfolio-content">
      <h2>Portfolio</h2>
      <p>Step into style</p>
      <div class="portfolio-categories">
        <span>High Heels</span>
        <span>Sneakers</span>
        <span>Flats</span>
        <span>Wedding Sandals</span>
      </div>
    </div>
    <div class="portfolio-grid">
      <img src="https://i.imghippo.com/files/bxH7897TnY.png" alt="Portfolio Image 1">
      <img src="https://i.imghippo.com/files/Lo8815iDQ.png" alt="Portfolio Image 2">
      <img src="https://i.imghippo.com/files/wwjs5560xCU.png" alt="Portfolio Image 3">
    </div>
  </section>

  <section id="contact">
    <div class="contact-details">
      <h2>Contact Us</h2>
      <p>Feel free to reach out to us:</p>
      <p>Email: info@styleunlock.com</p>
      <p>Phone: (555) 123-4567</p>
      <p>Address: 123 Fashion Street, Style City</p>
    </div>
    <div class="contact-form">
      <form>
        <input type="text" placeholder="Your Name" required>
        <input type="email" placeholder="Your Email" required>
        <textarea placeholder="Your Message" rows="5" required></textarea>
        <button type="submit">Send Message</button>
      </form>
    </div>
  </section>
</div>
              
            
!

CSS

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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

#navbar {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 5%;
  z-index: 1000;
  background-color: transparent;
  color: white;
}

#navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
}

#navbar .nav-links {
  display: flex;
  list-style: none;
}

#navbar .nav-links li {
  margin-left: 20px;
}

#navbar .nav-links a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease, transform 0.2s ease;
  position: relative;
  display: inline-block;
}

#navbar .nav-links a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: white;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

#navbar .nav-links a:hover {
  color: #ddd;
}

#navbar .nav-links a:hover::after {
  transform: scaleX(1);
}

section {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: start;
  padding: 0px 5%;
  scroll-snap-align: start;
}

#home {
  background: url("https://i.imghippo.com/files/zd6211Cs.png") center/cover
    no-repeat;
  color: white;
}

#home .content {
  padding: 2rem;
  border-radius: 10px;
  max-width: 400px;
  margin: 20px;
}

#home h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

#home .shop-now {
  display: inline-block;
  background-color: #ff6f61;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 1rem;
  transition: background-color 0.3s ease;
}

#home .shop-now:hover {
  background-color: #ff5040;
}

@keyframes staggerSlideIn {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#home .content .item {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.5s ease;
}

#home .content.active .item {
  animation: staggerSlideIn 1s ease forwards;
}

#home .content.active .item:nth-child(1) {
  animation-delay: 0.2s;
}
#home .content.active .item:nth-child(2) {
  animation-delay: 0.4s;
}
#home .content.active .item:nth-child(3) {
  animation-delay: 0.6s;
}

#about {
  background-color: black;
  color: white;
  display: flex;
  align-items: center;
}

.about-image {
  max-width: 300px;
  height: 300px;
  order: -1;
  margin-right: 2rem;

  transform: translateX(-100%);
  opacity: 0;
}

#about .content {
  flex: 1;
  transform: translateX(100%);
  opacity: 0;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#about .content.active {
  animation: slideInRight 1s ease forwards;
}

#about .about-image.active {
  animation: slideInLeft 1s ease forwards;
}

#portfolio {
  background-color: #8173b2;
  color: white;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#portfolio .portfolio-content {
  max-width: 800px;
  margin: 0px auto;
  opacity: 0;
  transform: translateY(-100%);
}

#portfolio h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

#portfolio .portfolio-categories {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

#portfolio .portfolio-categories span {
  margin: 0 15px;
  font-weight: bold;
}

#portfolio .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}

#portfolio .portfolio-grid img {
  width: 400px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

#portfolio .portfolio-grid img:hover {
  transform: scale(1.05);
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.portfolio-content.active {
  animation: slideDown 1s ease-out forwards;
}

.portfolio-grid.active img {
  animation: slideUp 1s ease-out forwards;
}

.portfolio-grid.active img:nth-child(1) {
  animation-delay: 0.2s;
}
.portfolio-grid.active img:nth-child(2) {
  animation-delay: 0.4s;
}
.portfolio-grid.active img:nth-child(3) {
  animation-delay: 0.6s;
}

#contact {
  background-color: #000;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#contact .contact-details {
  flex: 1;
  padding: 2rem;
  transform: translateX(-100%);
  opacity: 0;
}
#contact .contact-form {
  flex: 1;
  padding: 2rem;
  transform: translateX(100%);
  opacity: 0;
}

#contact .contact-details h2 {
  margin-bottom: 20px;
}

#contact .contact-details p {
  margin-bottom: 10px;
}

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

#contact .contact-form input,
#contact .contact-form textarea {
  margin-bottom: 15px;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

#contact .contact-form button {
  background-color: #ff6f61;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact .contact-form button:hover {
  background-color: #ff5040;
}

.contact-form.active {
  animation: slideInRight 1s ease forwards;
}

.contact-details.active {
  animation: slideInLeft 1s ease forwards;
}

              
            
!

JS

              
                // Smooth scrolling for navigation
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
  anchor.addEventListener("click", function (e) {
    e.preventDefault();
    document.querySelector(this.getAttribute("href")).scrollIntoView({
      behavior: "smooth"
    });
  });
});

const scrollContainer = document.querySelector(".container");

// using the snapChnaging event
scrollContainer.addEventListener("scrollsnapchanging", (event) => {
  const snapTarget = event.snapTargetBlock;

  if (snapTarget.children[0]) {
    snapTarget.children[0].classList.remove("active");
  }
  if (snapTarget.children[1]) {
    snapTarget.children[1].classList.remove("active");
  }
});

// using the snapChange event
scrollContainer.addEventListener("scrollsnapchange", (event) => {
  const snapTarget = event.snapTargetBlock;

  if (snapTarget.children[0]) {
    snapTarget.children[0].classList.add("active");
  }
  if (snapTarget.children[1]) {
    snapTarget.children[1].classList.add("active");
  }
});

              
            
!
999px

Console