Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin

adrianhajdin/index.html

Last active April 20, 2024 07:51
Show Gist options
  • Save adrianhajdin/cad20aad1fefa9163a449e8feb91b602 to your computer and use it in GitHub Desktop.
Save adrianhajdin/cad20aad1fefa9163a449e8feb91b602 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__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 */
@Afaqahmad1122
Copy link

perfect! it's gonna help me

@Umer-Khokhar
Copy link

Thanks!

@xosnrdev
Copy link

cool

@Osimitzu
Copy link

Nice:D

@Nickson2511
Copy link

nice

@RohanMankame
Copy link

Thank you for your amazing tutorial!!!

@Rohitkumar2618
Copy link

everything was working but the animation was not happen in my case

@anbarasu97
Copy link

Thanks

@NembotJules
Copy link

thanks!

@sebbyapudo
Copy link

Nice project! Comprehensive walk through 👍💯

@itsimran02
Copy link

everything was working but the animation was not happen in my case

you may not have applied display inline-block to the element

@callMeZu
Copy link

tysm for the tutorial 😁

@dev-bello
Copy link

where please, cuz mine is also not working

@Yordinia
Copy link

Yordinia commented Jul 1, 2023

Yaeh, I can't thank you enough !

@SeraphimYobel
Copy link

wow so neat!

@TerryG-Coder
Copy link

Woow! Thank you so much. I have started learning Web Dev 2weeks ago from scratch and I want to become a Fullstack Dev.
I want to say your content is really helping me.

@RohithAkula22
Copy link

everything was working but the animation was not happen in my case

What is the problem, try to check in the dev tools console for any errors

@itsnobledean
Copy link

Every Single Course I Have Come Across In The Web Development Industry ALLLLLLLLLLLLL Have Been Poorly Planned And Executed. Literally Udemy, Youtube, and I'm afraid to pay for these trash ass services. As a beginner, I'd like to know why I'm using inset, opposed to just using it. If you're teaching a beginner, this is not the course. You will not get any explanations, nor will you have a solid grasp of any concept. You're simply following along while he build this site. He expects you to buy a hosting site, with his link for this tutorial as well. I'm at the 22:40 mark and he has completely skipped the rest of the heading styles, to go to the hero. How is that much video removed? How do I get any grasp of those concepts you went over while building? This is someone simply sitting in front of a web page and showing you how to follow him while he build it. You will not gain ANYTHING from this 2:20:44 long video.

@ismailkohail
Copy link

ismailkohail commented Aug 14, 2023 •
edited

in "missed-navbar-code.css" you forgot to add ".header__logo h4" because in the video you only added "padding-left" and "color" in ".header__logo h4", and also the z-index in ".header__logo-overlay" should be -1

https://gist.github.com/ismailkohail/f2f647b310fd429cf49144f1d0ec33b8

@AaadityaG
Copy link

Thanks...✨✨

@ra8200
Copy link

ra8200 commented Oct 8, 2023 •
edited

I like your videos. I loved the Open AI applications you did. I did them and added them to my portfolio. Thank you for the help and videos. But in this video... at 22 minutes you went from adding .header__logo h4's styles but then stopped and then there was a page of code you didn't show. Did the camera stop recording? I'm going to finish it but this video could have been better. Read the comments.

you will need to do:

npm install aos

or youll keep getting errors every time you npm run dev .

In the header.css file you need to change the following
.header__logo-overlay, the z-index needs to be -1 not 1

the rest of the code you will have to get from the github repo.

@bhavesh70
Copy link

Thanks man !

@cv13399
Copy link

cv13399 commented Apr 20, 2024

I like your videos. I loved the Open AI applications you did. I did them and added them to my portfolio. Thank you for the help and videos. But in this video... at 22 minutes you went from adding .header__logo h4's styles but then stopped and then there was a page of code you didn't show. Did the camera stop recording? I'm going to finish it but this video could have been better. Read the comments.

you will need to do:

npm install aos

or youll keep getting errors every time you npm run dev .

In the header.css file you need to change the following .header__logo-overlay, the z-index needs to be -1 not 1

the rest of the code you will have to get from the github repo.

Thanks man, this really helped.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment