Skip to content

Hover Effect on Buttons Changed #997

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

Open
akankshachanana1 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Hover Effect on Buttons Changed #997

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
7 changes: 5 additions & 2 deletions Gallary-section/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -536,10 +536,13 @@ form input {

.contact {
padding-right: 5px;
background-color: #ff523b;
border-radius: 20px;

border:3px inset white;
margin-top: 10px;
}
.contact:hover{
border-color: #ff523b;
}

.contact a h4 {
font-size: 16px;
Expand Down
254 changes: 137 additions & 117 deletions contact.html
View file
Open in desktop

Large diffs are not rendered by default.

654 changes: 336 additions & 318 deletions event.html
View file
Open in desktop

Large diffs are not rendered by default.

374 changes: 196 additions & 178 deletions index.html
View file
Open in desktop

Large diffs are not rendered by default.

427 changes: 241 additions & 186 deletions library.html
View file
Open in desktop

Large diffs are not rendered by default.

93 changes: 58 additions & 35 deletions placement.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@
crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="./placement.css"> -->

Expand Down Expand Up @@ -80,12 +81,21 @@ <h1>PLACEMENTS 📌</h1>
companies.
</p> -->
<p>
Chaibasa Engineering College has established a commendable reputation when it comes to placements. With a strong focus on <span class="span">industry-oriented education </span>, the college strives to equip its students with the necessary skills and knowledge to excel in their respective fields. The dedicated placement cell works tirelessly to build connections with leading companies. It provides comprehensive training, including mock interviews, resume building workshops, and soft skills development programs, to enhance students' employability.<br> As a result, Chaibasa Engineering College witnesses a high placement rate, The college's emphasis on <span class="span">holistic development and industry exposure</span> ensures that students embark on successful career paths after graduation.
Chaibasa Engineering College has established a commendable reputation when it comes to
placements. With a strong focus on <span class="span">industry-oriented education </span>,
the college strives to equip its students with the necessary skills and knowledge to excel
in their respective fields. The dedicated placement cell works tirelessly to build
connections with leading companies. It provides comprehensive training, including mock
interviews, resume building workshops, and soft skills development programs, to enhance
students' employability.<br> As a result, Chaibasa Engineering College witnesses a high
placement rate, The college's emphasis on <span class="span">holistic development and
industry exposure</span> ensures that students embark on successful career paths after
graduation.
</p>
</div>

<div class="explore">
<a href="" class="btn">Explore Now &#8594;</a>
<a href="" class="btn" id="btn5">Explore Now &#8594;</a>
</div>
</div>
<div class="col-2">
Expand All @@ -104,22 +114,29 @@ <h1>PLACEMENTS 📌</h1>

<div class="text" style="margin: 3rem;">
<h2 class="train-placement"> Training and Placement Cell</h2>
<div id="placement-para"><a> The Chaibasa Engineering College Training & Placement Cell is equipped with all the resources necessary to
help worthy students find competitive employment. By staying in touch with reputable companies and
industrial facilities, the Training & Placement Cell plays a significant role in discovering work prospects
for Undergraduates and Postgraduates graduating from the college. To foster connections between employers
and graduates, the Placement Cell is open all year round. The number of students hired after campus
interviews keeps increasing. Numerous reputable industries conduct interviews at the institute after being
invited.<br>
<div id="placement-para"><a> The Chaibasa Engineering College Training & Placement Cell is equipped with all the
resources necessary to
help worthy students find competitive employment. By staying in touch with reputable companies and
industrial facilities, the Training & Placement Cell plays a significant role in discovering work
prospects
for Undergraduates and Postgraduates graduating from the college. To foster connections between
employers
and graduates, the Placement Cell is open all year round. The number of students hired after campus
interviews keeps increasing. Numerous reputable industries conduct interviews at the institute after
being
invited.<br>

This Department prepares the students for the process of recruitment and simultaneously create awareness
among companies about the recruitment opportunities at Chaibasa Engineering College.</a>
</br><br>
<a>The competition for jobs is currently getting tougher every day, making placement a difficult challenge. The
institution now has a significant obligation to educate pupils and give them life skills. In addition to
technical proficiency, holistic personality development is also required.<br> A full-fledged training cell is
operating in our college to improve the capabilities of engineering graduates to be on par with industry
standards in order to meet these objectives.</a></div>
This Department prepares the students for the process of recruitment and simultaneously create awareness
among companies about the recruitment opportunities at Chaibasa Engineering College.</a>
</br><br>
<a>The competition for jobs is currently getting tougher every day, making placement a difficult challenge.
The
institution now has a significant obligation to educate pupils and give them life skills. In addition to
technical proficiency, holistic personality development is also required.<br> A full-fledged training
cell is
operating in our college to improve the capabilities of engineering graduates to be on par with industry
standards in order to meet these objectives.</a>
</div>
</div>

<!-- Image -->
Expand Down Expand Up @@ -277,25 +294,28 @@ <h5>Nagesh Mandal</h5>
</div>
<p class="dev">Full Stack Web Developer</p>
<div class="contact">
<a href="https://www.instagram.com/nagesh_mandal7_5_/"><h4>Contact</h4></a>
<a href="https://www.instagram.com/nagesh_mandal7_5_/">
<h4>Contact</h4>
</a>
</div>
</div>
<div class="col col2">
<h3>Chaibasa Engineering College</h3>
<p><i class="fa-solid fa-location-dot"></i>
<a href="https://www.google.com/maps/place/Chaibasa+Engineering+College/@22.4643055,85.7886378,17z/data=!3m1!4b1!4m6!3m5!1s0x3a1e25ddde342373:0x4ac680428662b09d!8m2!3d22.4643055!4d85.7912127!16s%2Fg%2F1pp2wwhc_?entry=ttu" target="_blank">
<span style="color: #fff;"> Keonjhar Highway
Chaibasa Jharkhand PIN 833215, India
</span>
</a>
<a href="https://www.google.com/maps/place/Chaibasa+Engineering+College/@22.4643055,85.7886378,17z/data=!3m1!4b1!4m6!3m5!1s0x3a1e25ddde342373:0x4ac680428662b09d!8m2!3d22.4643055!4d85.7912127!16s%2Fg%2F1pp2wwhc_?entry=ttu"
target="_blank">
<span style="color: #fff;"> Keonjhar Highway
Chaibasa Jharkhand PIN 833215, India
</span>
</a>
</p>
<p class="email-id" style="
width: 260px"><i class="far fa-envelope" style="color: #fff;"></i>
cordinatortigjh@gmail.com
</p>
<h4 class="phone">
<i class="fa-solid fa-phone" style="color: #fff;"></i>
+91 - 9062941530
+91 - 9062941530
</h4>
</div>
<div class="col col3" id="link">
Expand All @@ -316,30 +336,33 @@ <h3>News<span>letter</span></h3>
<button type="submit"><i class="fas fa-arrow-right"></i></button>
</form>
<div class="social-icons social-media">
<a href="https://twitter.com/NageshMandal75"> <i class="tweet fa-brands fa-twitter"></i></a>
<a href="https://www.instagram.com/nagesh_mandal7_5_/"><i class="insta fa-brands fa-instagram"></i></a>
<a href="https://github.com/NageshMandal"> <i class="git fa-brands fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/nagesh-mandal-134b70237/"> <i class="in fa-brands fa-linkedin"></i></a>
<a href="https://www.youtube.com/@nageshmandal9461/featured"> <i class="youtube fa fa-youtube-play" aria-hidden="true"></i></a>
<a href="https://twitter.com/NageshMandal75"> <i class="tweet fa-brands fa-twitter"></i></a>
<a href="https://www.instagram.com/nagesh_mandal7_5_/"><i
class="insta fa-brands fa-instagram"></i></a>
<a href="https://github.com/NageshMandal"> <i class="git fa-brands fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/nagesh-mandal-134b70237/"> <i
class="in fa-brands fa-linkedin"></i></a>
<a href="https://www.youtube.com/@nageshmandal9461/featured"> <i class="youtube fa fa-youtube-play"
aria-hidden="true"></i></a>
</div>
<div class="return-to-top" id="returnToTop">
<i class="fas fa-arrow-up fa-2x fa-bounce"></i>
</div>
</div>
</div>
</div>

<!--Voice Assistent-->
<div class="containers">
<div class="texts">
</div>
</div>

<!--Voice assistent end-->
<div class="toggle-mode">
<img class="sun" data-set="moon" src="images/Moontoggle.png" alt="light-mode">
<img class="sun" data-set="moon" src="images/Moontoggle.png" alt="light-mode">
<img class="moon" data-set="sun" src="images/sun.png" alt="dark-mode">
</div>

</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
Expand Down
146 changes: 134 additions & 12 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,9 +130,70 @@ nav ul li {

}

a {
#btn3 {
text-decoration: none;
/* color: rgb(64, 64, 64); */
display: inline-block;
/* background: #ff523b; */
color: #fff;
padding: 8px 30px;
margin-left: 20%px;
margin-top: 20px;
transition: 0.5s;
margin-bottom: 1rem;
position:relative;
transition:all 0.3s;
font-weight: 600;
}
#btn3 ::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.5);
transform: scale(0.1, 1);
}
.col-2 #btn3 {
margin-top: 30px;
margin-top: 32px;
margin-bottom: 33px;
font-size: 1.3rem;
}

