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> ©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