Uncategorized

Build a Responsive Website Web Page using HTML & CSS – Restaurant Landing Page

Tutorial Description :

In this Tutorial I will create a Responsive Website / Web Page using HTML & CSS Media Querym Flex Box and CSS Grid. No Java Script is used.

For the navigation I will use display flex so CSS3 Flexbox and CSS Grid

I will also use pseudo element and pseudo classes as hover, after, before, and active in order to hide and make content visible .

Resources:

Img:

Font Awesome
Google Fonts
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://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Playfair+Display&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Lobster&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>La Mamma Restaurant</title>
  </head>
  <body>
    <!-- Navigation Section -->
    <nav class="nav_container">
      <div>
        <ul class="nav_items">
          <li><a href="#home" class="nav_item-left">La Mamma Restaurant</a></li>
          <div class="nav_item-right">
            <li><a href="#about">About</a></li>
            <li><a href="#menu">Menu</a></li>
            <li><a href="#contact">Contact</a></li>
          </div>
        </ul>
      </div>
    </nav>
    <!-- Header Section -->
    <header class="header" id="home">
      <section class="bg_img">
        <div class="title">
          <h1 class="header-title">La Mamma</h1>
          <h2 class="header-sub-title">Restaurant</h2>
        </div>
      </section>
    </header>
    <!-- About Section -->
    <section id="about">
      <div class="about_content-left"></div>
      <div class="about_content-right">
        <h1 class="about_title">About Us</h1>
        <h5 class="about_sub_title">
          Family business since 1927
        </h5>
        <p class="about_text">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus
          ab id dolores corrupti deleniti nobis quae quam. Voluptate, ducimus
          itaque. Aspernofficia veniam repellendus consequuntur quo ipsum
          voluptate quod illo nostrum ex eum, blanditiis ad sequi magni
          inventore molestias aliquid laudantium magnam omnis quisquam tempora
          voluptatibus labore! Ipsum iusto, veniam laborum accusantium vero
          porro minima, quos cum temporibus velit consequuntur vel consequatur
          nulla itaque reprehenderit soluta, molestias culpa error iure ante
          placeat, voluptatem, non aliquid, impedit repellat officiis quia.
          Aliquid saepe distinctio, repudiandae exercitationem possimus ipsum
          officiis nulla dolore animi doloremque aspernatur voluptatibus,
          tenetur quaerat quod magni sint? Molestias tempora nihil tenetur
          possimus, pariatur non eligendi ratione iste amet labore eos
          accusantium esse iusto? Ipsum quod error repellendus explicabo, et
          sunt repudiandae ad eveniet in dignissimos, necessitatibus, voluptate
          at hic doloribus placeat eligendi atque unde?
        </p>
        <p class="about_text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae ipsam
          tempora perspiciatis, facilis vel disquis quos aspernatur maxime.
          Laboriosam perspiciatis voluptate assumenda nihil vitae dicta nostrum.
        </p>
        <a href="#" class="read_more">
          <label for="more"> Read more...</label>
        </a>
      </div>
    </section>
    <hr />
    <!-- Menu Section -->
    <section id="menu">
      <section class="menu_content">
        <h1 class="menu_title">Our Menu</h1>
        <h4 class="menu_item">Bread Basket</h4>
        <p class="menu_item-description">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, ipsum?
          <strong>5.50$</strong>
        </p>
        <h4 class="menu_item">Honey Almond Granola with Fruits</h4>
        <p class="menu_item-description">
          Lorem ipsum dolor sit amet consectetur adipisicing.
          <strong>7.50$</strong>
        </p>
        <h4 class="menu_item">Belgian Waffle</h4>
        <p class="menu_item-description">
          Lorem ipsum dolor sit amet.
          <strong>10.50$</strong>
        </p>
        <h4 class="menu_item">Scrambled eggs</h4>
        <p class="menu_item-description">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Non.
          <strong>6.50$</strong>
        </p>
        <h4 class="menu_item">Blueberry Pancakes</h4>
        <p class="menu_item-description">
          Lorem ipsum dolor sit amet.
          <strong>1.50$</strong>
        </p>
      </section>
      <section class="menu_img">
        <img
          src="/img/assorted-variety-of-foods-on-plates-on-dining-table-1528013.jpg"
          alt=""
        />
      </section>
    </section>
    <!-- Contact Section -->
    <section id="contact">
      <section class="contact">
        <h1>Contact</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, fuga.
          Itaque asperiores modi nulla, laborum optio magnam ad doloremque
          dolor, quisquam, consequatur odit explicabo sapiente? Nulla dolore,
          repellat dicta nostrum omnis aperiam quas ea nesciunt debitis, ab
          eligendi maxime. Consectetur temporibus incidunt necessitatibus?
          Assumenda explicabo dignissimos laudantium commodi voluptates numquam
          eos modi. Ea animi ratione est ullam aliquam corporis itaque,
          accusamus delectus culpa ipsum quidem labore modi soluta repellat
          dicta pariatur non quia in et quo cumque reiciendis architecto.
          Perspiciatis, quam at distinctio atque delectus minima dolore aliquid
          doloremque quasi mollitia totam corporis maiores libero aut magni?
          Alias, beatae quasi!
        </p>
        <p>
          <strong
            >You can also contact us by Phone: +0541565-26145 or Email
            lammama@restaurant.com, or you cans send us a message here:</strong
          >
        </p>
        <h2>Restaurant</h2>
        <form action="" class="contact_form">
          <input type="text" placeholder="Name" required name="Name" />
          <input
            type="number"
            placeholder="How many perople"
            required
            name="People"
          />
          <div class="date_time">
            <label for="date" class="date">Reservation Date & Time:</label>
            <input
              type="datetime-local"
              class="date"
              placeholder="Date and time"
              required
              name="date"
              value="2020-11-16t20:20"
            />
          </div>
          <input
            type="text"
            placeholder="Message \ Special requiermants"
            required
            name="Message"
          />
          <button class="message_btn" type="submit">SEND MESSAGE</button>
        </form>
      </section>
    </section>
    <!-- Footer Section -->
    <footer class="footer">
      <p>
        Powered by <a href="#"> Menyhart <span>Media</span> &copy;2020</a>
      </p>
    </footer>
  </body>
