Create a Responsive Website with Animations Using HTML5 CSS3 and JavaScript

Part 1 – Navigation Menu

In this Web Design Tutorial I will teach you how to create a Responsive Website with Animations. We will build 3 web pages to which we will be able to navigate to by using the navigation menu in the middle of the page. The pages will appear with Animated Text and Images. I will also create a dateTime function using Java Script which will display the current day and depending on the day the Restaurant will be Opened ore closed using event Listener

Useful links & Downloads:

Font Awesome
Google Fonts

Downloads:

Home img-1 Download

Home img-2 Download

Home img-3 Download

Services img-1 Download

Services img-2 Download

Services img-3 Download

Contact Download

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Website</title>
  </head>
  <body>
    <!-- Navigation -->
    <nav id="navbar" class="navbar">
      <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>
    <header>
      <h1>My Website</h1>
    </header>
    <!-- Section Home -->
    <section id="home">
      <div class="section_container">
        <div class="text_container">
          <h1 class="text">Home</h1>
          <p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam,
            labore?
          </p>
          <h6 class="text">
            Lorem, ipsum.
          </h6>
        </div>
        <div class="img_container img_home">
          <div class="img_home home-1"><span>breakfast</span></div>
          <div class="img_home home-2"><span>served</span></div>
          <div class="img_home home-2"><span>is</span></div>
        </div>
      </div>
    </section>

    <!-- Section Services -->
    <section id="services"></section>

    <!-- Section Contact -->
    <section id="contact"></section>
  </body>
</html>

CSS:

*,
::before,
::after {
  margin: 0;
  /* padding: 0; */
  list-style: none;
  text-decoration: none;
  overflow: hidden;
}

body {
  font-family: "Dancing Script", cursive;
  letter-spacing: 3px;
  position: relative;
}
/* /* header  */

header {
  height: 100vh;
  width: 100%;
  position: relative;
}
/* Navigation  */

.navbar {
  background: linear-gradient(to right, transparent, initial);
  height: 250px;
  width: 250px;
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px 2px black;
  text-align: center;
  border-radius: 50%;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.navbar li a {
  color: white;
  text-shadow: 1px 2px 2px black;
  font-size: 1.7rem;
  text-transform: uppercase;
  line-height: 1.6;
  font-size: 600;
}
.navbar li a:hover {
  color: greenyellow;
  transition: 0.5s ease;
}
.navbar li a:active {
  color: black;
}
.navbar:hover {
  background: linear-gradient(
    to right,
    transparent 50%,
    rgba(225, 0, 0, 0.5) 50%
  );
  transition: 0.2s ease-out;
}
/* General Styling for all Sections  */

section {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-snap-align: center;
}

#home {
  background-color: #3a0768;
}
#services {
  background-color: #15243b;
}
#contact {
  background-color: #106085;
}
#home,
#services,
#contact {
  display: none;
  position: absolute;
  top: 0;
}
#home:target,
#services:target,
#contact:target {
  display: block;
}

Part 2 – Home Section

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Website</title>
  </head>
  <body>
    <!-- Navigation -->
    <nav id="navbar" class="navbar">
      <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>
    <header>
      <h1>My Website</h1>
    </header>
    <!-- Section Home -->
    <section id="home">
      <div class="section_container">
        <div class="text_container">
          <h1 class="text">Home</h1>
          <p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam,
            labore?
          </p>
          <h6 class="text">
            Lorem, ipsum.
          </h6>
        </div>
        <div class="img_container img_home-main">
          <div class="img_home home-1"><span>breakfast</span></div>
          <div class="img_home home-2"><span>served</span></div>
          <div class="img_home home-3"><span>is</span></div>
        </div>
      </div>
    </section>

    <!-- Section Services -->
    <section id="services"></section>

    <!-- Section Contact -->
    <section id="contact"></section>
  </body>
</html>

CSS:

*,
::before,
::after {
  margin: 0;
  /* padding: 0; */
  list-style: none;
  text-decoration: none;
  overflow: hidden;
}

body {
  font-family: "Dancing Script", cursive;
  letter-spacing: 3px;
  position: relative;
}
/* /* header  */

header {
  height: 100vh;
  width: 100%;
  position: relative;
}
/* Navigation  */

.navbar {
  background: linear-gradient(to right, transparent, initial);
  height: 250px;
  width: 250px;
  position: absolute;
  left: 35%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px 2px black;
  text-align: center;
  border-radius: 50%;
  display: grid;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.navbar li a {
  color: white;
  text-shadow: 1px 2px 2px black;
  font-size: 1.7rem;
  text-transform: uppercase;
  line-height: 1.6;
  font-size: 600;
}
.navbar li a:hover {
  color: greenyellow;
  transition: 0.5s ease;
}
.navbar li a:active {
  color: black;
}
.navbar:hover {
  background: linear-gradient(
    to right,
    transparent 50%,
    rgba(225, 0, 0, 0.5) 50%
  );
  transition: 0.2s ease-out;
}
/* General Styling for all Sections  */

section {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-snap-align: center;
}

#home {
  background-color: #3a0768;
}
#services {
  background-color: #15243b;
}
#contact {
  background-color: #106085;
}
#home,
#services,
#contact {
  display: none;
  position: absolute;
  top: 0;
}
#home:target,
#services:target,
#contact:target {
  display: block;
}
.section_container {
  position: relative;
  display: grid;
  grid-template-columns: 35vw 65vw;
}
.text_container {
  position: relative;
  height: 100vh;
  color: white;
  width: 300px;
  animation: text 3s;
}
@keyframes text {
  from {
    bottom: -200px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

.text {
  position: relative;
  top: 70vh;
  margin-left: 2rem;
  text-shadow: 2px 2px 5px black;
}
.text_container h1 {
  font-size: 4.5rem;
  margin-bottom: 2rem;
}
.text_container p {
  margin-bottom: 2rem;
}
/* Home Section */

.img_home {
  position: relative;
  height: 600px;
  width: 350px;
  border-radius: 5px;
  box-shadow: 0 5px 15px 0px #333;
}
.img_container {
  background-color: #ddd;
}
.img_home-main {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: #fff;
  font-weight: 600;
}

.img_container .img_home span {
  text-align: center;
  font-size: 3.5rem;
  animation: text 9s ease-out;
  animation-timing-function: cubic-bezier(1, 0, 0, 1);
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}
.home-1 {
  background: url(/img/home/baked-baking-chef-dough-784633.jpg) no-repeat center
    center/cover;
  top: 20px;
  left: 50px;
  animation: img_home-1 4s;
}
@keyframes img_home-1 {
  from {
    top: -500px;
  }
  to {
    height: 600px;
  }
}
.home-2 {
  background: url(/img/home/assorted-variety-of-foods-on-plates-on-dining-table-1528013.jpg)
    no-repeat center center/cover;
  top: 450px;
  left: 20px;
  animation: img_home-2 3s;
  z-index: 1;
}
@keyframes img_home-2 {
  from {
    top: -800px;
  }
  to {
    height: 600px;
  }
}
.home-3 {
  background: url(/img/home/baked-chef-cook-dough-784631.jpg) no-repeat center
    center/cover;
  top: 150px;
  animation: img_home-3 5s;
}
@keyframes img_home-3 {
  from {
    top: 1000px;
  }
  to {
    height: 600px;
  }
}

/* Responsiveness */

/* Table */
@media screen and (max-width: 768px) {
  /* Text Container */

  .text_container {
    width: 280px;
    text-align: center;
  }
  .text {
    top: 10vh;
    margin-left: 0.3rem;
  }
  .text_container h1 {
    margin-bottom: 600px;
    font-size: 3.5rem;
  }
  /* Nav */
  .navbar {
    height: 150px;
    width: 150px;
  }
  .navbar li a {
    font-size: 1.3rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
  }
  /* Home Section */
  .img_home {
    height: 450px;
    width: 300px;
  }
  @keyframes img_home-1 {
    from {
      top: -500px;
    }
    to {
      height: 450px;
    }
  }
  @keyframes img_home-2 {
    from {
      top: -800px;
    }
    to {
      height: 450px;
    }
  }
  @keyframes img_home-3 {
    from {
      top: 1000px;
    }
    to {
      height: 450px;
    }
  }
  .home-1 {
    top: 20px;
    left: 20px;
  }
  .home-2 {
    top: 550px;
    left: -200px;
  }
  .home-3 {
    top: 300px;
    left: -350px;
  }
  .img_container .img_home span {
    font-size: 2.5rem;
    text-transform: lowercase;
  }
}

/* Mobile */
@media screen and (max-width: 375px) {
  /* Text Container */

  .text_container {
    width: 150px;
  }
  .text {
    top: 5vh;
    margin-left: 0.3rem;
  }
  .text_container h1 {
    top: 15vh;
    transform: rotate(-90deg);
    margin-bottom: 450px;
    font-size: 2.5rem;
  }
  /* Nav */

  /* Home Section */
  .img_home {
    height: 300px;
    width: 150px;
  }
  @keyframes img_home-1 {
    from {
      top: -500px;
    }
    to {
      height: 300px;
    }
  }
  @keyframes img_home-2 {
    from {
      top: -800px;
    }
    to {
      height: 300px;
    }
  }
  @keyframes img_home-3 {
    from {
      top: 1000px;
    }
    to {
      height: 300px;
    }
  }

  .home-2 {
    top: 500px;
    left: -100px;
  }
  .home-3 {
    top: 250px;
    left: -255px;
  }
  .img_container .img_home span {
    font-size: 2.5rem;
    text-transform: lowercase;
  }
}

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Basic PC/Mac Knowledge
Beginner Curiosity

Description

This is a beginner friendly course. This course will tech you the Foundations of Web Development. This a more practical orientate Course. Aldo we will start up slow with some basic definitions, the main focus here is to have as much as possible hands on experience. Learning by doing is the key word. That means Examples, Assignments and Exercises!

At this point I would like to invite you to join me on this journey and enrich yourself with the foundations of web development. In this Course You will learn Modern HTML 5, CSS 3, and JavaScript, and through applying them you will be able to building from Easy to progressively more complex responsive Responsive Web Pages.

Throughout the course we cover tons of tools and technologies including:

HTML5
CSS3
CSS FelxBox
CSS Grid Layout
Projects
SASS
JavaScript
DOM Manipulation
JSON
Projects , Projects and more Projects 🙂

Two Important Notes about this Course:

1. This is a hands-on Learning by doing Course. This means that we are going to start up Slowly with basic definitions in HTML and CSS and then we will combine them together by building the structure and applying design to our sites. After that we will apply JS in order to make the Site do Thinks.

2. Is that I will be constantly Updating the Content with New Documentation, Examples and Exercises in order to bring you as much value as possible. So you can always lean beck on this Course if you want to refresh your memory about something.

Bonus!

3. The most important thing the you need to know in life is where to find the information you need!Who this course is for:

Beginner Web Developers
Beginner Web Designers
Beginner HTML
Beginner CSS
Beginner SASS / SCSS
Beginner JavaScript

Part-3 Services Section

HTML:

<!-- Section Services -->
    <section id="services">
      <div class="section_container">
        <div class="text_container">
          <h1 class="text">Services</h1>
          <p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam,
            labore?
          </p>
          <h6 class="text">
            Lorem, ipsum.
          </h6>
        </div>
        <div class="img_container img_serv-main">
          <div class="img_serv serv-1">
            <h2>Breakfast</h2>
            <h3>From 7:00-9:00</h3>
          </div>
          <div class="img_serv serv-2">
            <h2>Dinner</h2>
            <h3>From 19:00-21:00</h3>
          </div>
          <div class="img_serv serv-3">
            <h2>Party</h2>
            <h3>From 22:00-4:00</h3>
          </div>
        </div>
      </div>
    </section>

CSS:

/* Service Section */
.img_serv-main {
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  color: #fff;
  font-size: 600;
}

.img_serv {
  height: 320px;
  width: 650px;
  border-radius: 5px;
  box-shadow: 0 0 10px 2px black;
  position: relative;
}

.img_container .img_serv h2,
.img_container .img_serv h3 {
  position: relative;
  text-align: center;
  text-shadow: 2px 2px 2px black;
  line-height: 3.5;
  font-size: 3.5rem;
  animation: text 5s ease-out;
}
.img_container .img_serv h3 {
  font-size: 1.5rem;
}

.serv-1 {
  background: url(/img/services/brooke-lark-HlNcigvUi4Q-unsplash.jpg) no-repeat
    center center/cover;
  top: 20px;
  left: 550px;
  animation: img_serv-1 4s;
}
@keyframes img_serv-1 {
  from {
    left: -500px;
  }
  to {
    height: 320px;
  }
}
.serv-2 {
  background: url(/img/services/juliette-f-fb0_wj2MZk4-unsplash.jpg) no-repeat
    center center/cover;
  top: 20px;
  left: 350px;
  animation: img_serv-2 3s;
}
@keyframes img_serv-2 {
  from {
    left: -800px;
  }
  to {
    height: 320px;
  }
}
.serv-3 {
  background: url(/img/services/scott-warman-rrYF1RfotSM-unsplash.jpg) no-repeat
    center center/cover;
  top: 20px;
  left: 150px;
  animation: img_serv-3 3s;
}

@keyframes img_serv-3 {
  from {
    left: 1000px;
  }
  to {
    height: 320px;
  }
}

@media screen and (max-width: 768px){
/* Services */

  .img_serv {
    height: 300px;
    width: 480px;
  }

  .serv-1,
  .serv-2,
  .serv-3 {
    left: 8px;
  }

  @keyframes img_serv-1 {
    from {
      left: -500px;
    }
    to {
      height: 300px;
    }
  }
  @keyframes img_serv-2 {
    from {
      left: -800px;
    }
    to {
      height: 300px;
    }
  }
  @keyframes img_serv-3 {
    from {
      left: 1000px;
    }
    to {
      height: 300px;
    }
  }
  .img_contact h2,
  .img_contact h3 {
    font-size: 3.5rem;
    line-height: 2.5;
  }
  .img_contact h3 {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 375px) {
/* Services */
  .img_serv {
    height: 220px;
    width: 230px;
  }

  .serv-1,
  .serv-2,
  .serv-3 {
    left: 6px;
  }

  @keyframes img_serv-1 {
    from {
      left: -500px;
    }
    to {
      height: 220px;
    }
  }
  @keyframes img_serv-2 {
    from {
      left: -800px;
    }
    to {
      height: 220px;
    }
  }
  @keyframes img_serv-3 {
    from {
      left: 1000px;
    }
    to {
      height: 220px;
    }
  }

  .img_serv-main .img_serv h2,
  .img_serv-main .img_serv h3 {
    font-size: 2.5rem;
    line-height: 4;
  }
  .img_serv-main .img_serv h3 {
    font-size: 1rem;
  }
}

Part-4 Contact Section

HTML:

<!-- Section Contact -->
    <section id="contact">
      <div class="section_container">
        <div class="text_container">
          <h1 class="text">Contact</h1>
          <div class="date_state">
            <p id="Date"></p>
            <span id="State"></span>
          </div>
          <p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam,
            labore?
          </p>
          <h6 class="text">
            Lorem, ipsum.
          </h6>
        </div>
        <div class="contact_container">
          <div class="img_contact">
            <h2>Opening Hours</h2>
            <h3>From 7:00-24:00</h3>
          </div>
          <div class="form_container">
            <form action="">
              <input type="text" id="name" placeholder="Your name..." />
              <div class="table_occasion">
                <select name="Table" id="Table">
                  <option value="Breakfast">Breakfast</option
                  ><option value="Dinner">Dinner</option
                  ><option value="Party">Party</option>
                </select>
                <select name="Table" id="Table">
                  <option value="for 2">Table for 2</option>
                  <option value="for 4">Table for 4</option>
                  <option value="for 6">Table for 6</option>
                  <option value="for 8">Table for 8</option>
                </select>
              </div>
              <label for="subject">Special request</label>
              <textarea
                name="subject"
                id=""
                subject
                placeholder="Write something"
                style="height: 100px;"
              ></textarea>
              <input type="submit" value="Send reservation" />
            </form>
          </div>
        </div>
      </div>
    </section>
    <script src="app.js"></script>

CSS:

/* Contact Section*/
#contact .text_container {
  width: 100%;
}
.contact_container {
  background-color: #ddd;
  height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: 60% 40%;
  font-weight: 600;
}
/* img Contact */
.img_contact {
  background: url(/img/contact/andrew-seaman-sQopSb2K0CU-unsplash.jpg) no-repeat
    center center/cover;
  animation: text 3s;
}
.img_contact h2,
.img_contact h3 {
  color: #fff;
  position: relative;
  text-align: center;
  text-shadow: 2px 2px 5px black;
  font-size: 8.5rem;
  top: 20%;
  line-height: 2.5;
  animation: text 3s ease-out;
}
.img_contact h3 {
  font-size: 3.5rem;
}

.date_state {
  font-size: 2rem;
  text-align: center;
}

/* Contact Form */
.form_container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: #106085;
  padding: 2rem;
  position: relative;
  animation: form 2s;
}

@keyframes form {
  from {
    left: -1000px;
  }
  to {
    left: 0;
  }
}

input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 1rem;
  resize: vertical;
}
input[type="submit"] {
  width: 100%;
  background-color: #4caf50;
  color: #fff;
  padding: 12px 20px;
  font-size: large;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #45a049;
}
.table_occasion {
  display: flex;
}

