I saw an interesting responsive layout on YouTube a few days ago, and then followed the video to learn. I found that I really could only follow the video to learn, but without the video, I had no idea. Take this as a learning record of your own. As a beginner, I have to think more and summarize more. The first page looks like this:

In fact, this page is also very simple, is a background picture, the above part is the website title and navigation bar, the main part is a sentence and a button. Now let’s implement this section, and we’ll leave the site title and navigation bar above.

HTML part code:

<! -- Home Section -->
  <section id="home">
    <div class="home container">
      <div>
        <h1>Hello, <span></span></h1>
        <h1>My Name is <span></span></h1>
        <h1>Jane <span></span></h1>
      </div>
      <a href="#" type="button" class="cta">Protfolio</a>
    </div>
  </section>
  <! -- End Home Section -->
Copy the code

#home h1 {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 4rem;
  color: transparent;
  animation: text_color 1s ease forwards;
  animation-delay: 1s;
}
/* Use :nth-child(n) selector to enter the effect line by line */
#home h1:nth-child(1) {
  animation-delay: 1s;
}
#home h1:nth-child(2) {
  animation-delay: 2s;
}
#home h1:nth-child(3) {
  animation: text_name_color .5s ease forwards;
  animation-delay: 3s;
}

#home h1 span {
  position: absolute;
  top: 0;
  left: 0;
  background-color: cornflowerblue;
  width: 100%;
  height: 100%;
  animation: text_reveal_box 1.5 s ease forwards;
  animation-delay:.5s;
}
#home h1:nth-child(1) span {
  animation-delay:.5s;
}
#home h1:nth-child(2) span {
  animation-delay: 1s;
}
#home h1:nth-child(3) span {
  animation-delay: 1.5 s;
}

#home .cta {
  display: inline-block;
  border: 2px cornflowerblue solid;
  color: #fff;
  padding: 20px 30px;
  font-size: 2rem;
  text-transform: uppercase;
  margin-left: 30px;
  letter-spacing:.1rem;
  background: transparent;
  transition: ease .3s;
  transition-property: background-color color;
  font-weight: 500;
}

#home .cta:hover {
  color: #fff;
  background-color: cornflowerblue;
}
/* End Home */
Copy the code

Services section

It consists of two large boxes, the top box contains the title and the summary of the whole content of services, and the bottom box contains the services that can be provided. Each sub-project box is composed of icon, title and service introduction, and the renderings are as follows: According to the renderings, all the boxes can be arranged in a flexible box layout, and the boxes are arranged vertically.

The code is as follows:

 <! -- Service Sction -->
  <section id="services">
    <div class="services container">
      <div class="service-top">
        <h1 class="section-title">Serv<span>i</span>ces</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
          Ipsum deleniti maiores pariatur assumenda quas magni et, 
          doloribus quod voluptate quasi molestiae magnam officiis 
          dolorum, dolor provident atque molestias voluptatum explicabo!
        </p>
      </div>
      <div class="service-bottom">
        <div class="service-item">
          <div class="icon">
            <img src="https://img.icons8.com/bubbles/100/000000/services.png" />
          </div>
          <h1>Web Design</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
            Ipsum deleniti maiores pariatur assumenda quas magni et, 
            doloribus quod voluptate quasi molestiae magnam officiis 
            dolorum, dolor provident atque molestias voluptatum explicabo!
          </p>
        </div>
        <div class="service-item">
          <div class="icon">
            <img src="https://img.icons8.com/bubbles/100/000000/services.png" />
          </div>
          <h1>Web Design</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
            Ipsum deleniti maiores pariatur assumenda quas magni et, 
            doloribus quod voluptate quasi molestiae magnam officiis 
            dolorum, dolor provident atque molestias voluptatum explicabo!
          </p>
        </div>
        <div class="service-item">
          <div class="icon">
            <img src="https://img.icons8.com/bubbles/100/000000/services.png" />
          </div>
          <h1>Web Design</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
            Ipsum deleniti maiores pariatur assumenda quas magni et, 
            doloribus quod voluptate quasi molestiae magnam officiis 
            dolorum, dolor provident atque molestias voluptatum explicabo!
          </p>
        </div>
        <div class="service-item">
          <div class="icon">
            <img src="https://img.icons8.com/bubbles/100/000000/services.png" />
          </div>
          <h1>Web Design</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
            Ipsum deleniti maiores pariatur assumenda quas magni et, 
            doloribus quod voluptate quasi molestiae magnam officiis 
            dolorum, dolor provident atque molestias voluptatum explicabo!
          </p>
        </div>
      </div>
    </div>
  </section>
  <! -- End Service Sction -->
