From eded286ed27321b08e188e24b0eb1a779a151fb4 Mon Sep 17 00:00:00 2001
From: Ritvik Gupta <ritvikgupta75@gmail.com>
Date: Thu, 14 Oct 2021 17:13:20 +0530
Subject: [PATCH] Changed UI and made it responsive

---
 CONTRIBUTING.md |  2 +-
 project.css     | 60 +++++++++++++++++++++++++++++++++++++++++++++++++
 project.html    | 29 ++++++++++++------------
 3 files changed, 76 insertions(+), 15 deletions(-)
 create mode 100644 project.css

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a8a9a56..b6bf28f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -28,7 +28,7 @@
                     &lt;/p>
                     &lt;p class="description mb-2">
                         Project Description &lt;/p>
-                     &lt;p>
+                     &lt;p class="project-links">
                         &lt;a target="_blank" href="Your project Link" class="link primary-link">Live Demo</a>
                         &lt;a target="_blank" href="Your Github Repo of the project" class="link secondary-link">View
                             Source</a>
diff --git a/project.css b/project.css
new file mode 100644
index 0000000..4a81744
--- /dev/null
+++ b/project.css
@@ -0,0 +1,60 @@
+.primary-link{
+    transition-duration: 0.2s;
+
+}
+
+.primary-link:hover{
+    box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24);
+
+}
+
+.secondary-link{
+    transition-duration: 0.4s;
+}
+.secondary-link:hover{
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.section{
+    margin:1rem 0rem;
+    background-color: #e0e0e0;
+    width: 40%;
+    display: inline-block;
+    margin-left: 6%;
+    border-radius: 20px;
+    height: fit-content;
+    transition-duration: 0.4s;
+    /* border-color: var(--primary-color); */
+    border: 3px solid var(--primary-color);
+}
+.section:hover{
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
+.project-heading{
+    text-align: center;
+    transform: translateY(-10px);
+}
+.project-links{
+    width: fit-content;
+    margin: auto;
+}
+
+@media (max-width: 768px){
+    .section{
+        display: block;
+        width: auto;
+        margin: 15px;
+        padding: 20px;
+        padding-bottom: 25px;
+    }
+    .project-links a{
+        padding: 7.5px;
+        transform: translateX(-200%);
+        border-radius: 10px;
+    }
+    .project-heading{
+        transform: translateY(12%);
+    }
+
+}
\ No newline at end of file
diff --git a/project.html b/project.html
index 92b54ad..c0d9a6c 100644
--- a/project.html
+++ b/project.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="img/favicon.png">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="project.css">
     <title>CoderSaty | Projects</title>
 </head>
 
@@ -39,7 +40,7 @@ <h2 class="project-heading">Simon Game</h2>
         <p class="description mb-2">
             A simple web app created mainly using jQuery to make a virtual Simon Game.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://codersaty.github.io/Simon-Game/" class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/CoderSaty/Simon-Game" class="link secondary-link">View
                 Source</a>
@@ -58,7 +59,7 @@ <h2 class="project-heading">Best Indian Cricket Team 11</h2>
             A simple web app created mainly using React.js to tell the best Indian 11 when India has to play all the
             matches at the same time.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://bol2n.csb.app/" class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://codesandbox.io/s/distracted-rubin-bol2n?file=/src/App.js"
                 class="link secondary-link">View Source</a>
@@ -78,7 +79,7 @@ <h2 class="project-heading">Emoji Adder</h2>
             A simple web app created mainly using Vanilla javascript to add meaningful emojis to your message to make it
             more intresting for the reader to read it.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://codersaty.github.io/EmojiAdder/" class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/CoderSaty/EmojiAdder" class="link secondary-link">View
                 Source</a>
@@ -100,7 +101,7 @@ <h2 class="project-heading">Clock Pedia</h2>
             online
             chats. Enter any clock emoji in the search bar and hit the button to know what does it mean.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://i3r5h.csb.app/" class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://codesandbox.io/s/clockpedia-i3r5h?file=/src/App.js"
                 class="link secondary-link">View Source</a>
@@ -120,7 +121,7 @@ <h2 class="project-heading">Talk to Minions</h2>
             A simple web app developed using Vanilla JS to convert a message in english to gibberish language which is
             used by minions.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://codersaty.github.io/BananaTalk/" class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/CoderSaty/BananaTalk" class="link secondary-link">View
                 Source</a>
@@ -139,7 +140,7 @@ <h2 class="project-heading">Conflict Resolver</h2>
             A simple web app developed using Vanilla JS to act as a virtual toss for two person or team to decide on any
             issue.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://codersaty.github.io/conflictResolver/" class="link primary-link">Live
                 Demo</a>
             <a target="_blank" href="https://github.com/CoderSaty/conflictResolver" class="link secondary-link">View
@@ -158,7 +159,7 @@ <h2 class="project-heading">JavaScript Quiz</h2>
         <p class="description mb-2">
             A CLI app to test your knowledge of JavaScript. There are two levels. Play the game to see your JS skills.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://replit.com/@codersaty/JSQuiz?embed=1&output=1"
                 class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/CoderSaty/Lec1QuizJS" class="link secondary-link">View
@@ -179,7 +180,7 @@ <h2 class="project-heading">Know Me</h2>
             A simple CLI app I created to test my friend that how well they know me. Its a fun quiz. If you dont know me
             play to find out some intresting things about me.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://replit.com/@codersaty/KnowMe?embed=1&output=1"
                 class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/CoderSaty/Lec1QuizMe" class="link secondary-link">View
@@ -200,7 +201,7 @@ <h2 class="project-heading">Hang Man React</h2>
         <p class="description mb-2">
             Hang Man Game Build Using Modern React concepts like hooks, functional components, use state, use effect hooks.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://laughing-shannon-47ab98.netlify.app/"
                 class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/naveen701526/hang-man-react" class="link secondary-link">View
@@ -220,12 +221,12 @@ <h2 class="project-heading">Hulu Clone</h2>
         <p class="description mb-2">
             Basic Design Clone of Hulu OTT Platform(Fully Static).
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://ap-darknight.github.io/hulu-clone/"
                 class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/ap-darknight/hulu-clone" class="link secondary-link">View
                 Source</a>
-            <a target="_blank" href="https://www.linkedin.com/in/ashutosh-pandey-a258b6195/" class="link primary-link">Created By ap-darknight</a>
+            <a target="_blank" href="https://www.linkedin.com/in/ashutosh-pandey-a258b6195/" class="link primary-link">Created By</a>
         </p>
     </section>
 
@@ -239,7 +240,7 @@ <h2 class="project-heading">Image Gallery</h2>
         <p class="description mb-2">
             image gallery to search an integrated random image from Pixabay API
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://images-gallery-api.netlify.app/"
                 class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/kingkinfajarr/image-gallery" class="link secondary-link">View
@@ -260,7 +261,7 @@ <h2 class="project-heading">Mini Audio Player</h2>
         <p class="description mb-2">
              Play/Pause Audio and bookmark Audio points.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://mort-adarsh.github.io/audio/"
                 class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/mort-adarsh/audio" class="link secondary-link">View
@@ -278,7 +279,7 @@ <h2 class="project-heading">Weather Application</h2>
         <p class="description mb-2">
             Get the weather forecast of your location.
         </p>
-        <p>
+        <p class="project-links">
             <a target="_blank" href="https://weathermd.netlify.app/" class="link primary-link">Live Demo</a>
             <a target="_blank" href="https://github.com/MohamedDanis/react-weather-app" class="link secondary-link">View
                 Source</a>