/* Responsiveness */

/* Mobile */
@media screen and (max-width: 375px) {
/* contact */
  .form_container {
    padding: 0.2rem;
  }
  .img_contact h2,
  .img_contact h3 {
    font-size: 2.5rem;
    line-height: 2.5;
    top: 10vh;
  }
  .img_contact h3 {
    font-size: 1.5rem;
  }
}

JS:

const today = new Date();
document.getElementById("Date").innerHTML = today.toDateString();

const opening = document.getElementById("State");

// day (days of the week) getDay()
// 0-6 0=Sunday
// Hour getHours 0-23 0 = Midnight

if (today.getDay() == 1 || today.getHours() == 0 || today.getHours() >= 20) {
  //   alert("closed");
  function displayState() {
    const state = document.createElement("span");
    state.innerHTML = "Closed";
    state.style.color = "red";
    state.style.fontWeight = "bold";
    opening.appendChild(state);
    return state;
  }
} else {
  //   alert("Open");
  function displayState() {
    const state = document.createElement("span");
    state.innerHTML = "Opened";
    state.style.color = "lightgreen";
    state.style.fontWeight = "bold";
    opening.appendChild(state);
    return state;
  }
}
document.addEventListener("DOMContentLoaded", displayState);

Create a Responsive Website with Animations Using HTML5 CSS3 and JavaScript

Part 1 – Navigation Menu

Useful links & Downloads:

Links:

Font Awesome
Google Fonts

Downloads:

HTML:

CSS:

Part 2 – Home Section

HTML:

CSS:

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Part-3 Services Section

HTML:

CSS:

Part-4 Contact Section

HTML:

CSS:

JS:

Like this:

Leave a Reply Cancel reply

Part 1 – Navigation Menu

Useful links & Downloads:

Links:

Font AwesomeGoogle Fonts

Downloads:

HTML:

CSS:

Part 2 – Home Section

HTML:

CSS:

My Udemy Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

Part-3 Services Section

HTML:

CSS:

Part-4 Contact Section

HTML:

CSS:

JS:

Sharing means caring:

Like this:

Leave a Reply Cancel reply

Font Awesome
Google Fonts