Copy the code

#services .services {
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
  padding: 100px 0;
  max-width: 1500px;
}

#services .service-top {
  margin: 0 auto;
  width: 500px;
}

#services .service-top {
  max-width: 500px;
  margin: 0 auto;
}

#services .section-title {
  font-size: 4rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing:.2rem;
  text-align: center;
  margin-bottom: 15px;
}

#services .section-title span {
  color: cornflowerblue;
}

#services p {
  font-size: 1.5 rem;
  font-weight: 300;
  margin-bottom: 10px;
  letter-spacing:.05rem;
  line-height: 2rem;
  color: # 000;
}

#services .service-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 50px;
}

#services .service-item {
  position: relative;
  flex-basis: 80%;
  /* Each subterm is an elastic box */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 30px; /* Open the box with an inside margin */
  background-image: url(./imges/img-1.png);
  background-size: cover;
  margin: 10px 5%;
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

/* Create transparent background image with false elements */
#services .service-item::after {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  The linear-gradient() function is used to create an image that represents a linear gradient of two or more colors. * /
  background-image: linear-gradient(60deg.#29323c 0%.# 485562 100%);
  opacity:.7;
  z-index: -1;
}

#services .service-item .icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

#services .service-item h1 {
  font-size: 2rem;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

#services .service-item p {
  color: #fff;
  text-align: left;
}
Copy the code

Animation effects

/* Keyframes */
@keyframes text_reveal_box {
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%; }}@keyframes text_color {
  100% {
    color: #fff; }}@keyframes text_name_color {
  100% {
    color: cornflowerblue;
    font-weight: 600; }}/* End Keyframes */
Copy the code

The Project of

It consists of two boxes: the title box and the Projects box, and the two boxes are arranged vertically. The projects box consists of 5 items, arranged vertically. Each item is also a box, consisting of title and sub-title, project introduction and project preview pictures, and arranged vertically.

  <section id="projects">
    <div class="projects container">
      <div class="project-header">
        <h1 class="section-title">Recent <span>Project</span></h1>
      </div>
      <div class="all-projects">
        <div class="project-item">
          <div class="project-info">
            <h1>Project 1</h1>
            <h2>Coding is Love</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
              Ipsum deleniti maiores pariatur assumenda quas magni et, 
              doloribus quod voluptate quasi molestiae magnam officiis 
              dolorum, dolor provident atque molestias voluptatum explicabo!
            </p>
          </div>
          <div class="project-img">
            <img src="./imges/img-1.png" alt="">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 1</h1>
            <h2>Coding is Love</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
              Ipsum deleniti maiores pariatur assumenda quas magni et, 
              doloribus quod voluptate quasi molestiae magnam officiis 
              dolorum, dolor provident atque molestias voluptatum explicabo!
            </p>
          </div>
          <div class="project-img">
            <img src="./imges/img-1.png" alt="">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 1</h1>
            <h2>Coding is Love</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
              Ipsum deleniti maiores pariatur assumenda quas magni et, 
              doloribus quod voluptate quasi molestiae magnam officiis 
              dolorum, dolor provident atque molestias voluptatum explicabo!
            </p>
          </div>
          <div class="project-img">
            <img src="./imges/img-1.png" alt="">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 1</h1>
            <h2>Coding is Love</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
              Ipsum deleniti maiores pariatur assumenda quas magni et, 
              doloribus quod voluptate quasi molestiae magnam officiis 
              dolorum, dolor provident atque molestias voluptatum explicabo!
            </p>
          </div>
          <div class="project-img">
            <img src="./imges/img-1.png" alt="">
          </div>
        </div>
        <div class="project-item">
          <div class="project-info">
            <h1>Project 1</h1>
            <h2>Coding is Love</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
              Ipsum deleniti maiores pariatur assumenda quas magni et, 
              doloribus quod voluptate quasi molestiae magnam officiis 
              dolorum, dolor provident atque molestias voluptatum explicabo!
            </p>
          </div>
          <div class="project-img">
            <img src="./imges/img-1.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </section>
Copy the code

#projects .projects {
  flex-direction: column;
  max-width: 1200px;
  padding: 100px 0; 
  margin: 0 auto;
}

