Updated Devs Section

shrish-sharma-git · shrish-sharma-git · commit 69b0770dc2c2 · 2021-06-03T11:11:31.000+05:30
diff --git a/docs/devs.html b/docs/devs.html
@@ -42,6 +42,9 @@
   background-color: transparent;
   width: 300px;
   height: 300px;
+  margin-bottom: 15px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.267);
+  border-radius: 10px;
   perspective: 1000px; /* Remove this if you don't want the 3D effect */
   box-shadow: var(--box-shadow);
 }
@@ -82,6 +85,23 @@
   color: #000000;
   transform: rotateY(180deg);
 }
+
+.dev-head {
+  font-size: 30px;
+  margin: 0;
+  text-align: center;
+}
+
+.avatar{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.img-avatar {
+  border-radius: 15px;
+}
+
 </style>
 </head>
 <body>
@@ -91,8 +111,7 @@
         title="Toggle Dark Mode"
         aria-pressed="false"
         onclick="toggleTheme(this)"
-        class="dark-mode-toggle"
-      >
+        class="dark-mode-toggle">
       <span class="sun">
         <img
           alt="sun icon that represents light mode"
@@ -106,56 +125,41 @@
           src="images/Dark.png"
       /></span>
       </button>
-      <h1>Meet The <br> Devs!</h1>
+      <h1 class="dev-head">Meet The Devs!</h1>
       <section style="font-size: 1rem; padding: 20px 0px;">
-        <p>
-        <strong>Development is an Art! We tried to be as much abstract as possible.
-            Enjoy Take Notes! &#10084; 🎊</strong>
-        <br /><br /><br />
-        </p>
+        <p style="text-align: center;">Development is an Art!<br>We tried to be as much abstract as possible.
+            Enjoy Take Notes! &#10084; 🎊</p>
       </section>
-      <section style="font-size: 1rem; padding: 20px 0px;">
-        <center>
+      <section class="avatar" style="font-size: 1rem; padding: 20px 0px;">
         <div class="flip-card">
             <div class="flip-card-inner">
               <div class="flip-card-front">
-                <img src="images/Spandan Saxena.jpg" alt="Avatar" style="width:300px;height:300px;">
+                <img src="images/Spandan Saxena.jpg" alt="Avatar" class="img-avatar" style="width:300px;height:300px;">
               </div>
-              <div class="flip-card-back">
+              <div class="flip-card-back img-avatar">
                 <h1>Spandan Saxena</h1>
-                <br>
                 <a href="https://github.com/the-rebooted-coder"><i class="fa fa-github fa-2x"></i></a> &nbsp;
                 <a href="https://www.linkedin.com/in/spandn/"><i class="fa fa-linkedin fa-2x"></i></a> &nbsp;
                 <a href="https://spandansaxena.codes"><i class="fa fa-globe fa-2x"></i></a>
               </div>
             </div>
           </div>
-          <br>
           <div class="flip-card">
             <div class="flip-card-inner">
               <div class="flip-card-front">
-                <img src="images/Shady.jpeg" alt="Avatar" style="width:300px;height:300px;">
+                <img src="images/Shady.jpeg" alt="Avatar" class="img-avatar" style="width:300px;height:300px;">
               </div>
-              <div class="flip-card-back">
+              <div class="flip-card-back img-avatar">
                 <h1>Shrish Sharma</h1>
-                <br>
                 <a href="https://github.com/shrish-sharma-git"><i class="fa fa-github fa-2x"></i></a> &nbsp;
                 <a href="https://www.linkedin.com/in/shrish-sharma"><i class="fa fa-linkedin fa-2x"></i></a> &nbsp;
                 <a href="https://shrish-sharma-git.github.io/My-Portfolio/"><i class="fa fa-globe fa-2x"></i></a>
               </div>
             </div>
           </div>
-        </center> 
-        <br><br>
-        <center>
-            <b>Thank you for using Take Notes App
-              Remember: There's no alternative to handwritten notes!</b>
-        </center> 
+          <p style="text-align: center;">Thank you for using Take Notes App
+            Remember: There's no alternative to handwritten notes!</p>
       </section>
-    <!-- Home Button -->
-    <button>
-      <a href="./take-notes.html"><i class="fa fa-home fa-2x" style="height: 25px; width: 25px"></i></a>
-    </button>
     </main>
 
         
