added some amazing beautiful crazy css style

CheePheng · Apr 30, 2024 · 7113dc2 · 7113dc2
1 parent 39de272
commit 7113dc2
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 14 deletions.
diff --git a/Views/Basketball/Index.cshtml b/Views/Basketball/Index.cshtml
@@ -2,8 +2,44 @@
 @{
     ViewData["Title"] = "Index";
 }
+<style>
+    .card-team {
+        background-color: #ffd700;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
 
-<div class="container mt-5">
+        .card-team .card-header {
+            background-color: #000080;
+            border-radius: 10px 10px 0 0;
+            color: #fff;
+        }
+
+    .card-weather {
+        background-color: #ffa07a;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+        .card-weather .card-header {
+            background-color: #228b22;
+            border-radius: 10px 10px 0 0;
+            color: #fff;
+        }
+
+    .btn-logout {
+        background-color: #ff4500;
+        border-color: #ff4500;
+        color: #fff;
+        transition: background-color 0.3s ease;
+    }
+
+        .btn-logout:hover {
+            background-color: #dc143c;
+        }
+</style>
+
+<div class="container mt-5 card-team card-header">
     <div class="row justify-content-center">
         <div class="col-md-6">
             <div class="card">
@@ -19,7 +55,7 @@
     </div>
 </div>
 
-<div class="container mt-5">
+<div class="container mt-5 card-weather card-header">
     <div class="row justify-content-center">
         <div class="col-md-6">
             <div class="card mt-5">
@@ -48,7 +84,7 @@
 
 @if (Context.User.Identity.IsAuthenticated)
 {
-    <div class="container mt-5">
+    <div class="container mt-5 btn-logout">
         <div class="row justify-content-center">
             <div class="col-md-6">
                 <h3 class="text-center">Welcome @User.Identity.Name</h3>

diff --git a/Views/Home/Index.cshtml b/Views/Home/Index.cshtml
@@ -1,4 +1,4 @@
-<div class="text-center">
+<div class="text-center bg-primary">
     <h1 class="display-4">Welcome To The Basketball Store</h1>
 
     <a id="microsoft-login" class="microsoft-login-btn" href="https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=3ed46488-5c04-4492-a1b3-c0b7b03d996d&response_type=code&redirect_uri=https://localhost:7200/Basketball&response_mode=query&scope=offline_access%20user.read%20mail.read&state=12345">
@@ -11,9 +11,64 @@
 
 
 <style>
-	.microsoft-login-btn, .google-login-btn {
-		text-decoration: none;
-		color: transparent;
-		display: inline-block;
-	}
+
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f0;
+        margin: 0;
+        padding: 0;
+    }
+
+    .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .display-4 {
+        font-size: 2.5rem;
+        margin-bottom: 30px;
+        color: #FFF;
+    }
+
+    .logo {
+        width: 200px;
+        height: auto;
+        margin: 20px;
+        transition: transform 0.3s ease-in-out;
+    }
+
+        .logo:hover {
+            transform: scale(1.1);
+        }
+
+    .microsoft-login-btn, .google-login-btn {
+        text-decoration: none;
+        color: transparent;
+        display: inline-block;
+    }
+
+    .bg-primary {
+        background-color: #FFA500;
+        color: #FFA500; 
+        padding: 10px 20px;
+        border-radius: 5px;
+        text-transform: uppercase;
+        font-weight: bold;
+        transition: background-color 0.3s ease-in-out;
+    }
+
+        .bg-primary:hover {
+            background-color: #FFA500;
+        }
+
+    .basketball-image {
+        max-width: 100%;
+        height: auto;
+    }
+
 </style>
diff --git a/Views/Home/styles.css b/Views/Home/styles.css
@@ -1,5 +1,4 @@
-<head >
-<style >
+
 .microsoft-login-btn {
     display: inline-block;
     background-color: #0078d4;
@@ -20,6 +19,3 @@
     height: auto; /* Maintain aspect ratio */
     margin-right: 10px; /* Add space between logo and text */
 }
-
-</style >
-</head >