#projects .project-header h1 {
  margin-bottom: 50px;
}

#projects .all-projects {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#projects .project-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  margin: 20px 0;
  border-radius: 10px;
}

#projects .project-info {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  flex-basis: 50%;
  padding: 30px;
  height: 100%;
  background-image: linear-gradient(60deg.#29323c 0%.# 485562 100%);
  color: #fff;
}

#projects .project-info h1 {
  font-size: 4rem;
  font-weight: 500;
}

#projects .project-info h2 {
  font-size: 1.8 rem;
  font-weight: 500;
  margin-top: 10px;
}

#projects .project-info p {
  color: #fff;
}

#projects .project-img {
  position: relative;
  flex-basis: 50%;
  height: 300px;
  overflow: hidden;
}

#projects .project-img::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(60deg.#29323c 0%.# 485562 100%);
  opacity:.7;
}

#projects .project-img img {
  transition:.3s ease transform;
}

#projects .project-item:hover .project-img img {
  transform: scale(1.1);
}
Copy the code

The About section

It consists of two boxes on the left and right that contain photos and text narration respectively.

<section id="about">
    <div class="about container">
      <div class="col-left">
        <div class="about-img">
          <img src="./imges/4.jpg" alt="">
        </div>
      </div>
      <div class="col-right">
        <h1 class="section-title">About <span>me</span></h1>
        <h2>Front End Developer</h2>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
          Asperiores, velit alias eius non illum beatae atque repellat 
          ratione qui veritatis repudiandae adipisci maiores. At 
          inventore necessitatibus deserunt exercitationem cumque earum 
          omnis ipsum rem accusantium quis, quas quia, accusamus 
          provident suscipit magni! Expedita sint ad dolore, commodi 
          labore nihil velit earum ducimus nulla quae nostrum fugit aut, 
          deserunt reprehenderit libero enim!
        </p>
        <a href="#" class="cta">Download Resume</a>
      </div>
    </div>
  </section>
Copy the code

#about .about {
  flex-direction: column-reverse;
  padding: 100px 20px;
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
}

#about .col-left {
  width: 250px;
  height: 360px;
}

#about .col-left .about-img {
  position: relative;
  height: 100%;
  width: 100%;
  border: #fff solid 10px;
}

#about .col-left .about-img::after {
  content: ' ';
  position: absolute;
  left: -33px;
  top: 18px;
  border: solid 10px cornflowerblue;
  width: 100%;
  height: 100%;
  z-index: -1;
}

#about .col-right {
  width: 100%;
}

#about .col-right h2 {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing:.2rem;
  margin-bottom: 10px;
}

#about .col-right .cta {
  padding: 10px 20px;
  margin-bottom: 30px;
  border: solid 3px cornflowerblue;
  font-size: 1.8 rem;
  font-weight: 600;
  color: # 000;
}

#about .col-right .cta:hover {
  color: #fff;
  background-color: cornflowerblue;
}
Copy the code

The Contact part

It is composed of a title box and a contact-items box, and the contact-items box is composed of three contact-item sub-boxes, where the contact-item is usedbox-shadowAll the boxes are arranged vertically.

<section id="contact">
    <div class="contact container">
      <div>
        <h1 class="section-title">Contact <span>info</span></h1>
      </div>
      <div class="contact-items">
        <div class="contact-item">
          <div class="icon">
            <img src="https://img.icons8.com/clouds/50/000000/phone.png"/>
          </div>
          <div class="contact-info">
            <h1>Phone</h1>
            <h2>+ 1 234 123 1234</h2>
            <h2>+ 1 234 123 1234</h2>
          </div>
        </div>
        <div class="contact-item">
          <div class="icon">
            <img src="https://img.icons8.com/external-flatarticons-blue-flatarticons/50/000000/external-email-digital-marketing-flatarticons- blue-flatarticons-1.png"/>
          </div>
          <div class="contact-info">
            <h1>Email</h1>
            <h2>[email protected]</h2>
            <h2>[email protected]</h2>
          </div>
        </div>
        <div class="contact-item">
          <div class="icon">
            <img src="https://img.icons8.com/clouds/50/000000/order-delivered.png"/>
          </div>
          <div class="contact-info">
            <h1>Address</h1>
            <h2>Fatikchhari, Chittagong, Bangladesh</h2>
          </div>
        </div>
      </div>
    </div>
  </section>
Copy the code

#contact .contact {
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  width: 90%;
}

#contact .contact-items {
  width: 400px;
}

#contact .contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  margin: 10px;
  text-align: center;
  box-shadow: 0 0 18px 0 # 0000002c;
  transition: ease .3s box-shadow;
}

#contact .contact-item:hover {
  box-shadow: 0 0 5px 0 # 0000002c;
}

#contact .icon {
  width: 70px;
  margin: 0 auto;
  margin-bottom: 10px;
}

#contact .contact-info h1{
  font-size: 1.8 rem;
  font-weight: 500;
  margin-bottom: 5px;
}

#contact .contact-info h2 {
  font-size: 1.4 rem;
  font-weight: 500;
  line-height: 2rem;
}
Copy the code

Footer section

Consists of title, socia-Icon and copyright notice:

<section id="footer">
    <div class="footer container">
      <div class="brand">
        <h1><span>J</span>ane <span>Z</span>hang</h1>
      </div>
      <h2>Your Complete Web Solution</h2>
      <div class="social-icon">
        <div class="social-item">
          <a href="#">
            <img src="https://img.icons8.com/clouds/50/000000/weixing.png"/>
          </a>
        </div>
        <div class="social-item">
          <a href="#">
            <img src="https://img.icons8.com/office/48/000000/qq.png"/>
          </a>
        </div>
        <div class="social-item">
          <a href="#">
            <img src="https://img.icons8.com/clouds/50/000000/github.png"/>
          </a>
        </div>
        <div class="social-item">
          <a href="#">
            <img src="https://img.icons8.com/bubbles/100/000000/behance.png" />
          </a>
        </div>
      </div>
      <p>
        Copyright © 2021 Jane. All rights reserved
      </p>
    </div>
  </section>
Copy the code

#footer {
  background-image: linear-gradient(60deg.#29323c 0%.# 485562 100%);
}

#footer .footer {
  flex-direction: column;
  min-height: 200px;
  padding-top: 50px;
  padding-bottom: 10px;
}

#footer .brand h1 {
  font-size: 3rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

#footer .brand h1 span {
  color: cornflowerblue;
}

#footer h2 {
  margin: 10px 0;
  font-size: 1.8 rem;
  font-weight: 500;
  color: #fff;
  letter-spacing:.1rem;
}

#footer .social-icon {
  display: flex;
  margin-bottom: 30px;
}

#footer .social-item {
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

#footer .social-item img {
  filter: grayscale(1);
}