#btn3:hover {

transform: scaleX(2);
transform: scaley(1.1);
box-shadow: 2px 2px 20px rgb(49, 49, 49);
letter-spacing: 2px;
}
#btn3 :hover::before {
opacity: 1;
transform: scale(1, 1);
}
#btn3 ::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255,255,255,0.1);
}
#btn3:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}

p {
Expand Down Expand Up @@ -188,32 +249,84 @@ p {
margin: 25px 0;
}

.btn {
#btn1,#btn5,#btn6,#btn7,#btn8{
text-decoration: none;
display: inline-block;
background: #ff523b;
/* background: #ff523b; */
color: #fff;
padding: 8px 30px;
margin-left: 20%px;
margin-top: 20px;
border-radius: 30px;
transition: 0.5s;
margin-bottom: 1rem;
position:relative;
transition:all 0.3s;
font-weight: 600;
}

.col-2 .btn {
#btn1 ::before,#btn5 ::before,#btn6 ::before,#btn7::before,#btn8::before{
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
transition: all 0.3s;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: rgba(255,255,255,0.5);
border-bottom-color: rgba(255,255,255,0.5);
transform: scale(0.1, 1);
}
.col-2 #btn1,#btn5,#btn6,#btn7,#btn8{
margin-top: 30px;
margin-top: 32px;
margin-bottom: 33px;
font-size: 1.3rem;
}

