Skip to content

Instantly share code, notes, and snippets.

@ismailkohail

ismailkohail/index.html

Forked from adrianhajdin/index.html
Last active August 14, 2023 09:08
Show Gist options
  • Save ismailkohail/f2f647b310fd429cf49144f1d0ec33b8 to your computer and use it in GitHub Desktop.
Save ismailkohail/f2f647b310fd429cf49144f1d0ec33b8 to your computer and use it in GitHub Desktop.
Download ZIP
Build and Deploy a Responsive Website | Beginner HTML CSS Tutorial on How to Make a Website in 2023
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/sushi.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Sushiman</title>
</head>
<body>
<!-- START: header -->
<header>
<nav class="header__nav">
<div class="header__logo">
<!-- This how we use aos. Simply specify the type of animation using data attribute -->
<h4 data-aos="fade-down">Sushiman</h4>
<div class="header__logo-overlay"></div>
</div>
<ul class="header__menu" data-aos="fade-down">
<li>
<a href="#menu">Menu</a>
</li>
<li>
<a href="#food">Food</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#about-us">About Us</a>
</li>
<li>
<img src="assets/search.svg" alt="search" />
</li>
</ul>
<!-- Display Menu icon on small devices -->
<ul class="header__menu-mobile" data-aos="fade-down">
<li>
<img src="assets/menu.svg" alt="search" />
</li>
</ul>
</nav>
</header>
<!-- END: header -->
<!-- START: hero -->
<section class="hero">
<div class="hero-image">
<img src="assets/sushi-1.png" alt="sushi-1" data-aos="fade-up" data-aos-anchor-placement="top-bottom" />
<h2 data-aos="fade-up">
日 <br />
本 <br />
食
</h2>
<div class="hero-image__overlay"></div>
</div>
<div class="hero-content">
<div class="hero-content-info" data-aos="fade-left">
<h1>Feel the taste of Japanese foods</h1>
<p>
Feel the taste of the most popular Japanese foods from anywhere and
anytime.
</p>
<div class="hero-content__buttons">
<button class="hero-content__order-button">Order Now</button>
<button class="hero-content__play-button">
<img src="assets/play-circle.svg" alt="play-circle" />
How to Order
</button>
</div>
</div>
<div class="hero-content__testimonial" data-aos="fade-up">
<div class="hero-content__customer flex-center">
<h4>24<span>k+</span></h4>
<p>Happy Customers</p>
</div>
<div class="hero-content__review">
<img src="assets/user.png" alt="user" />
<p>
“This is the best Japanese food delivery service that ever existed.”
</p>
</div>
</div>
</div>
</section>
<!-- END: hero -->
<!-- START: about us -->
<section class="about-us" id="about-us">
<div class="about-us__image">
<div class="about-us__image-sushi3">
<img src="assets/sushi-3.png" alt="sushi-3" data-aos="fade-right" />
</div>
<button class="about-us__button">
Learn More
<img src="assets/arrow-up-right.svg" alt="arrow_up_right" />
</button>
<div class="about-us__image-sushi2">
<img src="assets/sushi-2.png" alt="sushi-2" data-aos="fade-right" />
</div>
</div>
<div class="about-us__content" data-aos="fade-left">
<p class="sushi__subtitle">About Us / 私たちに関しては</p>
<h3 class="sushi__title">
Our mission is to bring true Japanese flavours to you.
</h3>
<p class="sushi__description">
We will continue to provide the experience of Omotenashi, the Japanese
mindset of hospitality, with our shopping and dining for our
customers.
</p>
</div>
</section>
<!-- END: about us -->
<!-- START: popular foods -->
<section class="popular-foods" id="menu">
<h2 class="popular-foods__title" data-aos="flip-up">
Popular Food / 人気
</h2>
<div class="popular-foods__filters sushi__hide-scrollbar" data-aos="fade-up">
<button class="popular-foods__filter-btn active">All</button>
<button class="popular-foods__filter-btn">
<img src="assets/sushi-9.png" alt="sushi-9" />
Sushi
</button>
<button class="popular-foods__filter-btn">
<img src="assets/sushi-8.png" alt="sushi-8" />
Ramen
</button>
<button class="popular-foods__filter-btn">
<img src="assets/sushi-7.png" alt="sushi-7" />
Udon
</button>
<button class="popular-foods__filter-btn">
<img src="assets/sushi-6.png" alt="sushi-6" />
Danggo
</button>
<button class="popular-foods__filter-btn">Others</button>
</div>
<div class="popular-foods__catalogue" data-aos="fade-up">
<article class="popular-foods__card">
<img class="popular-foods__card-image" src="assets/sushi-12.png" alt="sushi-12" />
<h4 class="popular-foods__card-title">Chezu Sushi</h4>
<div class="popular-foods__card-details flex-between">
<div class="popular-foods__card-rating">
<img src="assets/star.svg" alt="star" />
<p>4.8</p>
</div>
<p class="popular-foods__card-price">$21.00</p>
</div>
</article>
<!-- active big white card -->
<article class="popular-foods__card active-card">
<img class="popular-foods__card-image" src="assets/sushi-11.png" alt="sushi-11" />
<h4 class="popular-foods__card-title">Originale Sushi</h4>
<div class="popular-foods__card-details flex-between">
<div class="popular-foods__card-rating">
<img src="assets/star.svg" alt="star" />
<p>4.8</p>
</div>
<p class="popular-foods__card-price">$21.00</p>
</div>
</article>
<article class="popular-foods__card">
<img class="popular-foods__card-image" src="assets/sushi-10.png" alt="sushi-10" />
<h4 class="popular-foods__card-title">Ramen Legendo</h4>
<div class="popular-foods__card-details flex-between">
<div class="popular-foods__card-rating">
<img src="assets/star.svg" alt="star" />
<p>4.8</p>
</div>
<p class="popular-foods__card-price">$21.00</p>
</div>
</article>
</div>
<button class="popular-foods__button">
Explore Food
<img src="assets/arrow-right.svg" alt="arrow-right" />
</button>
</section>
<!-- END: popular foods -->
<section class="trending" id="food">
<!-- START: trending sushi -->
<section class="trending-sushi">
<div class="trending__content" data-aos="fade-right">
<p class="sushi__subtitle">What’s Trending / トレンド</p>
<h3 class="sushi__title">Japanese Sushi</h3>
<p class="sushi__description">
Feel the taste of the most delicious Sushi here.
</p>
<ul class="trending__list flex-between">
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Make Sushi</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Nigiri Sushi</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Oshizushi</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Temaki Sushi</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Uramaki Sushi</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Inari Sushi</p>
</li>
</ul>
</div>
<div class="trending__image flex-center">
<img src="assets/sushi-5.png" alt="sushi-5" data-aos="fade-left" />
<div class="trending__arrow trending__arrow-left">
<img src="assets/arrow-vertical.svg" alt="arrow-vertical" />
</div>
<div class="trending__arrow trending__arrow-bottom">
<img src="assets/arrow-horizontal.svg" alt="arrow-horizontal" />
</div>
</div>
</section>
<!-- END: trending sushi -->
<!-- START: discover button -->
<div class="trending__discover" data-aos="zoom-in">
<p>Discover</p>
</div>
<!-- END: discover button -->
<!-- START: trending drinks -->
<section class="trending-drink">
<div class="trending__image flex-center">
<img src="assets/sushi-4.png" alt="sushi-4" data-aos="fade-right" />
<div class="trending__arrow trending__arrow-top">
<img src="assets/arrow-horizontal.svg" alt="arrow-horizontal" />
</div>
<div class="trending__arrow trending__arrow-right">
<img src="assets/arrow-vertical.svg" alt="arrow-vertical" />
</div>
</div>
<div class="trending__content" data-aos="fade-left">
<p class="sushi__subtitle">What’s Trending / トレンド</p>
<h3 class="sushi__title">Japanese Drinks</h3>
<p class="sushi__description">
Feel the taste of most delicious Japanese drinks here.
</p>
<ul class="trending__list flex-between">
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Oruncha</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Ofukucha</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Sakura Tea</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Kombu-cha</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Aojiru</p>
</li>
<li>
<div class="trending__icon flex-center">
<img src="assets/check.svg" alt="check" />
</div>
<p>Mugicha</p>
</li>
</ul>
</div>
</section>
<!-- END: trending drinks -->
</section>
<!-- START: subscribe -->
<section class="subscription flex-center" id="services">
<h2 data-aos="flip-down">
Get offers straight <br />
to your inbox
</h2>
<p data-aos="fade-up">Sign up for the Sushiman newsletter</p>
<div class="subscription__form" data-aos="fade-up">
<input type="text" placeholder="Enter email address" />
<button>Get Started</button>
</div>
</section>
<!-- END: subscribe -->
<!-- START: footer -->
<footer class="footer flex-between">
<h3 class="footer__logo"><span>Sushi</span>man</h3>
<ul class="footer__nav">
<li>
<a href="#menu">Menu</a>
</li>
<li>
<a href="#food">Food</a>
</li>
<li>
<a href="#services">Services</a>
</li>
<li>
<a href="#about-us">About us</a>
</li>
</ul>
<ul class="footer__social">
<li class="flex-center">
<img src="assets/facebook.svg" alt="facebook" />
</li>
<li class="flex-center">
<img src="assets/twitter.svg" alt="twitter" />
</li>
<li class="flex-center">
<img src="assets/instagram.svg" alt="instagram" />
</li>
</ul>
</footer>
<!-- END: footer -->
<!-- Type module is necessary in order to use ECMAScript module (import/export) -->
<script src="js/script.js" type="module"></script>
</body>
</html>
Raw
missed-navbar-code.css
.header__logo h4 {
padding-left: 30px;
font-weight: 700;
font-size: 24px;
text-transform: uppercase;
font-family: var(--playfair-display);
color: #fff;
opacity: 0.8;
}
.header__menu,
.header__menu-mobile {
padding: 20px;
flex: 1.235;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 64px;
list-style: none;
}
.header__menu li {
font-weight: 500;
font-size: 16px;
line-height: 20px;
text-transform: uppercase;
font-family: var(--plus-jakarta-sans);
color: var(--secondary-color);
cursor: pointer;
}
.header__menu li img {
width: 24px;
height: 24px;
object-fit: contain;
}
.header__menu-mobile {
display: none;
gap: 20px;
position: relative;
}
Raw
script.js
import AOS from "aos";
import "aos/dist/aos.css";
// init AOS animation
AOS.init({
duration: 1000,
offset: 100,
});
// the additional code you saw in the video will not be needed :)
Raw
style.css
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");
/* other css file imports */
@import url("sections/header.css");
@import url("sections/hero.css");
@import url("sections/about.css");
@import url("sections/popular.css");
@import url("sections/trending.css");
@import url("sections/subscribe.css");
@import url("sections/footer.css");
/* CSS variables for reusablity across all files (including above imported) */
:root {
--playfair-display: "Playfair Display", serif;
--plus-jakarta-sans: "Plus Jakarta Sans", sans-serif;
--primary-color: #b1454a;
--secondary-color: #121212;
--black-200: #020202;
--black-300: #333333;
--black-400: #1f1e31;
--black-500: #555555;
--gray-100: #888888;
--color-white: #fff;
--color-creamson: #fff0de;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
max-width: 1280px;
margin: 0 auto;
background-color: var(--color-creamson);
}
a {
text-decoration: none;
color: inherit;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
.sushi__subtitle {
font-size: 18px;
font-weight: 400;
font-family: var(--plus-jakarta-sans);
color: var(--primary-color);
opacity: 0.8;
letter-spacing: -0.01em;
}
.sushi__title {
font-size: 64px;
font-weight: 600;
font-family: var(--playfair-display);
color: var(--secondary-color);
margin-top: 16px;
}
.sushi__description {
font-size: 18px;
font-weight: 400;
font-family: var(--plus-jakarta-sans);
line-height: 36px;
letter-spacing: -0.01em;
color: var(--secondary-color);
opacity: 0.8;
margin: 32px 0px;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.sushi__hide-scrollbar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.sushi__hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/* START: about us media queries */
@media screen and (max-width: 1024px) {
.about-us {
flex-direction: column;
}
.about-us__image {
flex-direction: row;
}
.about-us__image-sushi3 {
border-bottom: none;
border-right: 8px solid var(--color-creamson);
}
.about-us__button {
display: none;
}
}
@media screen and (max-width: 750px) {
.about-us__image {
flex-direction: column;
}
.about-us__image-sushi3 {
border-bottom: 8px solid var(--color-creamson);
border-right: none;
}
.about-us__button {
display: block;
top: 47%;
}
}
@media screen and (max-width: 550px) {
.about-us__image-sushi2 img,
.about-us__image-sushi3 img {
width: 50%;
height: 160px;
object-fit: contain;
}
.about-us__image div {
padding: 32px;
}
.about-us__button {
top: 44%;
}
.about-us__content {
padding: 32px;
}
}
/* END: about us media queries */
/* START: header media querie */
@media screen and (max-width: 900px) {
.header__nav {
background: var(--primary-color);
}
.header__menu {
display: none;
}
.header__menu-mobile {
display: flex;
}
}
@media screen and (max-width: 550px) {
.header__logo {
padding-left: 0;
}
}
/* END: header media queries */
/* START: hero media queries */
@media screen and (max-width: 1060px) {
.hero {
flex-direction: column;
}
.hero-image img {
width: 100%;
transform: matrix(1, 0.05, 0, 1.25, 0, 0) !important;
}
}
@media screen and (max-width: 750px) {
.hero-image h2 {
font-size: 70px;
line-height: 90px;
}
}
@media screen and (max-width: 550px) {
.hero-image h2 {
font-size: 40px;
line-height: 60px;
}
.hero-content-info {
padding: 32px;
}
.hero-content-info h1 {
font-size: 60px;
}
.hero-content-info p {
margin: 32px 0;
}
.hero-content__buttons {
margin: 41px 0;
}
.hero-content__testimonial {
padding: 32px;
}
}
/* END: hero media queries */
/* START: popular media queries */
@media screen and (max-width: 550px) {
.popular-foods {
padding: 64px 32px;
}
.popular-foods__card,
.popular-foods__card.active-card {
min-width: 100%;
}
}
/* END: popular media queries */
/* START: subscribe media queries */
@media screen and (max-width: 550px) {
.subscription {
padding: 64px 32px;
}
.subscription h2 {
font-size: 68px;
line-height: 100px;
}
.subscription__form {
flex-direction: column;
gap: 20px;
min-width: 100%;
border-radius: 20px;
padding: 0;
border: none;
}
.subscription__form input {
min-height: 50px;
border: 1px solid rgba(255, 255, 255, 0.5);
padding: 10px 20px;
border-radius: 30px;
}
.subscription__form button {
min-width: 100%;
}
}
/* END: subscribe media queries */
/* START: trending media queries */
@media screen and (max-width: 1024px) {
.trending-sushi {
flex-direction: column;
}
.trending-drink {
flex-direction: column-reverse;
}
.trending__image {
width: 100%;
background-size: cover;
}
.trending__discover {
display: none;
}
.trending__arrow {
display: none;
}
}
@media screen and (max-width: 550px) {
.trending__image img {
width: 70%;
height: 70%;
}
.trending__content {
padding: 32px;
}
}
/* END: trending media queries */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment