Responsive Landing Page - RWD Project

A fully responsive landing page template showcasing mobile-first design principles and modern CSS techniques. Built with semantic HTML5 and CSS3 (SCSS) to demonstrate proficiency in responsive web design.

Main features:

• Fully responsive design adapting to mobile, tablet, and desktop screens
• Mobile-first CSS approach with progressive enhancement
• Pure CSS hamburger menu (no JavaScript required)
• Smooth animations and interactive hover effects
• Custom typography with multiple font weights
• Semantic HTML structure for better accessibility

 

💡 Technologies

 

💿 Installation

No installation required. Simply open index.html in your browser to view the project (remember to have "src" directory inside your root folder).

If you want to work with SCSS files, you'll need node and npm. Having them installed, type into the terminal: npm i.

You can also simply click this link to see live demo.

 

🤔 Solutions provided in the project

• Mobile-first responsive design - breakpoints implemented progressively from smallest to largest screens:

/* Base mobile styles */
.container {
  padding: 0 1em;
}

/* Tablet */
@media (min-width: 600px) {
  .container {
    padding: 0 3em;
  }
}

/* Desktop */
@media (min-width: 1280px) {
  .container {
    padding: 0 2em;
    max-width: 1600px;
  }
}

 

• Pure CSS hamburger menu - toggle functionality without JavaScript using CSS checkbox hack:

.heading__burger-checkbox:checked + .heading__menu-list {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #2C2C2C;
}

 

• Custom font implementation using @font-face with multiple weights for professional typography:

@font-face {
  font-family: Poppins;
  src: url('./../fonts/Poppins-Light.ttf');
  font-weight: 300;
  font-display: swap;
}

 

• BEM methodology - Block Element Modifier naming convention for maintainable and scalable CSS:

<section class="features row">
  <div class="features__container container">
    <div class="features__message cell">
      <!-- Block: features, Element: container, message -->
    </div>
  </div>
</section>

 

• SCSS mixins for theming - reusable color variations for pricing cards maintaining DRY principles:

@mixin pricing-card-color($colors) {
  @each $key, $color in $colors {
    &--#{$key} .pricing__price {
      color: $color;
    }
  }
}

.pricing__item {
  @include pricing-card-color($pricing-colors);
}

 

• Smooth transitions and hover effects enhancing user experience with visual feedback on interactive elements:

.heading__hero-btn {
  transition: scale 250ms ease-in-out;
}

.heading__hero-btn:hover,
.heading__hero-btn:focus-visible {
  scale: 1.1;
}

 

💭 Conclusions for future projects

Areas for improvement and further learning:

Font optimization:

/* Consider using variable fonts to reduce file size */
/* and improve loading performance */
@font-face {
  font-family: 'Poppins Variable';
  src: url('Poppins-Variable.woff2');
  font-weight: 100 900;
}

JavaScript enhancements:

Add intersection observer for scroll animations and lazy loading images to improve performance on slower connections.

 

👏 Thanks / Special thanks / Credits

Thanks to my Mentor - devmentor.pl – for providing me with this task and for code review.