refer code css

10 months ago · 8719c49fe8
2 changed files with 168 additions and 7 deletions
--- a/CustomerOnlineV2/CustomerOnlineV2/Views/Customer/Refer.cshtml
+++ b/CustomerOnlineV2/CustomerOnlineV2/Views/Customer/Refer.cshtml
@ -6,12 +6,14 @@
@{
    var text = Model;
 }
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <style>
+    <link href="~/css/refer.css" rel="stylesheet" />
+   @*  <style>
        .custom-tab {
            background-color: #262262 !important;
            color: white !important;
@ -119,7 +121,7 @@
            cursor: pointer;
        }
    </style>
-
+ *@
    <script src="~/vendor/jquery/jquery.min.js"></script>

 </head>
@ -161,15 +163,16 @@
                                            <div class="col-md-6">
                                                <br />
                                                <div class="mb-4">
-                                                    <h2 class="referral-code-header">Available Reward Amount: <span id="showRewardPoints" style="color:green;"></span></h2>
+                                                    <h5 class="referral-code-header" style="height:2%">Available Reward Amount: <span id="showRewardPoints" style="color:green;"></span></h5>
                                                </div>
-                                                <h2 class="referral-code-header">Refer Now</h2>
-                                                <p class="text-black fs-5">Receive a FREE £5.00 bonus credit as Reward Amount</p>
-                                                <p>You and your friend will each be given £5.00 in bonus credit. Get £1.00 after they successfully register, and 4$ after their first transaction.</p>
+                                                <h4 class="referral-code-header">Refer Now</h4>
+                                                <p style="width:70%">Receive a FREE £5.00 bonus credit as Reward Amount</p>
+                                                <p >You and your friend will each be given £5.00 in bonus credit.
+                                                    <br>Get £1.00 after they successfully register, and 4$ after their first transaction.</p>
                                                <p>There may be minimum send requirements.</p>
                                                <p><a href="https://imelondon.co.uk/RewardPoint_Declaration.html" target="_blank">Terms &amp; Conditions</a></p>
                                               @*  <p class="text-black fs-5">Refer IME Londong to your friends &amp; get many more exciting deals <br> plus discount on your every transfer.</p> *@
-                                                <h2 class="referral-code-header">Your Referral Code:</h2>
+                                                <h5 class="referral-code-header">Your Referral Code:</h5>
                                                <div class="referral-code-container">
                                                    <input type="text" id="referralCode" class="referral-code" value="@User.FindFirst("MembershipId").Value" readonly>
                                                    <span class="copy-icon" id="copyReferralCode" onclick="copyReferralCode()">
--- a/CustomerOnlineV2/CustomerOnlineV2/wwwroot/css/refer.css
+++ b/CustomerOnlineV2/CustomerOnlineV2/wwwroot/css/refer.css
@ -0,0 +1,158 @@
+
+
+
+.custom-tab {
+    background-color: #262262 !important;
+    color: white !important;
+    border: 1px solid #262262 !important;
+    transition: background-color 0.3s ease-in-out;
+}
+
+.custom-tab:hover {
+    background-color: white !important;
+    color: black !important;
+}
+#col-md-6 {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+}
+.col-md-3 {
+    flex: 0 0 auto !important;
+    width: 100% !important;
+}
+
+.p {
+    width: 400px;
+}
+.img-fluid {
+    max-width: 368px;
+    height: 214px;
+}
+
+.btn-primary {
+    background-color: #262262 !important;
+    border-color: #262262 !important;
+}
+/*@media screen and (max-width: 600px) {
+    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+        font-weight: 200;
+        line-height: 1.2;
+    }
+}*/
+
+    p {
+        line-height: 1.8 !important;
+        font-size: 18px !important;
+    }
+
+    @media screen and (max-width: 600px) {
+        .banner .banner-small {
+            height: 445px !important;
+            border-radius: 8px !important;
+            padding: 50px 20px !important;
+            margin-bottom: 24px !important;
+            position: relative !important;
+        }
+    }
+
+
+    #referImg {
+        text-align: right;
+        width:30%;
+
+    }
+
+    #reward-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 20px;
+    }
+
+        #reward-table th, #reward-table td {
+            padding: 12px;
+            text-align: left;
+            border: 1px solid #ddd;
+        }
+
+    /*             #reward-table tbody tr:nth-child(even) {
+                background-color: beige;
+            } */
+
+    @media screen and (max-width: 600px) {
+        #reward-table tbody tr:hover {
+            background-color: #f1f1f1;
+        }
+    }
+
+    }
+
+    .banner-small-2 {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+        .banner-small-2 .img-fluid {
+            margin-left: 20px;
+            padding-right: 100px;
+        }
+
+        .banner-small-2 .text-content {
+            width: 60%;
+        }
+
+    .referral-code-container {
+        position: relative;
+        width: 18%;
+    }
+
+    .referral-code-header {
+        font-size: 1rem;
+    }
+
+    .referral-code {
+        width: 120%;
+        padding-right: 30px;
+        padding-left: 13px;
+        background-color: #f0f8ff;
+        border: 1px solid #a0a0a0;
+        border-radius: 5px;
+    }
+
+        .referral-code:focus {
+            outline: none;
+        }
+
+    .copy-icon {
+        position: absolute;
+        top: -3px;
+        right: -25px;
+        padding: 10px;
+        cursor: pointer;
+    }
+
+@media (min-width: 1025px) and (max-width: 1260px){
+
+ .col-md-6 {
+    width: 65%;
+    height: 140%
+}
+}
+    @media (min-width: 768px) {
+
+        .row mb-4 {
+            width: 65%;
+            height: 3%;
+        }
+    }
+
+    .referral-code-header {
+        width: 500px;
+        height: 20px;
+    }
+
+    .p {
+        width: 65%%;
+    }