Skip to content

Commit

Permalink
modify blog page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Surajbokde
Surajbokde committed Jan 8, 2021
1 parent 84ab48a commit 1265979
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 79 deletions.
29 changes: 9 additions & 20 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,8 +205,7 @@ <h2>Events Gallery</h2>
<!--================Gallery Area End =================-->


<br>
<hr>


<!--================Blog Card Area =================-->
<div class="container">
Expand All @@ -219,7 +218,7 @@ <h2> Blogs </h2>
<!--================Blog Card Area =================-->
<div class="container">
<div class="row">
<div class="col-md-4 card1">
<div class="col-lg-4 col-md-6 col-sm-12 ">
<div class="card">
<img class="card-img-top" src="img/blog/card/fund_nature.jpg" alt="Card image cap">
<button class="date">25 Aug </button>
Expand All @@ -234,7 +233,7 @@ <h4 class="card-title">Raise fund for Mother<br> Nature</h4>
</div>
</div>

<div class="col-md-4 card1">
<div class="col-lg-4 col-md-6 col-sm-12 ">
<div class="card">
<img class="card-img-top" src="img/blog/card/tree_plantation.jpg" alt="Card image cap">
<button class="date">25 Aug </button>
Expand All @@ -249,10 +248,7 @@ <h4 class="card-title">Raise fund for Tree <br>Plantation</h4>
</div>
</div>




<div class="col-md-4 card1">
<div class="col-lg-4 col-md-6 col-sm-12 ">
<div class="card">
<img class="card-img-top" src="img/blog/card/slide1.jpg" alt="Card image cap">
<button class="date">25 Aug </button>
Expand All @@ -266,16 +262,7 @@ <h4 class="card-title">Raise fund for Saving Environment</h4>
</div>
</div>
</div>

</div>



</div>
<!-- =============================== -->
<div class="container">
<div class="row mar1">
<div class="col-md-4 card1">
<div class="col-md-4 col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-img-top" src="img/blog/card/GlobalWarming.png" alt="Card image cap">
<button class="date">25 Jun</button>
Expand All @@ -289,7 +276,7 @@ <h4 class="card-title description">Raise fund for Global<br> Warming</h4>
</div>
</div>
</div>
<div class="col-md-4 card1">
<div class="col-md-4 col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-img-top" src="img/blog/card/water_conservation.jpg" alt="Card image cap">
<button class="date">25 Jun</button>
Expand All @@ -303,7 +290,7 @@ <h4 class="card-title">Raise fund for Water Conservation</h4>
</div>
</div>
</div>
<div class="col-md-4 card1">
<div class="col-md-4 col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-img-top" src="img/blog/card/preservation_glacier.jpg" alt="Card image cap">
<button class="date">25 Jun</button>
Expand All @@ -317,11 +304,13 @@ <h4 class="card-title">Raise fund for Saving <br>Glacier </h4>
</div>
</div>
</div>

</div>



</div>

<!--================Blog Area =================-->


Expand Down
83 changes: 24 additions & 59 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -973,40 +973,26 @@ box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);

.card{
position:relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2),
inset -5px -5px 15px rgba(255,255,255,0.1),
5px 5px 15px rgba(0,0,0,0.3),
-5px -5px 15px rgba(255,255,255,0.1);
border-radius:15px;
margin: 5px;
}
@media (min-width: 770px){
.card{
position:relative;
width: 320px;
height: 340px;

box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2),
inset -5px -5px 15px rgba(255,255,255,0.1),
5px 5px 15px rgba(0,0,0,0.3),
-5px -5px 15px rgba(255,255,255,0.1);
border-radius:15px;
margin: 5px;
}
margin-bottom: 30px;
}

@media (max-width: 770px){
.card{
position:relative;
width: 320px;
height: 440px;

box-shadow: inset 5px 5px 5px rgba(0,0,0,0.2),
inset -5px -5px 15px rgba(255,255,255,0.1),
5px 5px 15px rgba(0,0,0,0.3),
-5px -5px 15px rgba(255,255,255,0.1);
border-radius:15px;
margin: 5px;
margin-left: 40px;


}
}
.card .dn_item{
Expand Down Expand Up @@ -4617,10 +4603,7 @@ h1, h2, h3, h4, h5, h6 {
}
/* ===================================Card==================================== */

.Card-image{
width:50px;
height: 50px;;
}


/* Contact Success and error Area css
============================================================================================ */
Expand Down Expand Up @@ -4667,12 +4650,6 @@ h1, h2, h3, h4, h5, h6 {
}
/* ----------------------Blog_Card---------------------------------- */

.card1{
background-color:rgb(248, 244, 244);
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(19, 0, 0, 0.2), 0 6px 20px 0 rgba(14, 0, 0, 0.19);

}
.card-title{
font-size: 16px;
line-height: 24px;
Expand All @@ -4686,18 +4663,9 @@ font-size: 16px;
padding:10px;
margin: 41px;
}
/* .blog-cards{
margin: 10px;
} */
.Card-image{
width:300px;
height:auto;
align-content: center;
}
.mar1{
margin-top: 20px;
margin-bottom: 50px;
}



.author{
text-align: center;
}
Expand All @@ -4716,7 +4684,9 @@ font-size: 16px;
border: none;
font-family: cursive;
}

.card-img-top{
border-radius: 15px;
}
.card-title{
text-align:left;

Expand Down Expand Up @@ -4745,36 +4715,31 @@ font-size: 16px;
============================================================================================ */
/*---------------------------------------------------- */

/*# sourceMappingURL=style.css.map */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.Card-image { width:200px;
height:auto; } /* your css rules for ipad portrait */
.card-img-top{
height: 30px;
}
}




@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
.Card-image { width:200px;
height:auto; } /* your css rules for ipad landscape */
}


@media only screen and (device-width: 768px) {
/* For general iPad layouts */
.author{
font-size: 10px;
margin-right:110px;



}
.comment{
margin: 0px;
padding:3px;
}


}
@media only screen and (device-width: 360px){
.comment{

padding:3px;
margin: 0px;
padding:3px;
}


Expand Down

0 comments on commit 1265979

Please sign in to comment.