#footer .social-item:hover img {
  filter: grayscale(0);
}

#footer p {
  color: #fff;
  font-size: 1.3 rem;
}
Copy the code

The navigation bar

Including the site name and navigation bar on both ends of the page:

  <div id="header">
    <div class="header container">
      <div class="nav-bar">
        <div class="brand">
          <a href="#home"><h1><span>J</span>ane <span>Z</span>hang</h1></a>
        </div>
        <div class="nav-list">
          <div class="hamburger"><div class="bar"></div></div>
          <ul>
            <li><a href="#home" data-after="Home">Home</a></li>
            <li><a href="#services" data-after="Service">Service</a></li>
            <li><a href="#about" data-after="About">About</a></li>
            <li><a href="#contact" data-after="Contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
Copy the code

The navigation bar is fixed to the top of the browser, so use position: fixed; Locate.

#header {
  position: fixed;
  left: 0;
  top: 0;
  height: auto;
  width: 100vw;
  z-index: 1000;
}

#header .header {
  min-height: 8vh;
  background-color: rgba(31.30.30.24);
  transition:.3s ease background-color;
}

#header .nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  max-width: 1300px;
  left: 0;
  top: 0;
}

#header .nav-list ul {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  list-style: none;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 100%;
  background-color: rgb(31.30.30);
  overflow-x: hidden;
  transition:.8s ease left;
}

#header .nav-list ul a {
  position: relative;
  display: block;
  padding: 20px;
  font-size: 2.5 rem;
  color: #fff;
  font-weight: 500;
  letter-spacing:.2rem;
  text-transform: uppercase;
  z-index: 1;
}

#header .nav-list ul a::after {
  content: attr(data-after);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 13rem;
  color: rgba(240.248.255.021);
  z-index: -1;
  letter-spacing: 50px;
  transition:.3s ease letter-spacing;
}

#header .nav-list ul li:hover a::after {
  transform: translate(-50%, -50%) scale(1);
  letter-spacing: initial;
}

#header .nav-list ul a:hover {
  color: cornflowerblue;
}

#header .hamburger {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  border: #fff solid 3px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  margin-right: 20px;
  transform: scale(.8);
  cursor: pointer;
}

#header .hamburger::after {
  content: ' ';
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid #fff;
  border-radius: 50%;
  z-index: -1;
  animation: hamburger_plus 3s ease infinite;
}

#header .hamburger .bar {
  height: 2px;
  width: 30px;
  position: relative;
  background-color: #fff;
  z-index: -1;
}

#header .hamburger .bar::after.#header .hamburger .bar::before {
  content: ' ';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  background-color: #fff;
  transition:.3s ease;
  transition-property:  top bottom;
}

#header .hamburger .bar::after{
  top: 8px;
}

#header .hamburger .bar::before {
  bottom: 8px;
}
Copy the code

Animation effect:

@keyframes hamburger_plus {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4); }}Copy the code

Common style

The reason for setting the minimum min-height for the box: The final height of the entire web page is not known, and the final height of the web page is determined by the min-height and the elements inside the box, so as to avoid the weird overflow phenomenon of web rendering caused by the height of the box content higher than the height of the whole box, as shown below:

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

html {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
}

a {
  text-decoration: none;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
}

p {
  font-size: 1.5 rem;
  font-weight: 300;
  margin-bottom: 10px;
  letter-spacing:.05rem;
  line-height: 2rem;
  color: # 000;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-title {
  font-size: 4rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing:.2rem;
  text-align: center;
  margin-bottom: 15px;
}

.section-title span {
  color: cornflowerblue;
}

.cta {
  display: inline-block;
  border: 2px cornflowerblue solid;
  color: #fff;
  padding: 20px 30px;
  font-size: 2rem;
  text-transform: uppercase;
  margin-left: 30px;
  letter-spacing:.1rem;
  background: transparent;
  transition: ease .3s;
  transition-property: background-color color;
  font-weight: 500;
}

