How to create Gallery in website

December 10, 2019 by Admin

How to write a code step by step Process

Step 1: Create a folder. Folder name Project.

Step 2: Open Sublime text and Type given HTML code.

Step 3: After enter this code, Save file name index.html (inside the Project folder)

Step 4: Open index.html with any browser like Chrome, Internet explorer, etc.

Step 5: Finally get an output.

Note

Gallery images must be placed on your Device.

(For Ex: Here My Image Names- g1.jpg File Name: Project) If I want view the image I should save the Images With in the Project Folder (File), otherwise i can’t View the images.

index.html

<html>

<body>

<h3 class=”tittle”>Gallery</h3>

<h4>Website Development</h4>

</div>

</a>

</div>

<h4>Website Design</h4>

</div>

</a>

</div>

<h4>Digital Marketing</h4>

</div>

</a>

</div>

<h4>iOS App Development</h4>

</div>

</a>

</div>

<h4>Graphic Design</h4>

</div>

</a>

</div>

<h4>Android App Development</h4>

</div>

</a>

</div>

<h4>Our Services</h4>

</div>

</a>

</div>

<h4>Application Development</h4>

</div>

</a>

</div>

</div>

h3.tittle, h3.single {

font-size: 3.5em;

}

h3.tittle {

font-size: 3em;

color: darkblue;

}

h3 {

margin: 0;

font-family: serif;

color: white;

font-style: bold;

}

h3{

font-family: inherit;

font-weight: 500;

line-height: 1.1;

color: inherit;

}

#gallery {

text-align: center;

padding: 6em 0;

}

.container {

width: 1170px;

}

.container {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

.col-md-6 {

float: left;

width: 50%;

}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {

float: left;

}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {

position: relative;

min-height: 1px;

padding-right: 15px;

padding-left: 15px;

}

.ban-mar {

margin: 35px 0;

}

.col-md-3 {

width: 25%;

}

.gallery-grids {

margin-top: 3em;

}

.clearfix::after, .container::after, .container-fluid::after, .row::after, .form-horizontal .form-group::after, .btn-toolbar::after, .btn-group-vertical > .btn-group::after, .nav::after, .navbar::after, .navbar-header::after, .navbar-collapse::after, .pager::after, .panel-body::after, .modal-footer::after {

clear: both;

}

.clearfix::before, .clearfix::after, .container::before, .container::after, .container-fluid::before, .container-fluid::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .btn-toolbar::before, .btn-toolbar::after, .btn-group-vertical > .btn-group::before, .btn-group-vertical > .btn-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .navbar-header::before, .navbar-header::after, .navbar-collapse::before, .navbar-collapse::after, .pager::before, .pager::after, .panel-body::before, .panel-body::after, .modal-footer::before, .modal-footer::after {

display: table;

content: ” “;

}

body {

font-family: ‘Calibri’, sans-serif;

font-size: 100%;

line-height: 1.42857143;

color: #333;

background-color: #fff;

}

.baner-top a {

padding: 10px 10px;

display: block;

box-shadow: 0px 0px 9px #BDBDBD;

}

a {

color: #1B242F;

text-decoration: none;

}

a {

background: transparent;

}

.gal-spin-effect {

display: block;

overflow: hidden;

position: relative;

}

a {

color: #1B242F;

}

::before, ::after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.baner-top img {

width: 100%;

}

img {

vertical-align: middle;

}

img {

border: 0;

}

.gal-spin-effect.vertical .gal-text-box::after {

transform: translateZ(0) translateX(-100%) rotateZ(180deg);

}

.gal-spin-effect .gal-text-box::after, .gal-spin-effect .gal-text-box::before {

content: “”;

display: block !important;

position: absolute;

visibility: visible !important;

background-color: rgba(0, 0, 0, 0.8);

top: 0;

left: 0;

bottom: 0;

right: 0;

width: 100%;

height: 100%;

z-index: -1;

-webkit-transition: 0.6s ease-in-out;

-moz-transition: 0.6s ease-in-out;

-ms-transition: 0.6s ease-in-out;

-o-transition: 0.6s ease-in-out;

transition: 0.6s ease-in-out;

}

.gal-spin-effect.vertical .gal-text-box::before {

-webkit-transform: translateZ(0) translateX(100%) rotateZ(180deg);

-moz-transform: translateZ(0) translateX(100%) rotateZ(180deg);

-ms-transform: translateZ(0) translateX(100%) rotateZ(180deg);

-o-transform: translateZ(0) translateX(100%) rotateZ(180deg);

transform: translateZ(0) translateX(100%) rotateZ(180deg);

}

.gal-spin-effect .gal-text-box {

filter: alpha(opacity=0);

-wekbit-opacity: 0;

-moz-opacity: 0;

opacity: 0;

-webkit-transform: translateZ(0) scale(2, 2);

-moz-transform: translateZ(0) scale(2, 2);

-ms-transform: translateZ(0) scale(2, 2);

-o-transform: translateZ(0) scale(2, 2);

transform: translateZ(0) scale(2, 2);

color: #e6e6e6;

}

.gal-text-box {

top: 0;

left: 0;

position: absolute;

}

.img-box-content, .gal-text-box {

display: block;

width: 100%;

height: 100%;

-webkit-transform: scale(1, 1);

-moz-transform: scale(1, 1);

-ms-transform: scale(1, 1);

-o-transform: scale(1, 1);

transform: scale(1, 1);

-webkit-transition: all 0.4s ease-in-out;

-moz-transition: all 0.4s ease-in-out;

-ms-transition: all 0.4s ease-in-out;

-o-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

}

.gal-spin-effect .gal-text-box * {

z-index: 3;

}

.gal-text-box .info-gal-con {

display: block;

position: relative;

padding: 2%;

left: 50%;

top: 50%;

position: relative;

-webkit-transform: translateX(-50%) translateY(-50%);

-moz-transform: translateX(-50%) translateY(-50%);

-ms-transform: translateX(-50%) translateY(-50%);

-o-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

text-align: center;

}

.gal-spin-effect .gal-text-box {

color: #e6e6e6;

}

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.arrows-serve::after {

content: ”;

position: absolute;

bottom: 43%;

right: 35.5%;

background: #333;

width: 11%;

height: 3px;

}

.arrows-serve::before {

content: ”;

position: absolute;

bottom: 43%;

left: 35.5%;

background: #333;

width: 11%;

height: 3px;

}

.arrows-serve {

position: relative;

color: #EFA52C;

font-size: 2em;

}

body a {

transition: 0.5s all;

-webkit-transition: 0.5s all;

-o-transition: 0.5s all;

-moz-transition: 0.5s all;

-ms-transition: 0.5s all;

}

.info-gal-con h4 {

font-size: 45px;

margin-bottom: 30px;

color: #efa52c;

}

h1, h2, h3, h4, h5, h6 {

margin: 0;

font-family: serif;

color: white;

font-style: bold;

}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {

font-family: inherit;

font-weight: 500;

line-height: 1.1;

color: inherit;

}

</style>

</body>

</html>

Next Blog: How to Create Contact Page in Website step by step guidance.
For Detailed Information – Click Here