.btn:hover {
background: #29a423;
#btn1:hover,#btn5:hover,#btn6:hover,#btn7:hover,#btn8:hover {

transform: scaleX(2);
transform: scaley(1.1);
box-shadow: 2px 2px 20px rgb(49, 49, 49);
letter-spacing: 2px;
}
#btn1 :hover::before,#btn5 :hover ::before,#btn6 :hover ::before,#btn7 :hover ::before,#btn8:hover::before{
opacity: 1;
transform: scale(1, 1);
}
#btn1 ::after,#btn5::after,#btn6::after,#btn7::after,#btn8::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: all 0.3s;
background-color: rgba(255,255,255,0.1);
}
#btn1:hover::after,#btn5:hover::after,#btn6:hover::after,#btn7:hover::after,#btn8:hover::after {
opacity: 0;
transform: scale(0.1, 1);
}
#CSE,#EEE,#ECE,#ME,#CE{

padding-top: 3px;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 3px;
margin-top:20px;
color:rgb(255, 191, 191);
font-size: 25px;;
}
#CSE:hover,#EEE:hover,#ECE:hover,#ME:hover,#CE:hover{
border:2px inset rgb(255, 191, 191);
}
.header {
background: radial-gradient(#fff, rgb(255, 191, 191));
}
Expand Down Expand Up @@ -548,12 +661,15 @@ form input {

.contact {
padding-right: 5px;
background-color: #ff523b;
border-radius: 20px;
border:3px inset white;
margin-top: 10px;
}
.contact:hover{
border-color: #ff523b;
}

.contact a h4 {
text-decoration: none;
font-size: 16px;
text-align: center;
color: white;
Expand All @@ -562,6 +678,7 @@ form input {
.contact a h4:hover {
font-size: 18px;
transition: .3s ease;

}

.branchimg {
Expand Down Expand Up @@ -839,6 +956,10 @@ label[for="project-link"] i {
border-style: none;
box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 0.2);
cursor: pointer;
padding:10px;
padding-top: 10px;;
background-color: transparent;
color:white
}

.project-section-title {
Expand Down Expand Up @@ -885,9 +1006,10 @@ body.dark-mode .project-card {
.project-card-link a {
display: inline-block;
align-items: left;
color: #087cba
color: #ff523b;
}


.project-card-link i {
font-size: 1.25rem;
padding-left: 0px;
Expand Down
Loading