Build a Responsive Mobile First Landing Page - using HTML CSS and SASS

Hello Friends,

In this tutorial we will create a Responsive Photography landing page using HTML and CSS, but will have a Mobile First Approach to it.

We will also use the following Technologies to achieve our design:

Flex box for the page responsive layouts.

Font Awesome for the Icons.

Google Fonts for the font style.

Visual Studio Code as our Text/Code editor.

and Unsplash for our Images

Aldo you don’t have to but I am going to use SASS to style our page just because it is quick , now you don’t have to , you can and will achieve the same result using CSS and I am going to also have the generated CSS and SASS code down in the description below so you can just downloaded it.
But if you want to use SASS and you are not that familiar with it, I have an entire Crash Course on SASS and hot to sett it up on my YouTube canal and I am going to also leave a link to the video in the description below then

Now lets take a look at our finished project

In our header section, or basically the first thing that the user will see on his Mobile, will be a page split up in to two Sides, on the left side will be the Artist Name, the company name and also a button with to effects, over and scale. On the right side we will just have a image . Now bought side will have a animation at the start but with different speeds.

After that we will have our Main section with our Portfolio of images

And in the footer section we will have out contact info and our social media links, and that’s pritte much it because I wanted to keep the design simple.

Ok guys, before we get started, if you enjoy my content and you whant to see more, then don’t forget to subscribe to my YouTube Canal and click on the notification bell in order to get notified when ever I post new content.

Also if you like this video hit that like button and share it with others because this really helps me out by keeping me motivated and creating more content like this.

With this being sad, lets jump in to the video.

What is mobile-first design?

“Mobile-first design is a design philosophy that aims to create better experiences for users by starting the design process from the smallest of screens: mobile. Designing and prototyping your websites for mobile devices first helps you ensure that your users’ experience is seamless on any device.”

Code:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/dist/css/style.css" />
    <script
      src="https://kit.fontawesome.com/75e53ee709.js"
      crossorigin="anonymous"
    ></script>
    <title>Mobile First Responsive Web Site</title>
  </head>
  <body>
    <main id="main">
           <!-- Landing Area -->
      <header >
        <div id="header-text">
          <div id="header-text_content">
            <h1>Norbert BM</h1>
            <h2>Menyhart Media</h2>
            <h1></h1>
            <button class="btn">
              <i class="fas fa-book-open"></i
              ><a href="#Contact" id="view-work"> Contact </a>
            </button>
          </div>
        </div>
        <div id="header-image"></div>
      </header>

      <section id="images">
          <h2 id="Portfolio">Portfolio</h2>
        <img src="https://source.unsplash.com/1600x900/?model,water" />
        <div class="description">
          <h4>-- Photo One --</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
            tenetur.
          </p>
        </div>
        <img src="https://source.unsplash.com/1600x900/?model,trees" />
        <div class="description">
          <h4>-- Photo Two --</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
            tenetur.
          </p>
        </div>
        <img src="https://source.unsplash.com/1600x900/?model,flowers" />
        <div class="description">
          <h4>-- Photo Three --</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
            tenetur.
          </p>
        </div>
        <img src="https://source.unsplash.com/1600x900/?model,animals" />
        <div class="description">
          <h4>-- Photo Four --</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
            tenetur.
          </p>
        </div>
        <img src="https://source.unsplash.com/1600x900/?model,clouds" />
        <div class="description">
          <h4>-- Photo Five --</h4>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo,
            tenetur.
          </p>
        </div>
      </section>
    </main>

    <footer id="Contact">
      <h3>Contact us</h3>
      <div>
        Email: <i class="far fa-envelope"></i>
        <a href="https://www.gmail.com" target="_blank"
          >contact@menyhartMedia.test</a
        >
      </div>
      <div>
        Phone: <i class="fas fa-phone-volume"></i>
        <strong> 555-5555</strong>
      
      </div>
      <div id="Social_media-icons">
        Follow us: </i>
        <i class="fab fa-facebook"></i> <i class="fab fa-instagram"></i>  <i class="fab fa-twitter"></i
        > <i class="fab fa-youtube"></i>
        </div>
    </footer>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
*,
::before,
::after {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Montserrat", sans-serif;
  background: #fff;
}

a,
li {
  list-style: none;
  text-decoration: none;
}