.cta:hover {
  color: #fff;
  background-color: cornflowerblue;
}

.brand h1 {
  font-size: 3rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #fff;
}

.brand h1 span {
  color: cornflowerblue;
}
Copy the code

responsive

Display on mobile with a minimum screen size of 768px

@media only screen and (min-width:768px) {
  .cta {
    font-size: 2.5 rem;
    padding: 20px 60px;
  }
 h1.section-title {
    font-size: 6rem;
  }

  /* home */
  #home h1 {
    font-size: 7rem;
  }
  /* End home */

  /* Service */
  #services .service-bottom .service-item {
    flex-basis: 45%;
    margin: 2.5%;
  }
  /* End Service */

  /* Project */
  #projects .project-item {
    flex-direction: row;
  }

  #projects .project-item:nth-child(even) {
    flex-direction: row-reverse;
  }

  #projects .project-item {
    height: 400px;
    margin: 0;
    width: 100%;
    border-radius: 0;
  }

  #projects .all-projects .project-info {
    height: 100%;
  }

  #projects .all-projects .project-img {
    height: 100%;
  }
  /* End Project */

  /* About */
  #about .about {
    flex-direction: row;
  }

  #about .col-left {
    height: 600px;
    width: 600px;
    padding-left: 10px;
  }

  #about .col-left .about-img::after{
    left: -45px;
    top: 34px;
    height: 98%;
    width: 98%;
    border: 10px solid cornflowerblue;
  }

  #about .col-right {
    padding: 30px;
    text-align: left;
  }
  /* End About */

  /* Contact */
  #contact .contact {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    min-width: 20vh;
  }

  #contact .contact-items {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 100%;
    margin: 0;
  }

  #contact .contact-item {
    width: 30%;
    margin: 0;
    flex-direction: row;
  }

  #contact .contact-item .icon {
    height: 80px;
    width: 80px;
  }

  #contact .contact-item .icon img {
    object-fit: contain;
  }

  #contact .contact-item .contact-info {
    width: 100%;
    text-align: left;
    padding-left: 20px;
  }
  /* End Contact */
}
Copy the code

Display at least 1200px on the client screen

/* Media Quert=y For DeskTop */
@media only screen and (min-width: 1200px) {
  /* Header */
  #header .hamburger {
    display: none;
  }

  #header .nav-list ul {
    position: initial;
    display: block;
    height: auto;
    width: fit-content;
    background-color: transparent;
  }

  #header .nav-list ul li{
    display: inline-block;
  }

  #header .nav-list li a {
    font-size: 1.8 rem;
  }

  #header .nav-list li a::after {
    display: none;
  }

  #services .service-bottom .service-item {
    flex-basis: 22%;
    margin: 1.5%;
  }
  /* End Header */
}
Copy the code

Show and hide the navigation bar when the screen is less than 1200px

const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger')
const menu = document.querySelector('.header .nav-bar .nav-list ul')
hamburger.addEventListener('click'.() = > {
  hamburger.classList.toggle('active')
  menu.classList.toggle('active')})Copy the code

#header .nav-list ul.active {
  left: 25%;
}
Copy the code

When the scroll bar is greater than 250px, the background color of the navigation bar changes from transparent to a colored background

const header = document.querySelector('.header.container')
document.addEventListener('scroll'.() = > {
  let scroll_position = window.scrollY
  if(scroll_position > 250) {
    header.style.backgroundColor = "#29323c"
  } else {
    header.style.backgroundColor = "transparent"}})Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Make a single page responsive web page

Services section

Animation effects

The Project of

The About section

The Contact part

Footer section

The navigation bar

Animation effect:

Common style

responsive

Make a single page responsive web page

Services section

Animation effects

The Project of

The About section

The Contact part

Footer section

The navigation bar

Animation effect:

Common style

responsive

Related Posts

High order component

window.opener

Front end trivia – Decorator