Hello everyone, I will give you all free code, in learning "Change Images Replacement Using HTML, CSS and Javascript". Good luck, don't forget to keep learning and repeat until you can, happy coding and Spirit on.
this is my post for the previous one, you just have to learn it properly, and I will provide the latest updates about teaching web design quickly and easily
the best way is to always learn and practice directly, don't get hung up on confusing code, if you enter the wrong code, don't panic
This is the code HTML and CSS you need learn :
1. HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>channel</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="icons">
<div id="menu-bar" class="fas fa-bars"></div>
<div id="theme-toggler" class="fas fa-moon"></div>
</div>
</header>
<nav class="navbar">
<div class="links">
<a href="#home">home</a>
<a href="#products">products</a>
<a href="#featured">featured</a>
<a href="#deal">deal</a>
<a href="#review">review</a>
</div>
<div id="close" class="fas fa-times"></div>
</nav>
<section class="featured" id="featured">
<div class="box-container">
<div class="box">
<div class="image-container">
<div class="small-image">
<img src="images/pex-1.png" class="small-image-2" alt="">
<img src="images/pex-2.png" class="small-image-2" alt="">
<img src="images/pex-3.png" class="small-image-2" alt="">
</div>
<div class="big-image">
<img src="images/pex-1.png" class="big-image-2" alt="">
</div>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
2. CSS
:root{
--orange:#ff9500;
--white-color:#fff;
--black-color:#333;
--light-color:rgba(0,0,0,.3);
}
*{
font-family: 'raleway', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
transition:.2s linear;
}
html{
font-size: 62.5%;
}
body{
background:#eee;
}
body.active{
--white-color:#111;
--black-color:#fff;
--light-color:rgba(255,255,255,.3);
background:#222;
}
section{
padding:1rem 9%;
}
header{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--white-color);
border-bottom: .1rem solid var(--light-color);
padding:1.5rem 9%;
}
header .icons {
margin: auto;
}
header .icons div{
height: 4rem;
width: 4rem;
font-size: 1.7rem;
line-height: 4rem;
background: var(--black-color);
color:var(--white-color);
text-align: center;
border-radius: 50%;
cursor: pointer;
margin-right: .7rem;
}
header .icons div:hover{
background: var(--orange);
color:#fff;
transform: r(360deg);
}
header.active{
position: fixed;
top:0; left: 0;
z-index: 100;
}
.navbar{
position: fixed;
top:0; left: -120%;
z-index: 1000;
height: 100%;
background: var(--white-color);
padding:3rem;
width: 30rem;
}
.navbar.active{
left: 0;
box-shadow: 0 0 0 100vw var(--light-color);
}
.navbar .links a{
display: block;
border-bottom: .1rem solid var(--light-color);
font-size: 2rem;
padding:1.5rem 0;
color:var(--black-color);
}
.navbar .links a:last-child{
border: none;
}
.navbar .links a:hover{
letter-spacing: .2rem;
color:var(--orange);
}
.navbar #close{
position: absolute;
top:1rem; right:2rem;
font-size: 3rem;
cursor: pointer;
color:var(--black-color);
}
.navbar #close:hover{
color: var(--orange);
}
.featured .box-container{
display: flex;
flex-wrap: wrap;
gap:1.5rem;
width: 50%;
margin: auto;
padding-top: 6rem;
}
.featured .box-container .box{
flex:1 1 30rem;
background: var(--white-color);
border:.1rem solid var(--light-color);
border-radius: .5rem;
padding:1rem;
}
.featured .box-container .box .image-container{
display: flex;
gap:1.5rem;
align-items:center;
padding:1rem;
}
.featured .box-container .box .image-container .small-image{
width:20%;
}
.featured .box-container .box .image-container .big-image{
width:80%;
}
.featured .box-container .box .image-container .small-image img{
width:100%;
padding: .5rem;
margin-bottom: 1rem;
border:.1rem solid var(--light-color);
cursor: pointer;
}
.featured .box-container .box .image-container .big-image img{
width:100%;
}
3. Javascript
let navbar = document.querySelector('.navbar')
document.querySelector('#menu-bar').onclick = () =>{
navbar.classList.toggle('active');
}
document.querySelector('#close').onclick = () =>{
navbar.classList.remove('active');
}
window.onscroll = () =>{
navbar.classList.remove('active');
if(window.scrollY > 100){
document.querySelector('header').classList.add('active');
}else{
document.querySelector('header').classList.remove('active');
}
}
let themeToggler = document.querySelector('#theme-toggler');
themeToggler.onclick = () =>{
themeToggler.classList.toggle('fa-sun');
if(themeToggler.classList.contains('fa-sun')){
document.querySelector('body').classList.add('active');
}else{
document.querySelector('body').classList.remove('active');
}
}
document.querySelectorAll('.small-image-1').forEach(images =>{
images.onclick = () =>{
document.querySelector('.big-image-1').src = images.getAttribute('src');
}
});
document.querySelectorAll('.small-image-2').forEach(images =>{
images.onclick = () =>{
document.querySelector('.big-image-2').src = images.getAttribute('src');
}
});
document.querySelectorAll('.small-image-3').forEach(images =>{
images.onclick = () =>{
document.querySelector('.big-image-3').src = images.getAttribute('src');
}
});
For more details, you can see the Video tutorial and Click link Channel below :
https://youtu.be/NAMJjFktv6E
Don't forget to support my channel by comment, like and subscribe, success for all of us, happy world hereafter. Amin, Good Luck. 😀
Belum ada tanggapan untuk "Change Images Replacement Using HTML, CSS and Javascript"
Post a Comment