commit

TanishMoral11 · Jan 31, 2024 · 3813ad5 · 3813ad5
1 parent 8eaa08f
commit 3813ad5
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -14,11 +14,13 @@
 </head>
 
 <body>
-
+    <div>
+        <h1 class="Main_title">
+            Best Resources For You
+        </h1>
+    </div>
     <!-- Main title of the page -->
-    <h1 class="title">
-        Best Resources For You
-    </h1>
+
 
     <!-- Main container for content -->
     <div class="container">
@@ -155,11 +157,13 @@ <h3 class="title">Programming Language</h3>
                                         <li>
                                             CodeForces
                                             <a href="https://codeforces.com/problemset" target="_blank">
-                                                <img id="YTicon" src="https://cdn.iconscout.com/icon/free/png-256/free-code-forces-3629285-3031869.png" alt="CodeChef Logo"
+                                                <img id="YTicon"
+                                                    src="https://cdn.iconscout.com/icon/free/png-256/free-code-forces-3629285-3031869.png"
+                                                    alt="CodeChef Logo"
                                                     style="width: 20px; height: 20px; margin-right: 5px;">
                                             </a>
                                         </li>
-                                        
+
                                     </ol>
                                 </li>
                             </ul>
@@ -280,7 +284,9 @@ <h3 class="title">Programming Language</h3>
                                         <li>
                                             CodeForces
                                             <a href="https://codeforces.com/problemset" target="_blank">
-                                                <img id="YTicon" src="https://cdn.iconscout.com/icon/free/png-256/free-code-forces-3629285-3031869.png" alt="CodeChef Logo"
+                                                <img id="YTicon"
+                                                    src="https://cdn.iconscout.com/icon/free/png-256/free-code-forces-3629285-3031869.png"
+                                                    alt="CodeChef Logo"
                                                     style="width: 20px; height: 20px; margin-right: 5px;">
                                             </a>
                                         </li>
@@ -1076,8 +1082,7 @@ <h3 class="title">
                                                 </li>
                                                 <li>
                                                     TailWind
-                                                    <a href="https://v2.tailwindcss.com/docs"
-                                                        target="_blank">
+                                                    <a href="https://v2.tailwindcss.com/docs" target="_blank">
                                                         <img id="YTicon"
                                                             src="https://static-00.iconduck.com/assets.00/tailwind-css-icon-2048x1229-u8dzt4uh.png"
                                                             alt="Youtube Logo"
@@ -1101,15 +1106,15 @@ <h3 class="title">
                                         <li class="youtube-option"><b class="sub_parts">Youtube :</b>
                                             <ol>
                                                 <li>
-                                                   Great Stack
+                                                    Great Stack
                                                     <a href="https://youtu.be/8eQwgc9nc64?si=t_uwIhOd_h74BTfc"
                                                         target="_blank">
                                                         <img id="YTicon" src="YTicon.png" alt="Youtube Logo"
                                                             style="width: 20px; height: 20px; margin-right: 5px;">
                                                     </a>
                                                 </li>
                                                 <li>
-                                                   Light Code
+                                                    Light Code
                                                     <a href="https://youtu.be/qjch8tt7Vyk?si=UAJacymQgaHJKgX7"
                                                         target="_blank">
                                                         <img id="YTicon" src="YTicon.png" alt="Youtube Logo"
@@ -1124,7 +1129,7 @@ <h3 class="title">
                                                             style="width: 20px; height: 20px; margin-right: 5px;">
                                                     </a>
                                                 </li>
-                                                
+
                                                 <li>
                                                     And Many More
                                                     <a href="https://www.youtube.com/results?search_query=tailwind+css+project"
@@ -1147,7 +1152,7 @@ <h3 class="title">
                                         <br>
                                         <li class="youtube-option">
                                             <b>
-                                               Browsee
+                                                Browsee
                                             </b>
                                             <a href="https://browsee.io/content/Tailwind%20CSS%20Cheatsheet.pdf?ref=browsee.io"
                                                 target="_blank">
@@ -1160,7 +1165,7 @@ <h3 class="title">
                             </ul>
                         </li>
                     </ul>
-<br>
+                    <br>
 
 
 

diff --git a/style.css b/style.css
@@ -1,4 +1,4 @@
-body{
+body {
   background-color: black;
   color: #ffffff;
 }
@@ -45,12 +45,22 @@ body{
   column-gap: 50px;
 }
 
+.Main_title {
+  text-align: center;
+  color: #ffffff;
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  background-color: cadetblue;
+  width: auto;
+}
+
 .title {
   text-align: center;
   color: #ffffff;
   font-size: 2.5rem;
   margin-bottom: 3rem;
   background-color: cadetblue;
+  width: auto;
 }
 
 .container {
@@ -102,19 +112,68 @@ body{
   background-color: rgb(24, 188, 60);
   border: 5px solid rgb(145, 142, 142);
   font-size: 40px;
-  padding: 2px 6px ;
-
+  padding: 2px 6px;
 }
 .parts {
   background-color: blueviolet;
   border: 5px solid rgb(145, 142, 142);
   font-size: 25px;
-  padding: 2px 6px;;
+  padding: 2px 6px;
 }
 .sub_parts {
-
   border: 3px solid rgb(145, 142, 142);
   background-color: blue;
   font-size: 19px;
-  padding : 1px 5px;
+  padding: 1px 5px;
+}
+
+@media (max-width: 600px) {
+  .Main_title {
+    font-size: 4vh;
+
+  }
+  .container {
+    flex-direction: column;
+  }
+  .programming_lan {
+    text-align: center;
+    width: auto;
+    height: auto;
+  }
+
+  .title {
+    font-size: 3vh;
+    width: auto;
+  }
+  .container {
+    width: 100%;
+  }
+  #programming_lan {
+    width: auto;
+  }
+  #main_web {
+    width: auto;
+
+  }
+  .left_box,
+  .right_box {
+    flex-direction: column;
+  }
+  #web_development{
+    flex-direction: column;
+  }
+  .message{
+    font-size: 5vh;
+  }
+  .language_design {
+    font-size:4vh;
+  }
+  .parts{
+    font-size: 2.4vh;
+  }
+  .sub_parts{
+    font-size:1.9vh;
+  }
+
 }
+`