</html>

CSS:

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  list-style: none;
  text-decoration: none;
  scroll-behavior: smooth;
}
body {
  font-family: "Times New Roman", Georgia, Serif;
  display: block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Playfair Display";
  letter-spacing: 5px;
}
/* Navigation */
.nav_container {
  display: block;
  width: 100%;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 3;
  overflow: hidden;
  letter-spacing: 4px;
}
.nav_container .nav_items {
  display: grid;
  grid-template-columns: 40% 60%;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.nav_container .nav_items .nav_item-left {
  margin-left: 1.5rem;
}

.nav_container .nav_items .nav_item-right {
  display: flex;
  justify-content: flex-end;
  margin-right: 1.5rem;
}
.nav_container li {
  padding: 0.5rem;
}
.nav_container li a {
  display: block;
  color: #333;
  font-size: 1.2rem;
  font-weight: 500;
  padding: 0.5rem;
}
.nav_container li a:hover {
  background-color: lightgray;
}
/* Header */
header {
  position: relative;
  max-width: 1200px;
  height: auto;
  margin: auto;
}
header .bg_img {
  position: relative;
  height: 800px;
  background-image: url(/img/alcohol-architecture-bar-beer-260922.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
header .title {
  position: absolute;
  width: 100%;
  color: #fff;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
header .title .header-title {
  font-size: 10rem;
  font-family: "Lobster";
}
header .title .header-sub-title {
  font-size: 4rem;
  margin-top: 30vh;
}
/* Menu and Header Responsiveness */
@media screen and (max-width: 768px) {
  header .title .header-title {
    font-size: 6rem;
  }
  header .title .header-sub-title {
    margin-top: 35vh;
  }
  .nav_container .nav_items {
    display: inline-block;
    text-align: center;
  }
  .nav_container .nav_items .nav_item-right {
    display: none;
  }
}
/* About */
#about {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 6rem auto;
  position: relative;
  height: 95vh;
  margin-top: 15vh;
}

.about_content-left {
  max-width: 100%;
  height: 80%;
  background-image: url(/img/baked-baking-chef-dough-784633.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-left: 2rem;
}
.about_content-right {
  text-align: center;
  margin: 1rem;
}
.about_content-right .about_title {
  font-size: 2rem;
  margin-bottom: 3rem;
}
.about_content-right .about_sub_title {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.about_content-right .about_text {
  margin-top: 0.5rem;
  padding: 0 1rem;
  line-height: 1.5;
  color: darkgray;
}
.read_more:hover {
  text-decoration: underline;
}
.read_more:hover::after {
  content: "full history!";
}
@media screen and (max-width: 768px) {
  #about {
    grid-template-columns: 1fr;
  }
  .about_content-left {
    display: none;
  }
}
/* Menu section */
#menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 6rem 2rem;
}
.menu_content {
  background-color: lightgray;
  padding: 2rem;
}
.menu_title {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
}
.menu_title::before,
.menu_title::after {
  content: "-";
}
.menu_item-description {
  margin-top: 0.5rem;
}
.menu_img img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  #menu {
    grid-template-columns: 1fr;
  }
  .menu_img {
    display: none;
  }
  .menu_content {
    background-image: url(/img/assorted-variety-of-foods-on-plates-on-dining-table-1528013.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #fff;
    border-radius: 50px 0 50px 0;
  }
  .menu_content::before {
    content: "";
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50px 0 50px 0;
    z-index: -1;
  }
}
/* Contact Section */

#contact {
  margin: 3rem 0;
}
.contact {
  margin: 3rem 2rem;
}
.contact h1 {
  margin: 3rem 0;
  font-size: 2rem;
}
.contact p {
  margin-bottom: 1rem;
}
#contact h2 {
  font-size: 1.5rem;
  margin: 2rem 0 2rem 2rem;
}

.contact_form input {
  display: block;
  border: none;
  width: 100%;
  border-bottom: 1px solid grey;
  padding: 1rem;
  margin: 1rem;
}
.contact_form input:focus {
  border: none;
}
.contact_form .date_time {
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: center;
  align-items: center;
}
.contact_form .date_time label {
  display: block;
  margin-top: 1rem;
  font-family: "Playfair Display";
  color: gray;
  border-bottom: 1px solid grey;
  padding: 1rem;
}
.message_btn {
  border: none;
  display: inline-block;
  color: #111;
  background-color: #b4b2b2;
  font-size: 1.2rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  margin-left: 2rem;
}
.message_btn:hover {
  color: #fff;
  background-color: #111;
}

.footer {
  margin-top: 1rem;
  background-color: #b4b2b2;
  color: #111;
  height: 60px;
  width: 100%;
  position: relative;
  font-size: 1.5rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-weight: 500;
  z-index: 3;
}
.footer span {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.1rem;
}

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

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: