Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modify the buttomns and add add gradiants in it and add the hover eff… #921

Closed
wants to merge 1 commit into from
Closed

Modify the buttomns and add add gradiants in it and add the hover eff… #921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 39 additions & 10 deletions Coffee Website Template/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,20 @@ section{
margin-top: 1rem;
display: inline-block;
padding:.9rem 3rem;
/* change there */
border-radius: 5px;
font-size: 1.7rem;
color:#fff;
background: var(--main-color);
color:#000;
/* background: var(--main-color); */
background: linear-gradient(to left, #fff ,#d3ad7f);
cursor: pointer;
}

.btn:hover{
letter-spacing: .2rem;
/* there is change */
/* letter-spacing: .2rem; */
translate: 2px;
box-shadow:4px 4px 6px #d3ad7f;
}

.header{
Expand Down Expand Up @@ -271,7 +277,9 @@ section{
.menu .box-container .box{
padding:5rem;
text-align: center;
border:var(--border);
border:var(--border);
/*changes here */
border-radius: 10px;
}

.menu .box-container .box img{
Expand All @@ -297,12 +305,15 @@ section{
}

.menu .box-container .box:hover{
background:#fff;
/* changes here */
background:black;
box-shadow: 5px 5px 9px #d3ad7f;
translate: 0 -5px 5px;
}

.menu .box-container .box:hover > *{
/* .menu .box-container .box:hover > *{
color:var(--black);
}
} */

.products .box-container{
display: grid;
Expand All @@ -314,6 +325,12 @@ section{
text-align: center;
border:var(--border);
padding: 2rem;
border-radius: 10px;
}
.products .box-container .box:hover{
/* box-shadow: 5px 5px 9px #fff; */
box-shadow: 5px 5px 9px #d3ad7f;
translate: 0 -5px 5px;
}

.products .box-container .box .icons a{
Expand All @@ -324,6 +341,7 @@ section{
border:var(--border);
color:#fff;
margin:.3rem;
border-radius: 50%;
}

.products .box-container .box .icons a:hover{
Expand Down Expand Up @@ -373,6 +391,11 @@ section{
border:var(--border);
text-align: center;
padding:3rem 2rem;
border-radius: 10px;
}
.review .box-container .box:hover{
box-shadow: 5px 5px 9px #d3ad7f;
translate: 0 -5px 5px;
}

.review .box-container .box p{
Expand Down Expand Up @@ -456,7 +479,12 @@ section{
}

.blogs .box-container .box{
border:var(--border);
border:var(--border);
border-radius: 10px;
}
.blogs .box-container .box:hover{
box-shadow: 5px 5px 9px #d3ad7f;
translate: 0 -5px 5px;
}

.blogs .box-container .box .image{
Expand All @@ -471,9 +499,9 @@ section{
width: 100%;
}

.blogs .box-container .box:hover .image img{
/* .blogs .box-container .box:hover .image img{
transform: scale(1.2);
}
} */

.blogs .box-container .box .content{
padding:2rem;
Expand Down Expand Up @@ -540,6 +568,7 @@ section{
color:#fff;
border:var(--border);
font-size: 2rem;
border-radius: 5px;
}

.footer .links a:hover{
Expand Down
10 changes: 5 additions & 5 deletions Coffee Website Template/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,19 +321,19 @@ <h1 class="heading"> <span>contact</span> us </h1>

<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1629452077891!5m2!1sen!2sin" allowfullscreen="" loading="lazy"></iframe>

<form action="">
<h3>get in touch</h3>
<form action="" class="">
<h3 class="heading">get in <span>TOUCH</span></h3>
<div class="inputBox">
<span class="fas fa-user"></span>
<input type="text" placeholder="name">
<input type="text" placeholder="Name">
</div>
<div class="inputBox">
<span class="fas fa-envelope"></span>
<input type="email" placeholder="email">
<input type="email" placeholder="Email">
</div>
<div class="inputBox">
<span class="fas fa-phone"></span>
<input type="number" placeholder="number">
<input type="number" placeholder="Number">
</div>
<input type="submit" value="contact now" class="btn">
</form>
Expand Down
Loading