Skip to content

Commit

Permalink
changed the styling of cards in service page (#124)
Browse files Browse the repository at this point in the history
i solved the problem #94. I have changed the margin and padding of all
cards and made them beautiful. I also added some hover effects for
better user-interface. i hope the changes helped your website. Kindly
accept my pull request.
  • Loading branch information
Anjaliavv51 authored Oct 3, 2024
2 parents f341ff0 + 9ac5c12 commit dcf5e53
Show file tree
Hide file tree
Showing 2 changed files with 439 additions and 358 deletions.
125 changes: 45 additions & 80 deletions Css-files/content.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
* {
margin: 0px;
padding: 0px;

}
p{
color: hsl(208, 7%,46%);
Expand Down Expand Up @@ -36,6 +37,9 @@ body {
z-index: -1;

}
.upper{
margin-top: -5rem;
}

.navbar {
padding: 8px 10px;
Expand Down Expand Up @@ -254,9 +258,15 @@ input[type="submit"]:hover {
background-color: transparent;
background-blend-mode:lighten;
background-repeat: no-repeat;
background-size: cover;
/* background-size: cover; */

}

.cards{
height: 480px;
width: 480px;
margin-left: 2rem;
}
.second_cont{
display: flex;
padding: 40px;
Expand Down Expand Up @@ -309,20 +319,30 @@ div.deals:hover{
padding-top: 400px;
}
.testimonal__container{
width: 100%;
display: flex;
padding: 3rem;
justify-content: center;
/* flex-direction: column; */
/* padding: 3rem; */
margin-top: 2rem;
}
.testimonal__card{
text-align: center;
padding:2rem 3rem 2.5rem;

border:2px solid rgba(224, 224, 252, 0.678);
transition:border .4s,background-color .4s;
transition:border .4s background-color .4s;
background-color: white;
box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
border: 1px solid rgb(186, 186, 201);
padding:40px 30px ;
margin: 5px;
color:rgb(107, 107, 122);
/* margin-left: 3rem; */
}
.testimonal__card:hover{
transform: translateY(-10px);
transition: 0.5s;
box-shadow: 2px 2px 20px black;
}
.testimonal__image{
width:100px;
Expand All @@ -336,6 +356,8 @@ div.deals:hover{
.testimonal__description{
margin-bottom: 1.25rem;
}


.section__title{
text-align: center;
font-size: 2rem;
Expand All @@ -344,97 +366,42 @@ div.deals:hover{

/* footer */
.foot-panel2{
background-color: transparent;
color:white;
height: 300px;
display: flex;
justify-content: space-evenly;
background-color: transparent;
color:white;
height: 300px;
display: flex;
justify-content: space-evenly;
}

.footer-colums{
margin-top: 20px;
margin-top: 20px;
}

.footer-colums p{
font-weight: 700;
font-weight: 700;
}

.footer-colums a{
display: block;
font-size: 0.85rem;
margin-top: 10px;
color: #dddddd;
}

.follow-us{
margin-bottom: 20px;
}

.social-icons a {
font-size: 1.2rem;
padding: 8px;
margin: 15px;
text-decoration: none;
/* color: white; */
}

.fa-facebook{
color: hsl(203, 30%, 26%);
font-size: 1.2rem;
padding: 8px;
margin: 15px;
}

.fa-facebook:hover {

transform: scale(1.5);
color:#3B5998;
transition: transform 0.2s ease, color 0.2s ease;
display: block;
font-size: 0.85rem;
margin-top: 10px;
color: #dddddd;
}

.fa-instagram{
color: hsl(203, 30%, 26%);
font-size: 1.2rem;
padding: 8px;
margin: 15px;
}
.fa-instagram:hover {
transform: scale(1.5);
color:#D62976;
transition: transform 0.2s ease, color 0.2s ease;
}
.fa-x-twitter{
color: hsl(203, 30%, 26%);
font-size: 1.2rem;
padding: 8px;
margin: 15px;

}

.fa-x-twitter:hover {
color:black;
transform: scale(1.5);
transition: transform 0.2s ease, color 0.2s ease;
}


.foot_panel4{
background-color: transparent;
/* color:hsl(203, 30%, 26%); */
height: 160px;
/* font-size: 0.9rem; */
text-align: center;
/* margin-bottom: 8px; */
background-color: transparent;
color: white;
height: 160px;
font-size: 0.9rem;
text-align: center;
}



.pages{
padding-top: 25px;
padding-top: 25px;
}

.copyright{
padding-top: 10px;
padding-top: 10px;
}

form {
Expand Down Expand Up @@ -473,7 +440,7 @@ textarea {
font-size: 1.2rem;
padding: 15px;
text-decoration: none;
color: hsl(203, 30%, 26%);
color: white;
}

.fa-facebook:hover {
Expand Down Expand Up @@ -577,8 +544,6 @@ textarea {
border: none;
}



#contactForm h3 {
height: 30px;
color: #141414;
Expand Down
Loading

0 comments on commit dcf5e53

Please sign in to comment.