使用HTML CSS和JavaScript创建一个响应式万圣节网站设计? +源码下载cid1180
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--=============== FAVICON ===============-->
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
<!--=============== BOXICONS ===============-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!--=============== SWIPER CSS ===============-->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!--=============== CSS ===============-->
<link rel="stylesheet" href="assets/css/styles.css">
<title>Responsive Halloween Website</title>
</head>
<body>
<!--==================== HEADER ====================-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="assets/img/logo.png" alt="" class="nav__logo-img">
Halloween
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">Home</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#trick" class="nav__link">Candy</a>
</li>
<li class="nav__item">
<a href="#new" class="nav__link">New</a>
</li>
<a href="#" class="button button--ghost">Support</a>
</ul>
<div class="nav__close" id="nav-close">
<i class='bx bx-x'></i>
</div>
<img src="assets/img/nav-img.png" alt="" class="nav__img">
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-grid-alt'></i>
</div>
</nav>
</header>
<main class="main">
<!--==================== HOME ====================-->
<section class="home container" id="home">
<div class="swiper home-swiper">
<div class="swiper-wrapper">
<!-- HOME SLIDER 1 -->
<section class="swiper-slide">
<div class="home__content grid">
<div class="home__group">
<img src="assets/img/home1-img.png" alt="" class="home__img">
<div class="home__indicator"></div>
<div class="home__details-img">
<h4 class="home__details-title">The Labu “Reiza”</h4>
<span class="home__details-subtitle">The Living Pumpkin</span>
</div>
</div>
<div class="home__data">
<h3 class="home__subtitle">#1 Top Scariest Ghost</h3>
<h1 class="home__title">UOOOO <br> TRICK OR <br> TREAT!!</h1>
<p class="home__description">Hi, I'm Reiza, people call me "El Labu". I am currently trying to learn
something new, building my own bike with parts made only in Malaysia.
</p>
<div class="home__buttons">
<a href="#" class="button">Book Now</a>
<a href="#" class="button--link button--flex">Track Record <i class='bx bx-right-arrow-alt button__icon'></i></a>
</div>
</div>
</div>
</section>
<!-- HOME SLIDER 2 -->
<section class="swiper-slide">
<div class="home__content grid">
<div class="home__group">
<img src="assets/img/home2-img.png" alt="" class="home__img">
<div class="home__indicator"></div>
<div class="home__details-img">
<h4 class="home__details-title">Adino & Grahami</h4>
<span class="home__details-subtitle">No words can describe them</span>
</div>
</div>
<div class="home__data">
<h3 class="home__subtitle">#2 top Best duo</h3>
<h1 class="home__title">BRING BACK <br> MY COTTON <br> CANDY</h1>
<p class="home__description">Adino steals cotton candy from his brother and eats them all in one bite,
a hungry beast. Grahami can no longer contain his anger towards Adino.
</p>
<div class="home__buttons">
<a href="#" class="button">Book Now</a>
<a href="#" class="button--link button--flex">Track Record <i class='bx bx-right-arrow-alt button__icon'></i></a>
</div>
</div>
</div>
</section>
<!-- HOME SLIDER 3 -->
<section class="swiper-slide">
<div class="home__content grid">
<div class="home__group">
<img src="assets/img/home3-img.png" alt="" class="home__img">
<div class="home__indicator"></div>
<div class="home__details-img">
<h4 class="home__details-title">Captain Sem</h4>
<span class="home__details-subtitle">Veteran Spooky Ghost</span>
</div>
</div>
<div class="home__data">
<h3 class="home__subtitle">#3 Top Scariest Ghost</h3>
<h1 class="home__title">RESPAWN <br> THE SPOOKY <br> SKULL</h1>
<p class="home__description">In search for cute little puppy, Captain Sem has come back from his tragic death.
With his hogwarts certified power he promise to be a hero for all of ghostkind.
</p>
<div class="home__buttons">
<a href="#" class="button">Book Now</a>
<a href="#" class="button--link button--flex">Track Record <i class='bx bx-right-arrow-alt button__icon'></i></a>
</div>
</div>
</div>
</section>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<!--==================== CATEGORY ====================-->
<section class="section category">
<h2 class="section__title">Favorite Scare <br> Category</h2>
<div class="category__container container grid">
<div class="category__data">
<img src="assets/img/category1-img.png" alt="" class="category__img">
<h3 class="category__title">Ghosts</h3>
<p class="category__description">Choose the ghosts, the scariest there are.</p>
</div>
<div class="category__data">
<img src="assets/img/category2-img.png" alt="" class="category__img">
<h3 class="category__title">Pumpkins</h3>
<p class="category__description">You look at the scariest pumpkins there is.</p>
</div>
<div class="category__data">
<img src="assets/img/category3-img.png" alt="" class="category__img">
<h3 class="category__title">Witch Hat</h3>
<p class="category__description">Pick the most stylish witch hats out there.</p>
</div>
</div>
</section>
<!--==================== ABOUT ====================-->
<section class="section about" id="about">
<div class="about__container container grid">
<div class="about__data">
<h2 class="section__title about__title">About Halloween <br> Night</h2>
<p class="about__description">Night of all the saints, or all the dead, is celebrated on October 31 and it is a
very fun international celebration, this celebration comes from ancient origins, and is already
celebrated by everyone.
</p>
<a href="#" class="button">Know more</a>
</div>
<img src="assets/img/about-img.png" alt="" class="about__img">
</div>
</section>
<!--==================== TRICK OR TREAT ====================-->
<section class="section trick" id="trick">
<h2 class="section__title">Trick Or Treat</h2>
<div class="trick__container container grid">
<div class="trick__content">
<img src="assets/img/trick-treat1-img.png" alt="" class="trick__img">
<h3 class="trick__title">Toffee</h3>
<span class="trick__subtitle">Candy</span>
<span class="trick__price">$11.99</span>
<button class="button trick__button">
<i class='bx bx-cart-alt trick__icon'></i>
</button>
</div>
<div class="trick__content">
<img src="assets/img/trick-treat2-img.png" alt="" class="trick__img">
<h3 class="trick__title">Bone</h3>
<span class="trick__subtitle">Accessory</span>
<span class="trick__price">$8.99</span>
<button class="button trick__button">
<i class='bx bx-cart-alt trick__icon'></i>
</button>
</div>
<div class="trick__content">
<img src="assets/img/trick-treat3-img.png" alt="" class="trick__img">
<h3 class="trick__title">Scarecrow</h3>
<span class="trick__subtitle">Accessory</span>
<span class="trick__price">$15.99</span>
<button class="button trick__button">
<i class='bx bx-cart-alt trick__icon'></i>
</button>
</div>
<div class="trick__content">
<img src="assets/img/trick-treat4-img.png" alt="" class="trick__img">
<h3 class="trick__title">Candy Cane</h3>
<span class="trick__subtitle">Candy</span>
<span class="trick__price">$7.99</span>
<button class="button trick__button">
<i class='bx bx-cart-alt trick__icon'></i>
</button>
</div>
<div class="trick__content">
<img src="assets/img/trick-treat5-img.png" alt="" class="trick__img">
<h3 class="trick__title">Pumpkin</h3>
<span class="trick__subtitle">Candy</span>
<span class="trick__price">$19.99</span>
<button class="button trick__button">
<i class='bx bx-cart-alt trick__icon'></i>
</button>
</div>
<div class="trick__content">
<img src="assets/img/trick-treat6-img.png" alt="" class="trick__img">
<h3 class="trick__title">Ghost</h3>
<span class="trick__subtitle">Accessory</span>
<span class="trick__price">$17.99</span>
<button class="button trick__button">
<i class='bx bx-cart-alt trick__icon'></i>
</button>
</div>
</div>
</section>
<!--==================== DISCOUNT ====================-->
<section class="section discount">
<div class="discount__container container grid">
<div class="discount__data">
<h2 class="discount__title">50% Discount <br> On New Products</h2>
<a href="#" class="button">Go to new</a>
</div>
<img src="assets/img/discount-img.png" alt="" class="discount__img">
</div>
</section>
<!--==================== NEW ARRIVALS ====================-->
<section class="section new" id="new">
<h2 class="section__title">New Arrivals</h2>
<div class="new__container container">
<div class="swiper new-swiper">
<div class="swiper-wrapper">
<div class="new__content swiper-slide">
<div class="new__tag">New</div>
<img src="assets/img/new1-img.png" alt="" class="new__img">
<h3 class="new__title">Haunted House</h3>
<span class="new__subtitle">Accessory</span>
<div class="new__prices">
<span class="new__price">$14.99</span>
<span class="new__discount">$29.99</span>
</div>
<button class="button new__button">
<i class='bx bx-cart-alt new__icon'></i>
</button>
</div>
<div class="new__content swiper-slide">
<div class="new__tag">New</div>
<img src="assets/img/new2-img.png" alt="" class="new__img">
<h3 class="new__title">Halloween Candle</h3>
<span class="new__subtitle">Accessory</span>
<div class="new__prices">
<span class="new__price">$11.99</span>
<span class="new__discount">$21.99</span>
</div>
<button class="button new__button">
<i class='bx bx-cart-alt new__icon'></i>
</button>
</div>
<div class="new__content swiper-slide">
<div class="new__tag">New</div>
<img src="assets/img/new3-img.png" alt="" class="new__img">
<h3 class="new__title">Witch Hat</h3>
<span class="new__subtitle">Accessory</span>
<div class="new__prices">
<span class="new__price">$4.99</span>
<span class="new__discount">$9.99</span>
</div>
<button class="button new__button">
<i class='bx bx-cart-alt new__icon'></i>
</button>
</div>
<div class="new__content swiper-slide">
<div class="new__tag">New</div>
<img src="assets/img/new4-img.png" alt="" class="new__img">
<h3 class="new__title">Rip</h3>
<span class="new__subtitle">Accessory</span>
<div class="new__prices">
<span class="new__price">$24.99</span>
<span class="new__discount">$44.99</span>
</div>
<button class="button new__button">
<i class='bx bx-cart-alt new__icon'></i>
</button>
</div>
<div class="new__content swiper-slide">
<div class="new__tag">New</div>
<img src="assets/img/new5-img.png" alt="" class="new__img">
<h3 class="new__title">Terrifying Crystal Ball</h3>
<span class="new__subtitle">Accessory</span>
<div class="new__prices">
<span class="new__price">$5.99</span>
<span class="new__discount">$12.99</span>
</div>
<button class="button new__button">
<i class='bx bx-cart-alt new__icon'></i>
</button>
</div>
<div class="new__content swiper-slide">
<div class="new__tag">New</div>
<img src="assets/img/new6-img.png" alt="" class="new__img">
<h3 class="new__title">Witch Broom</h3>
<span class="new__subtitle">Accessory</span>
<div class="new__prices">
<span class="new__price">$7.99</span>
<span class="new__discount">$14.99</span>
</div>
<button class="button new__button">
<i class='bx bx-cart-alt new__icon'></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!--==================== OUR NEWSLETTER ====================-->
<section class="section newsletter">
<div class="newsletter__container container">
<h2 class="section__title">Our Newsletter</h2>
<p class="newsletter__description">
Promotion new products and sales. Directly to your inbox
</p>
<form action="" class="newsletter__form">
<input type="text" placeholder="Enter your email" class="newsletter__input">
<button class="button">
Subscribe
</button>
</form>
</div>
</section>
</main>
<!--==================== FOOTER ====================-->
<footer class="footer section">
<div class="footer__container container grid">
<div class="footer__content">
<a href="#" class="footer__logo">
<img src="assets/img/logo.png" alt="" class="footer__logo-img">
Halloween
</a>
<p class="footer__description">Enjoy the scariest night <br> of your life.</p>
<div class="footer__social">
<a href="https://www.facebook.com/" target="_blank" class="footer__social-link">
<i class='bx bxl-facebook'></i>
</a>
<a href="https://www.instagram.com/" target="_blank" class="footer__social-link">
<i class='bx bxl-instagram-alt' ></i>
</a>
<a href="https://twitter.com/" target="_blank" class="footer__social-link">
<i class='bx bxl-twitter' ></i>
</a>
</div>
</div>
<div class="footer__content">
<h3 class="footer__title">About</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">About Us</a>
</li>
<li>
<a href="#" class="footer__link">Features</a>
</li>
<li>
<a href="#" class="footer__link">News</a>
</li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Our Services</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">Pricing</a>
</li>
<li>
<a href="#" class="footer__link">Discounts</a>
</li>
<li>
<a href="#" class="footer__link">Shipping mode</a>
</li>
</ul>
</div>
<div class="footer__content">
<h3 class="footer__title">Our Company</h3>
<ul class="footer__links">
<li>
<a href="#" class="footer__link">Blog</a>
</li>
<li>
<a href="#" class="footer__link">About us</a>
</li>
<li>
<a href="#" class="footer__link">Our mision</a>
</li>
</ul>
</div>
</div>
<span class="footer__copy">© Bedimcode. All rigths reserved</span>
<img src="assets/img/footer1-img.png" alt="" class="footer__img-one">
<img src="assets/img/footer2-img.png" alt="" class="footer__img-two">
</footer>
<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<i class='bx bx-up-arrow-alt scrollup__icon'></i>
</a>
<!--=============== SCROLL REVEAL ===============-->
<script src="assets/js/scrollreveal.min.js"></script>
<!--=============== SWIPER JS ===============-->
<script src="assets/js/swiper-bundle.min.js"></script>
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
</body>
</html>
css
/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
--header-height: 3.5rem;
/*========== Colors ==========*/
--hue: 14;
--first-color: hsl(var(--hue), 91%, 54%);
--first-color-alt: hsl(var(--hue), 91%, 50%);
--title-color: hsl(var(--hue), 4%, 100%);
--text-color: hsl(var(--hue), 4%, 85%);
--text-color-light: hsl(var(--hue), 4%, 55%);
/*Green gradient*/
--body-color: linear-gradient(90deg, hsl(104, 28%, 40%) 0%, hsl(58, 28%, 40%) 100%);
--container-color: linear-gradient(136deg, hsl(104, 28%, 35%) 0%, hsl(58, 28%, 35%) 100%);
/*Red gradient*/
/* --body-color: linear-gradient(90deg, hsl(360, 28%, 40%) 0%, hsl(18, 28%, 40%) 100%);
--container-color: linear-gradient(136deg, hsl(360, 28%, 35%) 0%, hsl(18, 28%, 35%) 100%); */
/*Black solid*/
/* --body-color: hsl(30, 8%, 8%);
--container-color: hsl(30, 8%, 10%); */
/*========== Font and typography ==========*/
--body-font: 'Poppins', sans-serif;
--biggest-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;
/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;
--font-black: 900;
/*========== Margenes Bottom ==========*/
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
/*========== z index ==========*/
--z-tooltip: 10;
--z-fixed: 100;
}
/* Responsive typography */
@media screen and (min-width: 992px) {
:root {
--biggest-font-size: 4rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*=============== BASE ===============*/
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background: var(--body-color);
color: var(--text-color);
}
h1,h2,h3,h4{
color: var(--title-color);
font-weight: var(--font-semi-bold);
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
height: auto;
}
button,
input{
border: none;
outline: none;
}
button{
cursor: pointer;
font-family: var(--body-font);
font-size: var(--normal-font-size);
}
/*=============== REUSABLE CSS CLASSES ===============*/
.section{
padding: 4.5rem 0 2rem;
}
.section__title{
font-size: var(--h2-font-size);
margin-bottom: var(--mb-2);
text-align: center;
}
/*=============== LAYOUT ===============*/
.container{
max-width: 968px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}
.grid{
display: grid;
}
.main{
overflow: hidden; /*For animation*/
}
/*=============== HEADER ===============*/
.header{
width: 100%;
background: var(--body-color);
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
}
/*=============== NAV ===============*/
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo{
display: flex;
align-items: center;
column-gap: .5rem;
font-weight: var(--font-medium);
}
.nav__logo-img{
width: 1.25rem;
}
.nav__link,
.nav__logo,
.nav__toggle,
.nav__close{
color: var(--title-color);
}
.nav__toggle{
font-size: 1.25rem;
cursor: pointer;
}
@media screen and (max-width: 767px){
.nav__menu{
position: fixed;
width: 100%;
background: var(--container-color);
top: -150%;
left: 0;
padding: 3.5rem 0;
transition: .4s;
z-index: var(--z-fixed);
border-radius: 0 0 1.5rem 1.5rem;
}
}
.nav__img{
width: 100px;
position: absolute;
top: 0;
left: 0;
}
.nav__close{
font-size: 1.8rem;
position: absolute;
top: .5rem;
right: .7rem;
cursor: pointer;
}
.nav__list{
display: flex;
flex-direction: column;
align-items: center;
row-gap: 1.5rem;
}
.nav__link{
text-transform: uppercase;
font-weight: var(--font-black);
transition: .4s;
}
.nav__link:hover{
color: var(--text-color);
}
/* Show menu */
.show-menu{
top: 0;
}
/* Change background header */
.scroll-header{
background: var(--container-color);
}
/* Active link */
.active-link{
position: relative;
}
.active-link::before{
content: '';
position: absolute;
bottom: -.75rem;
left: 45%;
width: 5px;
height: 5px;
background-color: var(--title-color);
border-radius: 50%;
}
/*=============== HOME ===============*/
.home__content{
row-gap: 1rem;
}
.home__group{
display: grid;
position: relative;
padding-top: 2rem;
}
.home__img{
height: 250px;
justify-self: center;
}
.home__indicator{
width: 8px;
height: 8px;
background-color: var(--title-color);
border-radius: 50%;
position: absolute;
top: 7rem;
right: 2rem;
}
.home__indicator::after{
content: '';
position: absolute;
width: 1px;
height: 48px;
background-color: var(--title-color);
top: -3rem;
right: 45%;
}
.home__details-img{
position: absolute;
right: .5rem;
}
.home__details-title,
.home__details-subtitle{
display: block;
font-size: var(--small-font-size);
text-align: right;
}
.home__subtitle{
font-size: var(--h3-font-size);
text-transform: uppercase;
margin-bottom: var(--mb-1);
}
.home__title{
font-size: var(--biggest-font-size);
font-weight: var(--font-black);
line-height: 109%;
margin-bottom: var(--mb-1);
}
.home__description{
margin-bottom: var(--mb-1);
}
.home__buttons{
display: flex;
justify-content: space-between;
}
/* Swiper Class */
.swiper-pagination{
position: initial;
margin-top: var(--mb-1);
}
.swiper-pagination-bullet{
width: 5px;
height: 5px;
background-color: var(--title-color);
opacity: 1;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
margin: 0 .5rem;
}
.swiper-pagination-bullet-active{
width: 1.5rem;
height: 5px;
border-radius: .5rem;
}
/*=============== BUTTONS ===============*/
.button{
display: inline-block;
background-color: var(--first-color);
color: var(--title-color);
padding: 1rem 1.75rem;
border-radius: .5rem;
font-weight: var(--font-medium);
transition: .3s;
}
.button:hover{
background-color: var(--first-color-alt);
}
.button__icon{
font-size: 1.25rem;
}
.button--ghost{
border: 2px solid;
background-color: transparent;
border-radius: 3rem;
padding: .75rem 1.5rem;
}
.button--ghost:hover{
background: none;
}
.button--link{
color: var(--title-color);
}
.button--flex{
display: inline-flex;
align-items: center;
column-gap: .5rem;
}
/*=============== CATEGORY ===============*/
.category__container{
grid-template-columns: repeat(2, 1fr);
gap: 1rem 2rem;
}
.category__data{
text-align: center;
}
.category__img{
width: 120px;
margin-bottom: var(--mb-0-75);
transition: .3s;
}
.category__title{
margin-bottom: var(--mb-0-25);
}
.category__data:hover .category__img{
transform: translateY(-.5rem);
}
/*=============== ABOUT ===============*/
.about__container{
row-gap: 2rem;
}
.about__data{
text-align: center;
}
.about__description{
margin-bottom: var(--mb-2);
}
.about__img{
width: 200px;
justify-self: center;
}
/*=============== TRICK OR TREAT ===============*/
.trick__container{
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
padding-top: 1rem;
}
.trick__content{
position: relative;
background: var(--container-color);
border-radius: 1rem;
padding: 1.5rem 0 1rem 0;
text-align: center;
overflow: hidden;
}
.trick__img{
width: 90px;
transition: .3s;
}
.trick__subtitle,
.trick__price{
display: block;
}
.trick__subtitle{
font-size: var(--smaller-font-size);
margin-bottom: var(--mb-0-5);
}
.trick__title,
.trick__price{
color: var(--title-color);
font-weight: var(--font-medium);
font-size: var(--normal-font-size);
}
.trick__button{
display: inline-flex;
padding: .5rem;
border-radius: .25rem .25rem .75rem .25rem;
position: absolute;
right: -3rem;
bottom: 0;
}
.trick__icon{
font-size: 1.25rem;
color: var(--title-color);
}
.trick__content:hover .trick__img{
transform: translateY(-.5rem);
}
.trick__content:hover .trick__button{
right: 0;
}
/*=============== DISCOUNT ===============*/
.discount__container{
background: var(--container-color);
border-radius: 1rem;
padding: 2.5rem 0 1.5rem;
row-gap: .75rem;
}
.discount__data{
text-align: center;
}
.discount__title{
font-size: var(--h2-font-size);
margin-bottom: var(--mb-2);
}
.discount__img{
width: 200px;
justify-self: center;
}
/*=============== NEW ARRIVALS ===============*/
.new__container{
padding-top: 1rem;
}
.new__img{
width: 120px;
margin-bottom: var(--mb-0-5);
transition: .3s;
}
.new__content{
position: relative;
background: var(--container-color);
width: 242px;
padding: 2rem 0 1.5rem 0;
border-radius: .75rem;
text-align: center;
overflow: hidden;
}
.new__tag{
position: absolute;
top: 8%;
left: 8%;
background-color: var(--first-color);
color: var(--title-color);
font-size: var(--small-font-size);
padding: .25rem .5rem;
border-radius: .25rem;
}
.new__title{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.new__subtitle{
display: block;
font-size: var(--small-font-size);
margin-bottom: var(--mb-0-5);
}
.new__prices{
display: inline-flex;
align-items: center;
column-gap: .5rem;
}
.new__price{
font-weight: var(--font-medium);
color: var(--title-color);
}
.new__discount{
color: var(--first-color);
font-size: var(--smaller-font-size);
text-decoration: line-through;
font-weight: var(--font-medium);
}
.new__button{
display: inline-flex;
padding: .5rem;
border-radius: .25rem .25rem .75rem .25rem;
position: absolute;
bottom: 0;
right: -3rem;
}
.new__icon{
font-size: 1.25rem;
}
.new__content:hover .new__img{
transform: translateY(-.5rem);
}
.new__content:hover .new__button{
right: 0;
}
/*=============== NEWSLETTER ===============*/
.newsletter__description{
text-align: center;
margin-bottom: var(--mb-1-5);
}
.newsletter__form{
background: var(--container-color);
padding: 1rem;
display: flex;
justify-content: space-between;
border-radius: .75rem;
}
.newsletter__input{
width: 70%;
padding: 0 .5rem;
background: none;
color: var(--title-color);
}
.newsletter__input::placeholder{
color: var(--text-color);
}
/*=============== FOOTER ===============*/
.footer{
position: relative;
overflow: hidden;
}
.footer__img-one,
.footer__img-two{
position: absolute;
transition: .3s;
}
.footer__img-one{
width: 100px;
top: 6rem;
right: -2rem;
}
.footer__img-two{
width: 150px;
bottom: 4rem;
right: 4rem;
}
.footer__img-one:hover,
.footer__img-two:hover{
transform: translateY(-.5rem);
}
.footer__container{
row-gap: 2rem;
}
.footer__logo{
display: flex;
align-items: center;
column-gap: .5rem;
margin-bottom: var(--mb-1);
font-weight: var(--font-medium);
color: var(--title-color);
}
.footer__logo-img{
width: 20px;
}
.footer__description{
margin-bottom: var(--mb-2-5);
}
.footer__social{
display: flex;
column-gap: .75rem;
}
.footer__social-link{
display: inline-flex;
background: var(--container-color);
padding: .25rem;
border-radius: .25rem;
color: var(--title-color);
font-size: 1rem;
}
.footer__social-link:hover{
background: var(--body-color);
}
.footer__title{
font-size: var(--h3-font-size);
margin-bottom: var(--mb-1);
}
.footer__links{
display: grid;
row-gap: .35rem;
}
.footer__link{
font-size: var(--small-font-size);
color: var(--text-color);
transition: .3s;
}
.footer__link:hover{
color: var(--title-color);
}
.footer__copy{
display: block;
text-align: center;
font-size: var(--smaller-font-size);
margin-top: 4.5rem;
}
/*=============== SCROLL UP ===============*/
.scrollup{
position: fixed;
background: var(--container-color);
right: 1rem;
bottom: -20%;
display: inline-flex;
padding: .3rem;
border-radius: .25rem;
z-index: var(--z-tooltip);
opacity: .8;
transition: .4s;
}
.scrollup__icon{
font-size: 1.25rem;
color: var(--title-color);
}
.scrollup:hover{
background: var(--container-color);
opacity: 1;
}
/* Show Scroll Up*/
.show-scroll{
bottom: 3rem;
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
width: 0.6rem;
background: #413e3e;
}
::-webkit-scrollbar-thumb{
background: #272525;
border-radius: .5rem;
}
/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px){
.container{
margin-left: var(--mb-1);
margin-right: var(--mb-1);
}
.home__img{
height: 200px;
}
.home__buttons{
flex-direction: column;
width: max-content;
row-gap: 1rem;
}
.category__container,
.trick__container{
grid-template-columns: .8fr;
justify-content: center;
}
}
/* For medium devices */
@media screen and (min-width: 576px){
.about__container{
grid-template-columns: .8fr;
justify-content: center;
}
.newsletter__container{
display: grid;
grid-template-columns: .7fr;
justify-content: center;
}
.newsletter__description{
padding: 0 3rem;
}
}
@media screen and (min-width: 767px){
body{
margin: 0;
}
.section{
padding: 7rem 0 2rem;
}
.nav{
height: calc(var(--header-height) + 1.5rem);
}
.nav__img,
.nav__close,
.nav__toggle{
display: none;
}
.nav__list{
flex-direction: row;
column-gap: 3rem;
}
.nav__link{
text-transform: initial;
font-weight: initial;
}
.home__content{
padding: 8rem 0 2rem;
grid-template-columns: repeat(2, 1fr);
gap: 4rem;
}
.home__img{
height: 300px;
}
.swiper-pagination{
margin-top: var(--mb-2);
}
.category__container{
grid-template-columns: repeat(3, 200px);
justify-content: center;
}
.about__container{
grid-template-columns: repeat(2, 1fr);
align-items: center;
}
.about__title,
.about__data{
text-align: initial;
}
.about__img{
width: 250px;
}
.trick__container{
grid-template-columns: repeat(3, 200px);
justify-content: center;
gap: 2rem;
}
.discount__container{
grid-template-columns: repeat(2, max-content);
justify-content: center;
align-items: center;
column-gap: 3rem;
padding: 3rem 0;
border-radius: 3rem;
}
.discount__img{
width: 350px;
order: -1;
}
.discount__data{
padding-right: 6rem;
}
.newsletter__container{
grid-template-columns: .5fr;
}
.footer__container{
grid-template-columns: repeat(4, 1fr);
justify-items: center;
column-gap: 1rem;
}
.footer__img-two{
right: initial;
bottom: 0;
left: 15%;
}
}
/* For large devices */
@media screen and (min-width: 992px){
.container{
margin-left: auto;
margin-right: auto;
}
.section__title{
font-size: var(--h1-font-size);
margin-bottom: 3rem;
}
.home__content{
padding-top: 9rem;
gap: 3rem;
}
.home__group{
padding-top: 0;
}
.home__img{
height: 400px;
transform: translateY(-3rem);
}
.home__indicator{
top: initial;
right: initial;
bottom: 15%;
left: 45%;
}
.home__indicator::after{
top: 0;
height: 75px;
}
.home__details-img{
bottom: 0;
right: 58%;
}
.home__title{
margin-bottom: var(--mb-1-5);
}
.home__description{
margin-bottom: var(--mb-2-5);
padding-right: 2rem;
}
.category__container{
column-gap: 8rem;
}
.category__img{
width: 200px;
}
.about__container{
column-gap: 7rem;
}
.about__img{
width: 350px;
}
.about__description{
padding-right: 2rem;
}
.trick__container{
gap: 3.5rem;
}
.trick__content{
border-radius: 1.5rem;
}
.trick__img{
width: 110px;
}
.trick__title{
font-size: var(--h3-font-size);
}
.discount__container{
column-gap: 7rem;
}
.new__content{
width: 310px;
border-radius: 1rem;
padding: 2rem 0;
}
.new__img{
width: 150px;
}
.new__img,
.new__subtitle{
margin-bottom: var(--mb-1);
}
.new__title{
font-size: var(--h3-font-size);
}
.footer__copy{
margin-top: 6rem;
}
}
@media screen and (min-width: 1200px){
.home__img{
height: 420px;
}
.swiper-pagination{
margin-top: var(--mb-2-5);
}
.footer__img-one{
width: 120px;
}
.footer__img-two{
width: 180px;
top: 30%;
left: -3%;
}
}
js
/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
navToggle = document.getElementById('nav-toggle'),
navClose = document.getElementById('nav-close')
/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
navToggle.addEventListener('click', () =>{
navMenu.classList.add('show-menu')
})
}
/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
navClose.addEventListener('click', () =>{
navMenu.classList.remove('show-menu')
})
}
/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')
function linkAction(){
const navMenu = document.getElementById('nav-menu')
// When we click on each nav__link, we remove the show-menu class
navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))
/*=============== HOME SWIPER ===============*/
let homeSwiper = new Swiper(".home-swiper", {
spaceBetween: 30,
loop: 'true',
pagination: {
el: ".swiper-pagination",
clickable: true,
},
})
/*=============== CHANGE BACKGROUND HEADER ===============*/
function scrollHeader(){
const header = document.getElementById('header')
// When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
if(this.scrollY >= 50) header.classList.add('scroll-header'); else header.classList.remove('scroll-header')
}
window.addEventListener('scroll', scrollHeader)
/*=============== NEW SWIPER ===============*/
let newSwiper = new Swiper(".new-swiper", {
centeredSlides: true,
slidesPerView: "auto",
loop: 'true',
spaceBetween: 16,
});
/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')
function scrollActive(){
const scrollY = window.pageYOffset
sections.forEach(current =>{
const sectionHeight = current.offsetHeight,
sectionTop = current.offsetTop - 50,
sectionId = current.getAttribute('id')
if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
}else{
document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
}
})
}
window.addEventListener('scroll', scrollActive)
/*=============== SHOW SCROLL UP ===============*/
function scrollUp(){
const scrollUp = document.getElementById('scroll-up');
// When the scroll is higher than 460 viewport height, add the show-scroll class to the a tag with the scroll-top class
if(this.scrollY >= 460) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)
/*=============== SCROLL REVEAL ANIMATION ===============*/
const sr = ScrollReveal({
origin: 'top',
distance: '60px',
duration: 2500,
delay: 400,
// reset: true
})
sr.reveal(`.home-swiper, .new-swiper, .newsletter__container`)
sr.reveal(`.category__data, .trick__content, .footer__content`,{interval: 100})
sr.reveal(`.about__data, .discount__img`,{origin: 'left'})
sr.reveal(`.about__img, .discount__data`,{origin: 'right'})
获取源码: responsive-halloween-website-main
下载数:175人次, 文件大小: 1.7 MB, 上传日期: 2022年-1月-12日
公众号回复:gcode 获取解压密码
1,994 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
