GALLERY SYSTEM

Steps to follow : –

  1. Create HTML page( copy web.html code below )
  2. Create CSS page( copy style.css code below )
  3. Link them using link property in html page

<link rel=”stylesheet” type=”text/css” href=”style.css”>

web.html page

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>MyGallery</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body id=”body” class=”body”>
<div class=”obts_name_animate”>
<h1>WELCOME</h1>
<h3>TO</h3>
<h2>MyGallery</h2>
</div><br>

<hr class=”hr1″>

<nav class=”main_nav”>
<a href=”web.html”><div class=”nav1″>HOME</div></a>
<a href=”#headphones”><div class=”nav2″>HEAD PHONES</div></a>
<a href=”#earphones”><div class=”nav3″>EAR PHONES</div></a>
<a href=”#mac”><div class=”nav4″>MAC</div></a>
<a href=”#mobilephones”><div class=”nav5″>MOBILE PHONES</div></a>
<a href=”#datacables”><div class=”nav6″>DATA CABLES</div></a>
<a href=”#chargers”><div class=”nav7″>CHARGERS</div></a>
<a href=”#watches”><div class=”nav8″>WATCHES</div></a>
<a href=”#mobilecovers”><div class=”nav9″>MOBILE COVERS</div></a>
<a href=”#laptops”><div class=”nav10″>LAPTOPS</div></a>
</nav>
<a name=”headphones”>
<div class=”div_headphone”>HEADPHONES</div>
</a>
<div class=”head_main”>
<img src=”hp1.jpg”><img src=”hp2.jpg”><img src=”hp3.jpg”>
</div>

<div class=”head_main1″>
<img src=”hp4.jpg”><img src=”hp5.jpg”><img src=”hp6.jpg”>
</div>

<hr class=”hr2″>

<a name=”earphones”>
<div class=”div_earphone”>EARPHONES</div></a>
<div class=”ear_main”>
<img src=”ear1.jpg”><img src=”ear2.jpg”><img src=”ear3.jpg”><img src=”ear4.jpg”>
</div>
<div class=”ear_main1″>
<img src=”ear5.jpg”><img src=”ear6.jpg”><img src=”ear7.jpg”><img src=”ear8.jpg”>
</div>

<hr class=”hr3″>

<a name=”mac”>
<div class=”div_mac”>MAC</div></a>
<div class=”mac_main”>
<img src=”mac1.jpg”><img src=”mac2.jpg”><img src=”mac3.jpg”><img src=”mac4.jpg”>
</div>
<div class=”mac_main1″>
<img src=”mac5.jpg”><img src=”mac6.jpg”><img src=”mac7.jpg”><img src=”mac8.jpg”>
</div>
<hr class=”hr4″>

<a name=”mobilephones”>
<div class=”div_mob”>MOBILE PHONES</div></a>
<div class=”mob_main”>
<img src=”mob1.jpg”><img src=”mob2.jpg”><img src=”mob3.jpg”><img src=”mob4.jpg”>
</div>
<div class=”mob_main1″>
<img src=”mob5.jpg”><img src=”mob6.jpg”><img src=”mob7.jpg”><img src=”mob8.jpg”>
</div>

<hr class=”hr5″>

<a name=”datacables”>
<div class=”div_cable”>DATA CABLES</div></a>
<div class=”cable_main”>
<img src=”cable1.jpg”><img src=”cable2.jpg”><img src=”cable3.jpg”><img src=”cable4.jpg”>
</div>
<div class=”cable_main1″>
<img src=”cable5.jpg”><img src=”cable6.jpg”><img src=”cable7.jpg”><img src=”cable8.jpg”>
</div>

<hr class=”hr6″>

<a name=”chargers”>
<div class=”div_char”>CHARGERS</div></a>
<div class=”char_main”>
<img src=”char1.jpg”><img src=”char2.jpg”><img src=”char3.jpg”><img src=”char4.jpg”>
</div>
<div class=”char_main1″>
<img src=”char5.jpg”><img src=”char6.jpg”><img src=”char7.jpg”><img src=”char8.jpg”>
</div>

<hr class=”hr7″>

<a name=”watches”>
<div class=”div_watch”>WATCHES</div></a>
<div class=”watch_main”>
<img src=”watch1.jpg”><img src=”watch2.jpg”><img src=”watch3.jpg”><img src=”watch4.jpg”>
</div>
<div class=”watch_main1″>
<img src=”watch5.jpg”><img src=”watch6.jpg”><img src=”watch7.jpg”><img src=”watch8.jpg”>
</div>

<hr class=”hr8″>

