From e181a70f1fbbb1cdfbbfa8d2c546e6e1c37a6403 Mon Sep 17 00:00:00 2001 From: dharshib Date: Fri, 10 May 2024 10:18:02 +0530 Subject: [PATCH] add flip on hover effect to facilities section cards --- index.html | 84 ++++++++++++++++++++++++++++++++++++++++-------------- style.css | 77 +++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 125 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 59ed85e..21a5284 100644 --- a/index.html +++ b/index.html @@ -33,10 +33,10 @@

World's Biggest University

-

Education is essential in today's world. Explore the latest advancements and upcoming languages at our university. Dive into programming and much more. +

Education is essential in today's world. Explore the latest advancements and upcoming languages at our + university. Dive into programming and much more. -

Visit Us To Know More +

Visit Us To Know More
@@ -46,22 +46,28 @@

Courses We Offer

Computer science

-

This class typically covers fundamental concepts in computer science such as algorithms, data structures, programming languages, and software engineering principles. Students may learn programming and gain skills in problem-solving and logical thinking.

+

This class typically covers fundamental concepts in computer science such as algorithms, data + structures, programming languages, and software engineering principles. Students may learn + programming and gain skills in problem-solving and logical thinking.

Principles of Economics:

-

This class introduces students to basic economic principles such as supply and market structures, and theories of consumer behavior. It provides a foundation for understanding economic systems and decision-making at both individual and societal levels.

+

This class introduces students to basic economic principles such as supply and market structures, and + theories of consumer behavior. It provides a foundation for understanding economic systems and + decision-making at both individual and societal levels.

Introduction to Psychology

-

This class explores the fundamentals of psychology including topics such as human development and mental health. Students may learn about different theoretical perspectives in psychology and how research methods are used to study behavior and mental processes.

+

This class explores the fundamentals of psychology including topics such as human development and + mental health. Students may learn about different theoretical perspectives in psychology and how + research methods are used to study behavior and mental processes.

Our Global Campus

-

Empowering communities locally and globally through our diverse range of campaigns.

+

Empowering communities locally and globally through our diverse range of campaigns.

@@ -89,35 +95,70 @@

Our facilities

-
+ + +
+
+
+ +
+
+

World Class Library

+

Our world-class library offers a vast collection of books, journals, and digital resources + from + around the globe, providing a sanctuary for learning.

+
+
- -

Athletic Excellence

-

Our premier basketball playground, featuring state-of-art facilities, fosters athletic prowess and sportsmanship and fostering a love for the game..

+
+
+ +
+
+

Athletic Excellence

+

Our premier basketball playground, featuring state-of-art facilities, fosters athletic + prowess and + sportsmanship and fostering a love for the game..

+
+
- -

Culinary Oasis of Diversity

-

Our cafeteria offers a diverse range of global cuisines, fostering a welcoming atmosphere that nourishes both body and spirit.

+
+
+ +
+
+

Culinary Oasis of Diversity

+

Our cafeteria offers a diverse range of global cuisines, fostering a welcoming atmosphere + that + nourishes both body and spirit.

+
+
+

What Our Students Says

-

We commit to meet the financial need of every admitted undergraduate student. We don’t consider your ability to pay when we review your application, and we don’t base our decision on whether you can cover the cost. If you’re accepted here, you belong here.

+

We commit to meet the financial need of every admitted undergraduate student. We don’t consider your ability + to pay when we review your application, and we don’t base our decision on whether you can cover the cost. If + you’re accepted here, you belong here.

-

“Eduford is home to me not because of the fancy buildings like Healy Hall, or its prestigious reputation, but rather because of the university’s care for the whole person as each of us attempts to live our lives for others.”

+

“Eduford is home to me not because of the fancy buildings like Healy Hall, or its prestigious + reputation, but rather because of the university’s care for the whole person as each of us + attempts to live our lives for others.”

Christine Berkley

@@ -132,7 +173,8 @@

Christine Berkley

- “It’s likely that you will come to love some of the most amazing souls this campus has to offer. That love may come in the form of friendships that you know will last forever.”

+ “It’s likely that you will come to love some of the most amazing souls this campus has to offer. + That love may come in the form of friendships that you know will last forever.”

David Byer

@@ -157,10 +199,10 @@

About Us

Welcome to our university, where academic excellence meets vibrant campus life. Join our
diverse community of learners and discover endless opportunities for growth, innovation, and success.

- - - - + + + +

made with By Juhi

diff --git a/style.css b/style.css index d419a6e..2ca036e 100644 --- a/style.css +++ b/style.css @@ -58,7 +58,7 @@ nav img { .text-box { width: 90%; - color:#fff; + color: #fff; position: absolute; top: 50%; left: 50%; @@ -98,7 +98,7 @@ nav .fa-bars { display: none; } -nav .fa-xmark{ +nav .fa-xmark { display: none; } @@ -108,7 +108,7 @@ nav .fa-xmark{ font-size: 20px; } - .nav-links ul li{ + .nav-links ul li { display: block; } @@ -253,25 +253,71 @@ h3 { } .facilities-col { - flex-basis: 31%; + flex: 1 1 300px; + background-color: transparent; + margin: 30px; + height: 300px; + perspective: 1000px; +} + +.facilities-col-inner{ + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.6s; + transform-style: preserve-3d; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); border-radius: 10px; - margin-bottom: 5%; - text-align: left; } -.facilities-col img { +.facilities-col:hover .facilities-col-inner { + transform: rotateY(180deg); +} + +.facilities-col-front, +.facilities-col-back { + position: absolute; width: 100%; border-radius: 10px; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } -.facilities-col p { - padding: 0; +.facilities-col-front img { + width: 100%; + border-radius: 10px; + height: 100%; } -.facilities-col h3 { - margin-top: 16px; - margin-bottom: 15px; - text-align: left; +.facilities-col-back { + background-color:#f44336; + color:#f0f0f0; + transform: rotateY(180deg); + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding: 10px; + text-align: center; +} +.facilities-col-back p, +.facilities-col-back h3 { + transition: 0.3s; + transition-delay: 0.2s; + opacity: 0; + transform: translateY(30px); +} +.facilities-col:hover .facilities-col-back p, +.facilities-col:hover .facilities-col-back h3{ + transform: translateY(0); + opacity: 1; +} + +.facilities-col-back p { + color: #fff3f3; } /* testimonials */ @@ -313,8 +359,9 @@ h3 { .testimonials-col .fa { color: #f44336; } -.testimonials-col .fa-solid{ - color: #f44336; + +.testimonials-col .fa-solid { + color: #f44336; }