h1 {
  font-weight: 400;
  font-size: 2.5rem;
  text-transform: uppercase;
}

h2 {
  font-weight: 400;
  font-size: 1.8rem;
  text-transform: capitalize;
}

img {
  display: block;
  width: 100%;
}

main {
  max-width: 900px;
  margin: auto;
  box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.description {
  padding: 2.5rem;
  text-align: center;
}

#Portfolio {
  padding: 1.5rem;
  text-align: center;
  background: #333;
  color: #fff;
}

header {
  text-shadow: 1px 4px 2px rgba(0, 0, 0, 0.1);
}

@keyframes anime {
  from {
    opacity: 0;
    left: -200px;
  }
  to {
    opacity: 1;
    left: 0px;
  }
}

#header-text {
  display: flex;
  flex: 0 1 40vw;
  height: 50vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  animation: anime 2s ease-in-out;
}

#header-text h2 {
  color: #666;
}

#header-image {
  background: url(https://source.unsplash.com/riLA6oy6ekM);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 50vh;
  flex: 0 1 60vw;
  margin: 0;
  animation: anime 6s ease-in-out;
}

.btn {
  padding: 0.5rem 2rem;
  border: 1px #ccc solid;
  display: inline-block;
  margin: 2rem 0;
  border-radius: 50px;
  outline: none;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
  background-color: #000;
}

.btn i {
  color: #fff;
}

.btn a {
  color: #fff;
}

.btn:hover {
  cursor: pointer;
  background-color: #555;
}

.btn:active {
  transform: scale(0.96);
  box-shadow: none;
}

.btn a {
  font-size: 1.2rem;
}

#Contact {
  text-align: center;
  padding: 2rem 1rem;
  margin: auto;
  color: #333;
  background-color: #fff;
  text-shadow: 1px 5px 2px rgba(0, 0, 0, 0.1);
}

#Contact h3 {
  font-size: 3rem;
  margin-bottom: 0;
}

#Contact div {
  padding: 0.25rem 0;
}

#Contact i {
  cursor: pointer;
}

#Contact .fa-facebook {
  color: #1877f2;
  cursor: pointer;
}

#Contact .fa-instagram {
  color: #c32aa3;
}

#Contact .fa-twitter {
  color: #1da1f2;
}

#Contact .fa-youtube {
  color: #ff0000;
}

/* Screen Sizes 500px and Higher */
@media (min-width: 500px) {
  header {
    display: flex;
    height: 100%;
  }
  #header-text {
    height: 100vh;
  }
  #header-image {
    height: 100vh;
  }
}

/* Screen Sizes 700px and Higher */
@media (min-width: 700px) {
  .btn {
    padding: 1rem 3rem;
  }
  #BW-label {
    padding: 1rem 3rem;
  }
}

input[type="checkbox"] {
  cursor: pointer;
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 35vw;
}

#Dark_Mode:checked ~ * {
  filter: invert(100);
}

#Dark_Mode::before {
  content: "Dark-Mode";
  width: 80px;
  display: flex;
  color: #fff;
  background-color: #333;
  padding: 10px 20px;
  cursor: pointer;
}

#Dark_Mode:checked::before {
  content: "Light-Mode";
  color: #333;
  background-color: #fff;
}

/*Prevent Dark M filter: invert for img`s*/
#images img {
  filter: inherit;
}

RL=style.css.map */

Build a Responsive Mobile First Landing Page – using HTML CSS and SASS

What is mobile-first design?

Code:

HTML

CSS

SASS

Style.scss

_main.scss

_header.scss

_footer.scss

_responsive.scss

Become a Web Developer !!

Web Development HTML CSS & JS a 2020 Beginner to Advance Course

Modern JavaScript and NodeJS from Beginner to Advanced Course

Advanced CSS & SASS: Framework, FlexBox, Grid, Animations Course

Like this:

Leave a Reply Cancel reply

What is mobile-first design?

Code:

HTML

CSS

SASS

Style.scss

_main.scss

_header.scss

_footer.scss

_responsive.scss

Become a Web Developer !!

Web Development HTML CSS & JS a 2020 Beginner to Advance Course

Modern JavaScript and NodeJS from Beginner to Advanced Course

Advanced CSS & SASS: Framework, FlexBox, Grid, Animations Course

Sharing means caring:

Like this:

Leave a Reply Cancel reply