Make Photo Gallery By Using HTML and CSS

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

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.

Code for Photo Gallery#1 Using HTML and CSS

<!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>

Code for Photo Gallery#2 Using HTML and CSS

<!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>

More HTML and CSS Designs With Code and Tutorials

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore