photo gallery using html and css
Learn how to make photo gallery by using HTML and CSS, Any buddy can follow the tutorial, Its created for a beginner and intermediates who are learning html and css.
If you don’t have knowledge of html and css, than you can watch my HTML and CSS tutorial playlist, its specially created for the beginners and intermediates.
<!DOCTYPE html>
<html>
<head>
<title>Learning CSS</title>
<link href="https://fonts.googleapis.com/css?family=Dokdo" rel="stylesheet">
<style type="text/css">
*{
margin: 0px;
}
h1{
text-align: center;
}
p{
font-size: 55px;
}
header{
font-family: 'Dokdo', cursive;
font-size: 30px;
padding: 20px;
}
main{
margin-left: 120px;
width: 100%;
margin-top: 40px;
}
.box{
width: 20%;
float: left;
padding: 7px;
padding-left: 10px;
display: block;
}
img{
width: 100%;
border-radius: 4px;
}
img:hover{
transform: scale(1.3,1.3);
transition: .3s transform;
}
</style>
</head>
<body>
<header>
<h1>
Photo Gallery <p>By Using HTML and CSS Only</p>
</h1>
<hr/>
</header>
<main>
<div class="box">
<img src="images/img-1.jpg"></div>
<div class="box">
<img src="images/img-2.jpg"></div>
<div class="box">
<img src="images/img-3.jpg"></div>
<div class="box">
<img src="images/img-4.jpg"></div>
<div class="box">
<img src="images/img-5.jpg"></div>
<div class="box">
<img src="images/img-6.jpg"></div>
<div class="box">
<img src="images/img-7.jpg"></div>
<div class="box">
<img src="images/img-8.jpg"></div>
</main>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Learning CSS</title>
<link href="https://fonts.googleapis.com/css?family=Dokdo" rel="stylesheet">
<style type="text/css">
*{
margin: 0px;
}
h1{
text-align: center;
}
p{
font-size: 24px;
}
header{
font-family: 'Dokdo', cursive;
font-size: 30px;
padding: 20px;
}
main{
margin-left: 120px;
width: 100%;
margin-top: 40px;
}
.box{
width: 20%;
float: left;
padding: 7px;
padding-left: 10px;
display: block;
overflow: hidden;
border-radius: 3px;
}
img{
width: 100%;
border-radius: 4px;
}
img:hover{
transform: scale(2,2);
transition: .3s transform;
}
</style>
</head>
<body>
<header>
<h1>
Photo Gallery 2 <p>By Using HTML and CSS Only</p>
</h1>
<hr/>
</header>
<main>
<div class="box">
<img src="images/img-1.jpg"></div>
<div class="box">
<img src="images/img-2.jpg"></div>
<div class="box">
<img src="images/img-3.jpg"></div>
<div class="box">
<img src="images/img-4.jpg"></div>
<div class="box">
<img src="images/img-5.jpg"></div>
<div class="box">
<img src="images/img-6.jpg"></div>
<div class="box">
<img src="images/img-7.jpg"></div>
<div class="box">
<img src="images/img-8.jpg"></div>
</main>
</body>
</html>
https://youtu.be/fGpdY4Gzf3g
How to Fly DJI Avata 2 Backward Using the Motion Controller! 🎮 https://youtu.be/UOZU47AxPwk In this…
https://youtu.be/0RRUOIvmuWA I realized that I had my camera set up incorrectly, so when I upload…
https://youtu.be/C3oFfV20K_c Make Animated progress step bar using Figma
https://youtu.be/o3pSH_oRzko How to Hide All Grids in Figma
https://youtu.be/hdSUylKSsho How to Create Responsive Tool tip in Figma
View Comments
Sir,
First of all thanks for your knowledgeable video.
Plz let me know how to create responsive photo gallery in HTML n CSS.
Davinder Sing
Davinder Singh
WhatsApp 9803024532
sure soon i will make video on this
you can contact me via email and via number to know my contact visit my youtube channel about section .... in navbar you can find link to my channel
Sir Mai image insert kar Raha hu to image page pe nahi aa re Raha hai pura process sahi karne per v
Image ka address wrong daalre hone tum Image ka address thik se daalo and make sure ki img tag thik se likha ho
I think this is an informative post and it's very useful
and knowledgeable. I really enjoyed reading this postBigig enthusiast,
thank you!
King regards,
Balle Henneberg