Skip to content

adding flipping card in the branch section #1062

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

adding flipping card in the branch section #1062

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
59 changes: 36 additions & 23 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,60 +81,73 @@ <h1>CHAIBASA ENGINEERING<br>COLLEGE</h1>
<h2 class="title">BRANCHES IN CEC</h2>
<div class="row">
<div class="col-3">
<div class="inner">
<div class="front-side">
<img class="branchimg" alt="computer science engineering image" src="images/cse.webp">
<a href="branch/cs.html"class="btn">CSE</a>
<div class="">
<div class="dis">Computer Science Engineering (CSE) is an
</div>
<div class="dis">
<h3>Computer Science Engineering (CSE) is an
engineering discipline that covers several topics
related to computation, programming languages,
program design, computer hardware and software
and integrates several fields of computer science.
and integrates several fields of computer science.</h3>
<a href="branch/cs.html"class="btn">CSE</a>
</div>
</div>
<p></p>

</div>
<div class="col-3">
<div class="inner">
<div class="front-side">
<img class="branchimg" alt="Electronics and Communication Engineering image" src="images/ece.webp">
<a href="branch/ece.html"class="btn">ECE</a>
<div class="">
<div class="dis">Electronics and Communication Engineering (ECE) is an emerging stream that
</div>
<div class="dis"><h3>Electronics and Communication Engineering (ECE) is an emerging stream that
offers firm promises to lend your career an edge. Studying this domain of engineering would
mean mastering the skills related to electrical engineering as well
as having an insight into the world of computer software and hardware.
as having an insight into the world of computer software and hardware.</h3>
<a href="branch/ece.html"class="btn">ECE</a>
</div>
</div>
<p></p>
</div>
<div class="col-3">
<div class="inner">
<div class="front-side">
<img class="branchimg" alt="electrical and electronics engineering image" src="images/e55.webp">
<a href="branch/ee.html"class="btn">EEE</a>
<div class="">
<div class="dis">Electrical and Electronics Engineering. EEE is an engineering discipline which deals with Electrical and Machine technology, Electrons, Circuit analysis,
</div>
<div class="dis"><h3>Electrical and Electronics Engineering. EEE is an engineering discipline which deals with Electrical and Machine technology, Electrons, Circuit analysis,
Electromagnetism, Instrumentations, Materials for electrical engineering,
Control systems, transmission and distribution, Power engineering.</div>
</div>
<p></p>
Control systems, transmission and distribution, Power engineering.</h3>
<a href="branch/ee.html"class="btn">EEE</a></div>
</div>
</div>
<div class="col-3">
<div class="inner">
<div class="front-side">
<img class="branchimg" alt="mechanical engineering image" src="images/me.webp">
<a href="branch/ME.html"class="btn">ME</a>
<div class="">
<div class="dis">Mechanical engineering is an engineering branch
</div>
<div class="dis"><h3>Mechanical engineering is an engineering branch
that combines engineering physics and mathematics
principles with materials science, to design, analyze,
manufacture, and maintain mechanical systems.</div>
</div>
<p></p>
manufacture, and maintain mechanical systems.</h3>
<a href="branch/ME.html"class="btn">ME</a>
</div>
</div>
</div>
<div class="col-3">
<div class="inner">
<div class="front-side">
<img class="branchimg" alt="civi engineering image" src="images/ce.webp">
<a href="branch/CE.html"class="btn">CE</a>
<div class="">
<div class="dis">Civil engineering is a professional engineering discipline that deals with the design,
</div>
<div class="dis"><h3>Civil engineering is a professional engineering discipline that deals with the design,
construction, and maintenance of the physical and naturally built environment,
including public works such as roads, bridges, canals, dams, airports, and railways.</div>
</div>
<p></p>
including public works such as roads, bridges, canals, dams, airports, and railways.</h3>
<a href="branch/CE.html"class="btn">CE</a></div>
</div>
</div>
</div>
</div>
Expand Down
73 changes: 60 additions & 13 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,15 +229,60 @@ p {
}

.col-3 {
background-color: transparent;
align-items: center;
display: flex;
flex-direction: row;
width: 300px;
height: auto;
perspective: 1000px;
margin-bottom: 100px;

}

.inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
flex-basis: 30%;
min-width: width 250px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
transition: transform 0.8s;
transform-style: preserve-3d;
}


.col-3:hover .inner{
transform: rotateY(180deg);
}

.front-side, .dis{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

.front-side{
background-color: #bbb;
/* color: black; */
border-radius: 20px;
height: 200px;
}

.dis{
background-color: rgb(255, 166, 166);
color: black;

transform: rotateY(180deg);

}

.dis h3{
font-size: 20px;
text-align:center;
}


.col-3 img {
width: 100%;
}
Expand Down Expand Up @@ -522,21 +567,23 @@ form input {
}

.dis {
position: absolute;
bottom: 20%;
height: 200px;
border-radius: 10px;
align-items: center;
height: 100%;
justify-content: center;
position: relative;
text-align: center;
font-size: 13px;
padding: 1rem 1rem;
transition: .5s ease;
background-color: #a6b6bb;
opacity: 0;
overflow: hidden;
;
/* background-color: black */

}

.col-3:hover .dis {
/* .col-3:hover .dis {
opacity: 1;
}
} */

#pic {
display: flex;
Expand Down
2 changes: 1 addition & 1 deletion syllabus.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ h1 {

.search__icon {
box-sizing: border-box;
float: right;
/* float: right; */
font-size: 1.25rem;
display: inline-block;
margin-left: .8rem;
Expand Down