Skip to content

Commit

Permalink
❇️ feat: Add image gallery in index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@sauravUppoor
sauravUppoor committed Jul 27, 2020
1 parent d935962 commit b963e9f
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 48 deletions.
47 changes: 37 additions & 10 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ Light Yellow: #fcfe9c
body {
background-color: var(--background) !important;
font-family: 'Roboto', sans-serif !important;
margin: 0 auto;
}

main {
Expand Down Expand Up @@ -306,7 +307,6 @@ ion-icon {
width: 100%;
margin: 0px auto;
padding: 70px 0px;
max-width: 1024px;
}
/* ------------------------------------ */

Expand All @@ -316,6 +316,7 @@ ion-icon {
justify-content: center;
text-align: center;
width: 80%;
max-width: 1024px;
margin: 0 auto;
}

Expand Down Expand Up @@ -409,7 +410,7 @@ ion-icon {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
width: 80%;
overflow: hidden;
border-radius: 6px;
}
Expand Down Expand Up @@ -452,6 +453,7 @@ ion-icon {
.grid-element:hover {
border: 1px solid var(--light-green);
cursor: pointer;
padding: 29px;
}

.grid-element:hover .go-corner,
Expand Down Expand Up @@ -488,6 +490,23 @@ ion-icon {
margin-top: 12px;
}

/* Instagram Grids */

.image-gallery {
line-height: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
min-width: 300px;
padding: 5px;
}

.item {
margin: 5px;
width: 300px;
height: 300px;
}

/* CONTACT US */

.contact-us {
Expand Down Expand Up @@ -809,16 +828,15 @@ footer {
}

/* Media Query */
@media (max-width: 1020px) {
.content-container {
padding-top: 10px;
}

@media (max-width: 1200px) {

.navbar-brand {
display: none;
}
.navbar-header {
display:flex;
justify-content: space-evenly;
justify-content: space-between;
}
.navbar-brand {
order:1;
Expand Down Expand Up @@ -853,6 +871,14 @@ footer {
.nav-link {
font-size: 20px;
}
}

@media (max-width: 767px) {
.content-container {
padding-top: 10px;
width: 100%;
}

.sample-img {
display: none;
}
Expand Down Expand Up @@ -883,10 +909,11 @@ footer {
justify-content: center;
}
.grid-element {
width: 80%;
width: 50%;
min-width: 300px;
margin: 5px auto;
height: 180px;
padding: 10px;
padding: 20px;
padding-bottom: 40px;
}
.form-1 {
width: 55%;
Expand Down
58 changes: 20 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
</head>

<body>
<nav id="nav" class="desktop navbar navbar-expand-lg navbar-dark .bg-transparent sticky-top">
<nav id="nav" class="desktop navbar navbar-expand-xl navbar-dark .bg-transparent sticky-top">
<a class="navbar-brand mr-auto" href="#">
<img src="img/codecell-logo.png" alt="" width="40">
</a>
Expand Down Expand Up @@ -191,49 +191,31 @@
</div>
</div>

<div class="container-fluid">
<div class="row pb-5">
<div class="col-lg-3 col-sm-12 pb-3">
<div class="img-thumbnail">
<img src="https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="300">
</div>
</div>
<div class="col-lg-3 c0l-sm-12 pb-3">
<div class="img-thumbnail">
<img src="https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="300">
</div>
</div>
<div class="col-lg-3 col-sm-12 pb-3">
<div class="img-thumbnail">
<img src="https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="300">
<div class="content-container-2">
<div class="container">
<div class="primary-description">
<span>Make it Social</span>
</div>
</div>
<div class="col-lg-3 col-sm-12 pb-3">
<div class="img-thumbnail">
<img src="https://images.unsplash.com/photo-1595776613215-fe04b78de7d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="300">
</div>
</div>
</div>


<div class="row pb-4">
<div class="col-lg-4 col-sm-6 pb-3">
<div class="img-thumbnail">
<img src="https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="400">
<div class="secondary-description">
<span>Follow us on Instagram for weekly newsletter, facts and latest updates</span>
</div>
</div>
<div class="col-lg-4 col-sm-6 pb-3">
<div class="img-thumbnail">
<img src="https://images.unsplash.com/photo-1595776613215-fe04b78de7d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="400">
<br>

<div class="image-gallery">
<a href=""><img src="img/defa.jpg" alt="" class="item"></a>
<a href=""><img src="img/harsh_kapadia_pic.jpg" alt="" class="item"></a>
<a href=""><img src="img/codecell-logo.png" alt="" class="item"></a>
<a href=""><img src="img/defa.jpg" alt="" class="item"></a>
</div>
</div>
<div class="col-lg-4 col-sm-6 pb-3">
<div class="img-thumbnail">
<img src="https://images.unsplash.com/photo-1595515106969-1ce29566ff1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="400">
<br><br>
<div class="container">
<a href="#" class="button-2">
<span>View More →</span>
</a>
</div>
</div>
</div>
</div>


<div class="content-container-2">
<div class="container">
Expand Down

0 comments on commit b963e9f

Please sign in to comment.