fishing index.html

Author: CCCStudioCoder

general.css

@@ -144,38 +144,47 @@ div#results a {
     src: url('images/Minecraft.ttf') format('truetype');
 }
 
-div#featured {
-    width: 95%;
+
+/* Index page styles */
+div.emphasis {
+    width: 90%;
     height: 50%;
     background-color: white;
     border-radius: 50px;
+    position: relative;
+    left: 2.5%;
     padding: 10px;
+    margin-top: 5%;
     border: 3px solid black;
 }
+div *:not(.emphasis-header) {
+    margin-right: auto;
+}
 
-#featured-header {
+.emphasis-header {
     display: flex; /* Use flexbox for alignment */
     justify-content: space-between; /* Space elements to opposite ends */
     align-items: center; /* Vertically align items */
     width: 100%; /* Ensure it spans the full width */
     margin-bottom: 10px; /* Add spacing below the header */
+    gap: 60%; /* Add spacing between child elements */
 }
 
-#featured-header p {
+.emphasis-header p, .emphasis-header a {
     margin: 0; /* Remove default margin */
-    font-size: 24px; /* Adjust font size if needed */
-    font-weight: bold;
+    font-size: 24px !important; /* Adjust font size if needed */
+    font-weight: bold !important; /* Make text bold */  
 }
 
-#featured-header a {
+.emphasis-header a {
     text-decoration: none;
     color: blue;
     font-size: 18px;
     font-weight: bold;
     transition: color 0.3s;
 }
 
-#featured-header a:hover {
+.emphasis-header a:hover {
     color: darkblue; /* Change color on hover */
 }
 

index.html

@@ -15,20 +15,20 @@
             <a href="sustain">Sustain</a>
         </ol></nav>
         <h1>Welcome to CCCStudio website</h1>
-        <img src="images/progressbar.gif" alt="progress" id="bgvid" style="position: relative; top: 90px; left: 10%;">
+        <img src="images/progressbar.gif" alt="progress" style="position: relative; top: 90px; left: 10%;">
         <p>
            <b>Here you can find info over me and my projects.</b>
         </p>
         <p>Work in </p>
-        <div id="featured">
-            <div id="featured-header">
+        <div class="emphasis">
+            <div class="emphasis-header">
                 <p>Featured projects</p>
-                <a href="projects.html">See more</a>
+                <a href="projects">See all</a>
             </div>
             <article>
                 <a href="ore_pack/" alt="Ore pack">
                     <p>Ore pack</p>
-                    <img src="images/ore_pack_logo.png" alt="ore pack" id="orepack">
+                    <img src="images/ore_pack_logo.png" alt="ore pack">
                 </a>
             </article>
             <article>
@@ -38,5 +38,12 @@ <h1>Welcome to CCCStudio website</h1>
                 </a>
             </article>  
         </div>
+        <div class="emphasis">
+            <div class="emphasis-header">
+                <p>Statistics</p>
+                <a href="stats">See more</a>
+            </div>
+            <img src="images/total-download.png" alt="total downloads" id="total-downloads">
+        </div>
     </body>
 </html>