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

2 thoughts on “GALLERY SYSTEM

  1. It’s my belief that mesothelioma is definitely the most fatal cancer. It contains unusual qualities. The more I really look at it the harder I am convinced it does not respond like a real solid tissue cancer. In the event mesothelioma is usually a rogue virus-like infection, hence there is the chance for developing a vaccine along with offering vaccination to asbestos open people who are vulnerable to high risk connected with developing foreseeable future asbestos linked malignancies. Thanks for discussing your ideas about this important health issue.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s