Changing UI of homepage #30

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

homepage.html

@@ -73,7 +73,7 @@
 
         .logo img {
 
-            width: 180px;
+            width: 50px;
 
             border-radius: 50px;
 
@@ -129,7 +129,7 @@
 
         .firstsection {
 
-            background-color: green;
+            background-color:white;
 
             height: 400px;
 
@@ -138,7 +138,7 @@
 
         .secondsection {
 
-            background-color: blue;
+            background-color: rgb(0, 0, 0);
 
             height: 400px;
 
@@ -174,6 +174,7 @@
 
             justify-content: center;
 
+
         }
 
 
@@ -210,12 +211,26 @@
         }
 
 
-        .text-small {
+        .text-small-1 {
 
             font-size: 18px;
+            color: black;
+
 
         }
 
+        .text-small-2 {
+
+            font-size: 18px;
+            color: white;
+        }
+
+        .text-small-3 {
+
+          font-size: 18px;
+          color: black;
+        }
+
 
         .btn {
 
@@ -287,6 +302,33 @@
             margin-top: 19px;
 
         }
+        .thumbnail-1 img {
+
+width: 250px;
+
+border: 2px solid white;
+
+border-radius: 26px;
+
+margin-top: -260px;
+
+margin-left: 50px;
+
+}
+
+.thumbnail-2 img {
+
+width: 250px;
+
+border: 2px solid black;
+
+border-radius: 26px;
+
+
+
+margin-left: 50px;
+
+}
 
 
         .center {
@@ -357,7 +399,7 @@
 
                 <h1 class="text-big" id="web">Web Technology</h1>
 
-                <p class="text-small">
+                <p class="text-small-1">
 
                     HTML stands for HyperText Markup Language.
 
@@ -384,6 +426,12 @@ <h1 class="text-big" id="web">Web Technology</h1>
 
 
             </div>
+            <div class="thumbnail-2">
+
+              <img src= "code-icon-on-black-background-black-flat-style-vector-25959564.jpg" alt="laptop image">
+
+          </div>
+
 
         </div>
 
@@ -394,15 +442,15 @@ <h1 class="text-big" id="web">Web Technology</h1>
 
         <div class="box-main">
 
-            <div class="firstHalf">
+            <div class="firstHalf" style="margin-left: 200px;">
 
-                <h1 class="text-big" id="program">
+                <h1 class="text-big" id="program" style="color:white ;">
 
                     C Programming
 
                 </h1>
 
-                <p class="text-small">
+                <p class="text-small-2">
 
                     C is a procedural programming language. It
 
@@ -429,6 +477,12 @@ <h1 class="text-big" id="program">
             </div>
 
         </div>
+        <div class="thumbnail-1">
+
+          <img src= "6e46e7dbe2bb73dacc055e5dbd85c3ad.png" alt="laptop image">
+
+      </div>
+
 
     </section>
 
@@ -440,7 +494,7 @@ <h1 class="text-big" id="program">
             <h1 class="sectionTag text-big">Java</h1>
 
 
-            <p class="sectionSubTag text-small">
+            <p class="sectionSubTag text-small-3">
 
                 Java has been one of the most popular
 
@@ -473,7 +527,7 @@ <h1 class="sectionTag text-big">Java</h1>
 
         <div class="thumbnail">
 
-            <img src= "img.png" alt="laptop image">
+            <img src= "java-logo-vert-blk.png" alt="laptop image">
 
         </div>