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
- Responsive Landing Page Design Using HTML and CSS Only
- Responsive Image Gallery Design Using HTML and CSS Only
- Working Digital Clock Design Using HTML, CSS and JavaScript
- Beautiful Card Design Tutorials HTML and CSS Only
- Beautiful Animated Button Using CSS
- Card UI Design Using CSS
- Toggle Button Design Using CSS
- iPhone Animation Using CSS
- Scrolling effect Using CSS
