From 14765192a2657c5a311e6702f0a8551f41851577 Mon Sep 17 00:00:00 2001
From: deepjyoti30 <deep.barman30@gmail.com>
Date: Tue, 12 May 2020 20:09:21 +0530
Subject: [PATCH] Added various stuff.

---
 css/main.css   | 29 ++++++++++++++++++++++++++++-
 index.html     | 30 ++++++++++++++++++++++++++++++
 scss/main.scss | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 97 insertions(+), 1 deletion(-)

diff --git a/css/main.css b/css/main.css
index f1ac29b..6a043a3 100644
--- a/css/main.css
+++ b/css/main.css
@@ -11,7 +11,8 @@ body {
   color: #fff; }
 
 .main {
-  width: 100%; }
+  width: 100%;
+  text-align: center; }
   .main #search-bar {
     width: 50%;
     margin: 0 auto;
@@ -31,3 +32,29 @@ body {
       .main #search-bar input:focus {
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
         transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
+  .main #other-content {
+    margin: 20px auto;
+    padding: 10px 0; }
+    .main #other-content .sqr {
+      display: inline-block;
+      margin: 20px 5px 0 5px;
+      width: 200px;
+      background: #304047;
+      padding: 20px 15px;
+      border-radius: 6px;
+      text-align: center;
+      min-height: 150px; }
+      .main #other-content .sqr:hover {
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
+      .main #other-content .sqr h4 {
+        color: #4DD0E1; }
+      .main #other-content .sqr a {
+        color: #9E9E9E;
+        font-size: 16px;
+        transition: .1s ease-in;
+        display: block; }
+        .main #other-content .sqr a:hover {
+          color: #fff;
+          text-decoration: none;
+          transition: .1s ease-in; }
diff --git a/index.html b/index.html
index be529e8..7e3c6b8 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,36 @@
         <div id="search-bar">
             <input id="search-bar-input" placeholder="Search something on Google"></input>
         </div>
+        <div id="other-content">
+            <div class="sqr">
+                <h4>Media</h4>
+                <a href="">Spotify</a>
+                <a href="">Youtube Music</a>
+                <a href="">Netflix</a>
+                <a href="">Youtube</a>
+            </div>
+            <div class="sqr">
+                <h4>Work</h4>
+                <a href="">Github</a>
+                <a href="">Heroku</a>
+                <a href="">Localhost</a>
+                <a href="">Personal</a>
+            </div>
+            <div class="sqr">
+                <h4>Social</h4>
+                <a href="">Reddit</a>
+                <a href="">Unixpornlove</a>
+                <a href="">r/unixporn</a>
+                <a href="">r/mk</a>
+            </div>
+            <div class="sqr">
+                <h4>Others</h4>
+                <a href="">neo4j local</a>
+                <a href="">rarbg</a>
+                <a href="">materialui colors</a>
+                <a href="">Gmail</a>
+            </div>
+        </div>
     </div>
     <!-- JQuery -->
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
diff --git a/scss/main.scss b/scss/main.scss
index 687862c..f0b4cd7 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -18,6 +18,7 @@ body {
 
 .main {
     width: 100%;
+    text-align: center;
 
     #search-bar {
         width: 50%;
@@ -44,4 +45,42 @@ body {
             
         }
     }
+
+    #other-content {
+        margin: 20px auto;
+        padding: 10px 0;
+
+        .sqr {
+            display: inline-block;
+            margin: 20px 5px 0 5px;
+            width: 200px;
+            background: lighten($background, 5);
+            padding: 20px 15px;
+            border-radius: 6px;
+            text-align: center;
+            min-height: 150px;
+
+            &:hover {
+                box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+                transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+            }
+
+            h4 {
+                color: #4DD0E1;
+            }
+
+            a {
+                color: #9E9E9E;
+                font-size: 16px;
+                transition: .1s ease-in;
+                display: block;
+
+                &:hover {
+                    color: $foreground;
+                    text-decoration: none;
+                    transition: .1s ease-in;
+                }
+            }
+        }
+    }
 }
\ No newline at end of file