socail link added to github

jashim-official75 · Apr 17, 2023 · 6ddfaf5 · 6ddfaf5
1 parent 45db21d
commit 6ddfaf5
Show file tree

Hide file tree

Showing 4 changed files with 196 additions and 25 deletions.
diff --git a/css/main.css b/css/main.css
@@ -600,7 +600,7 @@ header nav ul li a:hover {
   color: #000;
 }
 
-.pop, #sidebar-cart div.action-buttons a.view-cart-button:hover,
+.pop, .add_new-btn .addnew_btn:hover, #sidebar-cart div.action-buttons a.view-cart-button:hover,
 #sidebar-cart div.action-buttons a.checkout-button:hover, .primary_btn:hover {
   animation: pop 0.2s linear forwards;
 }
@@ -3263,6 +3263,66 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   border-radius: 50%;
   box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.6);
 }
+#profile_preview .socail_link .link_items {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+#profile_preview .socail_link .link_items .select_platform {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+  width: 100%;
+  background: transparent;
+  border-radius: 5px;
+}
+#profile_preview .socail_link .link_items .select_platform select {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: #7239D6;
+  color: #fff;
+  padding: 0.8rem 1rem;
+}
+#profile_preview .socail_link .link_items .select_platform .socail_url {
+  position: relative;
+  width: 100%;
+  height: 50px;
+}
+#profile_preview .socail_link .link_items .select_platform .socail_url input {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  outline: 0;
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+  padding: 0.5rem;
+}
+#profile_preview .socail_link .link_items .select_platform ::-moz-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+#profile_preview .socail_link .link_items .select_platform ::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.add_new-btn .addnew_btn {
+  background: linear-gradient(to top, rgba(114, 57, 214, 0.5), rgba(74, 31, 150, 0.5));
+  color: #fff;
+  padding: 0.5rem 1rem;
+  width: 150px;
+  margin-left: auto;
+  display: block;
+  border-radius: 25px;
+  border: 2px solid rgba(255, 255, 255, 0.6);
+}
+.add_new-btn .addnew_btn:hover {
+  border-color: #7239D6;
+}
 
 .profile_wrapper {
   position: relative;

diff --git a/css/main.css.map b/css/main.css.map
diff --git a/profile.html b/profile.html
@@ -161,6 +161,34 @@ <h3 class="text-light">Upload Profile</h3>
                                         </span>
                                       </div>
                                     </div>
+                                    <div class="socail_link">
+                                        <h1 class="title">Socail Links</h1>
+                                        <div class="link_items">
+                                            <div class="select_platform">
+                                                <select name="socail_platform" id="">
+                                                    <option value="01">Facebook</option>
+                                                    <option value="02">Twitter</option>
+                                                    <option value="03">Linkedin</option>
+                                                    <option value="04">Youtube</option>
+                                                </select>
+                                             <div class="socail_url">
+                                                <input type="text" name="" id="" placeholder="Input url here">
+                                             </div>
+
+
+
+                                        </div>
+
+                                        <div class="delete_socail">
+                                            <i class="fa-solid fa-trash-can"></i>
+                                         </div>
+                                    </div>
+                                    <div class="user_name inputBx mt-3"><input type="text" name="username" id="username" placeholder="Username"></div>
+                                    <div class="add_new-btn ">
+                                        <a href="#" class="addnew_btn ms-auto">Add New</a>
+                                       </div>
+                                    </div>
+
                                     <input type="submit" value="Save" class="primary_btn" id="save">
                                 </form>
                             </div>

diff --git a/scss/pages/_profile.scss b/scss/pages/_profile.scss
@@ -1,3 +1,5 @@
+
+
 #profile_preview {
     position: relative;
     padding: 4.8rem 0 0;
@@ -14,12 +16,12 @@
         padding: 1.4rem 0;
         display: flex;
         align-items: center;
-        gap: 1rem ;
+        gap: 1rem;
         color: $light-color;
         @include border-radius(0 50rem 50rem 0);
         margin: 0.5rem 0;
-        i 
-        {
+
+        i {
             font-size: 1.6rem;
             margin-left: 1rem;
 
@@ -30,27 +32,29 @@
             color: $dark-color;
         }
     }
-.tab-content 
-{
-    width: calc(100% - 50rem) !important;
-    margin-left: auto;
-    margin-right: auto;
-}
-.nav-pills 
-{
-    position: fixed;
-    width: 20rem !important;
-    margin-top: 1.5rem;
-}
-.upload_cover {
-    margin-bottom: 5rem;
-}
+
+    .tab-content {
+        width: calc(100% - 50rem) !important;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .nav-pills {
+        position: fixed;
+        width: 20rem !important;
+        margin-top: 1.5rem;
+    }
+
+    .upload_cover {
+        margin-bottom: 5rem;
+    }
+
     .edit__profile {
         padding: 2rem 0;
         text-align: center;
         width: 100%;
-    //    @extend .flex_center;
-       flex-direction: column;
+        //    @extend .flex_center;
+        flex-direction: column;
 
         h1 {
             color: $light-color-8;
@@ -62,7 +66,7 @@
                 opacity: 0;
                 visibility: hidden;
                 display: none;
-              
+
             }
 
             .editImgbox {
@@ -84,8 +88,8 @@
                     padding: 0.2rem;
                     object-position: bottom 0;
                 }
-                .edit_icon 
-                {
+
+                .edit_icon {
                     position: absolute;
                     bottom: 1rem;
                     right: 1rem;
@@ -99,4 +103,83 @@
             }
         }
     }
+
+    // SOCAIL ITEMS
+    .socail_link {
+
+        .link_items {
+
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+
+            .select_platform {
+                display: flex;;
+                align-items: center;
+                height: 50px;
+                border: 1px solid $light-color-1;
+                overflow: hidden;
+                width: 100%;
+                background: transparent;
+                border-radius: 5px;
+
+                select {
+
+                    margin: 0;
+                    padding: 0;
+                    border: 0;
+                    outline: 0;
+                   background: $primary-color;
+                    color: $light-color;
+                    padding: 0.8rem 1rem;
+                }
+                .socail_url {
+                    position: relative;
+                    width: 100%;
+                    height: 50px;
+                    input {
+
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        border: 0;
+                        outline: 0;
+                        background: $light-color-1;
+                        color: $light-color;
+                        padding: 0.5rem;
+
+
+                    }
+                }
+
+
+                ::placeholder {
+                    color: $light-color-6
+                }
+
+            }
+
+
+        }
+    }
+
+}
+
+.add_new-btn {
+    .addnew_btn{
+        background: $gradient;
+        color: $light-color;
+        padding: 0.5rem 1rem;
+        width: 150px;
+        margin-left: auto;
+        display: block;
+        border-radius: 25px;
+        border: 2px solid $light-color-6;
+        &:hover {
+            @extend .pop;
+            border-color: $primary-color
+
+        }
+    }
 }