Skip to content

Instantly share code, notes, and snippets.

@adrianhajdin

adrianhajdin/index.html

Last active July 25, 2024 19:33
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 */
@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.

@KataGut
Copy link

KataGut commented Jul 25, 2024

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

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

You are right, thank u so much!

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