diff --git a/images/bck.jpg b/images/bck.jpg new file mode 100644 index 0000000..37e12ea Binary files /dev/null and b/images/bck.jpg differ diff --git a/includes/styles.css b/includes/styles.css index dfeee63..a1098d7 100644 --- a/includes/styles.css +++ b/includes/styles.css @@ -10,8 +10,13 @@ body, h1, h2, p, ul, li, a { body { font-family: 'Roboto', sans-serif; - background: linear-gradient(to right, #0f2027, #203a43, #2c5364); + /*background: linear-gradient(to right, #0f2027, #203a43, #2c5364);*/ color: white; + background: url(../images/bck.jpg) no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; } @@ -55,8 +60,9 @@ header .banner { max-width: 100%; /* Ensures the image is never larger than its container */ max-height: 200px; /* Maximum height for the image */ display: block; /* Prevents inline default spacing */ - margin: 0 auto; /* Centers the image within the header */ + margin: 40px auto 0px auto; /* Centers the image within the header */ width: auto; /* Adjusts the width to maintain the aspect ratio */ + border-radius: 10px; } @@ -65,7 +71,7 @@ header, main, footer { min-width: 800px; margin: 5px auto; padding: 10px; - border: 1px solid rgb(255, 255, 255); + /*border: 1px solid rgb(255, 255, 255);*/ border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } @@ -81,13 +87,14 @@ header h1 { } section h2 { - border-bottom: 1px solid white; margin-bottom: 10px; padding-bottom: 5px; font-family: 'Bungee Spice'; text-align: center; /* Centers the text horizontally */ margin-left: auto; margin-right: auto; + margin-top: 40px; + margin-bottom: 30px; } @@ -146,7 +153,7 @@ table { } table, th, td { - border: 1px solid white; + border: 1px solid #e6910924; border-radius: 1px; } @@ -156,7 +163,8 @@ th, td { } th { - background-color: #555; + background-color: #1e0c0094; + color: #ff6000; } tr:hover { @@ -180,14 +188,6 @@ tr:hover { } - -/* Hacker theme styles */ -body { - font-family: 'Noto Sans', monospace; - background: #0f0f0f; /* Dark background for hacker aesthetic */ - color: #e69109; /* Bright green text, reminiscent of old terminals */ -} - /* Ensure elements scale well on mobile */ @media (max-width: 768px) { body { @@ -217,6 +217,7 @@ a { padding: 10px 20px; text-transform: uppercase; transition: background-color 0.3s ease, color 0.3s ease; + border-radius: 10px; } .btn:hover { diff --git a/includes/topnav.css b/includes/topnav.css index dd5d746..afe100f 100644 --- a/includes/topnav.css +++ b/includes/topnav.css @@ -7,7 +7,6 @@ min-width: 800px; margin: 5px auto 5px auto; padding: 10px; - border: 1px solid rgb(255, 255, 255); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } @@ -19,11 +18,11 @@ /* Style navigation menu links */ .topnav a { - color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; + border-radius: 10px; } /* Style the hamburger menu */ @@ -34,6 +33,9 @@ position: absolute; right: 0; top: 0; + margin-top: 10px; + margin-right: 10px; + border-radius: 10px; } /* Add a grey background color on mouse-over */