<a name=”mobilecovers”>
<div class=”div_cover”>MOBILE COVERS</div></a>
<div class=”cover_main”>
<img src=”cover1.jpg”><img src=”cover2.jpg”><img src=”cover3.jpg”><img src=”cover4.jpg”>
</div>
<div class=”cover_main1″>
<img src=”cover5.jpg”><img src=”cover6.jpg”><img src=”cover7.jpg”><img src=”cover8.jpg”>
</div>

<hr class=”hr9″>

<a name=”laptops”>
<div class=”div_laptops”>LAPTOPS</div></a>
<div class=”laptops_main”>
<img src=”lap1.jpg”><img src=”lap2.jpg”><img src=”lap3.jpg”><img src=”lap4.jpg”>
</div>
<div class=”laptops_main1″>
<img src=”lap5.jpg”><img src=”lap6.jpg”><img src=”lap7.jpg”><img src=”lap8.jpg”>
</div>
<center><div class=”lastdiv”>&copy;2020 Deepak Dhingan “<a href=”web.html”>MyGallery</a>”. All Rights Reserved.</div></center>

<button onclick=”topFunction()” id=”myBtn” style=”width:50px;”title=”Go to top”>▲</button>

<div style=”background-color:green;padding-top:0px;margin-top:-190px;”></div>
<script>
var mybutton = document.getElementById(“myBtn”);
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = “block”;
} else {
mybutton.style.display = “none”;
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

</script>
</body>
</html>

style.css page

body{background:url(deepak.jpg);font-weight:bold;
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
}

.main_nav{line-height:20px;width:220px;margin-left:-9px;margin-top:-17px;
border-left:2px solid #000;border-right:2px solid #000;border-bottom:2px solid #000;
}
.main_nav div{padding:20px;color:#f2f2f2;border:2px;background:#000;}
.main_nav div:hover{color:#112233;background:#fff;border-left:4px solid #006666;}

.hr1{border:none;margin-left:-9px;margin-top:-40px;margin-right:-5px;height:20px;background:url(mac1.jpg);font-weight:bold;
background-repeat:no-repeat;
background-size:cover;background-attachment:fixed;}

.obts_name_animate{margin-top:-30px;margin-left:-700px;margin-right:-5px;transition:all 2s;background:url(mac1.jpg);font-weight:bold;
background-repeat:no-repeat;
background-size:cover;background-attachment:fixed;padding-bottom:50px;padding-top:50px;position:static;}
.obts_name_animate h3{margin-left:99px;}
.obts_name_animate h2{margin-left:20px;}
body:hover .obts_name_animate{padding-left:1250px;}
.obts_name_animate h1{color:#1affa3;font-size:45px;}
.obts_name_animate h2{color:#ff6666;font-size:45px;}
.obts_name_animate h3{color:#fff;}
a{text-decoration:none;}

.div_headphone{text-align:center;float:left;margin-left:218px;margin-top:-590px;padding-left:430px;padding-right:515px;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.head_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.head_main{float:left;margin-left:255px;margin-top:-550px;}
.head_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}
.head_main1{float:left;margin-left:255px;margin-top:-250px;}
.div_earphone{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.ear_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.ear_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}



.div_mac{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.mac_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.mac_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}




.div_mob{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.mob_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.mob_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}

.div_cable{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.cable_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.cable_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}


.div_char{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.char_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.char_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}


.div_watch{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.watch_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.watch_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}

.div_cover{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.cover_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.cover_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}


.div_laptops{text-align:center;font-size:25px;background:none;box-shadow:2px 2px 7px #fff;color:#ff6666;}
.laptops_main img{width:250px;height:200px;margin:40px;border-radius:5px;}
.laptops_main1 img{width:250px;height:200px;margin:40px;border-radius:5px;}


.hr2,.hr3,.hr4,.hr5,.hr6,.hr7,.hr8,.hr9{margin-top:50px;background:green;border:2px solid green;height:20px;border-radius:75px;}
.lastdiv{background:#000;animation-duration:20s;animation-iteration-count:infinite;animation-name:ex;margin-left:5px;height:20px;width:1250px;margin-top:50px;color:#ff6666;font-size:20px;text-transform:uppercase;padding:15px;font-weight:bold;box-shadow:2px 2px 7px #ff6666;border-radius:5px;}

.lastdiv a{text-decoration:none;color:#ff6666;}

#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
font-size: 18px;
border: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
transition:all 3s;
}


#myBtn:hover {
background-color: #c6ffb3;
transform:rotateY(180deg);
}

WEB PAGE VIEW

To follow my blog to click below

© WebCoder.com