Add files via upload

gitsdeepak · Jul 23, 2024 · 58c42d6 · 58c42d6
1 parent 5dae89f
commit 58c42d6
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,73 @@
-# Flip-Card-Animation
+<h1 align="center">Flip-Card Animation</h1>
+<h3 align="center">Simple site to group all my profiles on social networks in one place.</h3>
+
+<p align="center">
+  <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/gitsdeepak/Flip-Card-Animation?color=04D361&labelColor=000000">
+
+  <a href="https://www.github.com/gitsdeepak/">
+    <img alt="Made by" src="https://img.shields.io/static/v1?label=made%20by&message=gitsdeepak&color=04D361&labelColor=000000">
+  </a>
+
+  <img alt="Repository size" src="https://img.shields.io/github/repo-size/gitsdeepak/Flip-Card-Animation?color=04D361&labelColor=000000">
+
+  <a href="https://github.com/gitsdeepak/linktree/commits/master">
+    <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/gitsdeepak/Flip-Card-Animation?color=04D361&labelColor=000000">
+  </a>
+</p>
+
+<p align="center">
+  <a href="#-about-the-project">About the project</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-getting-started">Getting started</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-how-to-contribute">How to contribute</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+  <a href="#-license">License</a>
+</p>
+
+---
+<!--
+<p align="center">
+  <img alt="screenshot" src="screenshot.png">
+</p>
+
+---
+-->
+## 💡 About the project
+
+Welcome to the Flip-Card Animation project! This project features a sleek and interactive flip-card animation with on-hover quotes, built using HTML, CSS. The design is fully responsive, ensuring a seamless experience across all devices. The project demonstrates smooth CSS transitions and a clean code structure, making it easy to understand and customize. Explore the project and get inspired by the engaging animation effects!
+
+**Features:**
+- Responsive design
+- Smooth CSS transitions
+- On-hover quotes
+- Clean and simple code
+
+Check out the live demo [here](https://gitsdeepak.github.io/Flip-Card-Animation/).
+
+
+## 🚀 Getting started
+
+If you installed git you can clone the code to your machine, or download a ZIP of all the files directly.
+[Download the ZIP from this location](https://github.com/gitsdeepak/Flip-Card-Animation/archive/master.zip), or run the following [git](https://git-scm.com/downloads) command to clone the files to your machine:
+```bash
+git clone https://github.com/gitsdeepak/Flip-Card-Animation
+```
+- Once the files are on your machine, open the _linktree_ folder in [Visual Studio Code](https://code.visualstudio.com/).
+- With the files open in Visual Studio Code, press the **Go Live** button at the bottom of the window to launch the files with [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer).
+- Change the profile image and texts in the `index.html` file.
+- Change the colors and fonts in the `style.css` file.
+
+## 🤔 How to contribute
+
+- Fork this repository;
+- Create a branch with your feature: `git checkout -b my-feature`;
+- Commit your changes: `git commit -m "feat: my new feature"`;
+- Push to your branch: `git push origin my-feature`.
+
+Once your pull request has been merged, you can delete your branch.
+
+## 📝 License
+
+This project is under the MIT license. See the [LICENSE](LICENSE.md) file for more details.
+
+---
+
+Made by gitsdeepak :wave: [Get in touch](https://gitsdeepak.github.io/Flip-Card-Animation)
diff --git a/assets/moon.jpg b/assets/moon.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Flip Card Animation</title>
+</head>
+<body>
+    <div class="container">
+        <div class="card">
+            <div class="front"></div>
+            <div class="back">
+                <!-- <h1>Back of Card</h1>
+                <p>Additional info on the back of the card</p> -->
+                <br>
+                <br>
+                <br>
+                <br>
+                <br>
+                <p>Even if half</p>
+                <p>the moon knows how to win hearts..</p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,65 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    overflow: hidden;
+    background-color: #8EC5FC;
+    background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: rgb(211, 211, 211);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    width: 350px;
+    height: 500px;
+    perspective: 800px;
+}
+
+.container:hover > .card {
+    cursor: pointer;
+    transform: rotateY(180deg);
+}
+
+.card {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    transition: transform 1500ms;
+    transform-style: preserve-3d;
+}
+
+.front, .back {
+    height: 100%;
+    width: 100%;
+    border-radius: 2rem;
+    box-shadow: 0 0 5px 2px rgba(50, 50, 50, 0.25);
+    position: absolute;
+    backface-visibility: hidden;
+}
+
+.front {
+    background-image: URL(./assets/moon.jpg);
+    width: 350px;
+    height: 500px;
+    background-size: cover;
+    background-position: center;
+}
+
+.back {
+    /*background-color: #3a3a3a;*/
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(./assets/moon.jpg);
+    background-size: cover;
+    background-position: center;
+    transform: rotateY(180deg);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+}