Merge pull request #289 from kashisharora9462/main

change Discord ,Linkedin styling and front page appearance
Its-Aman-Yadav · May 19, 2024 · 6dd67fd · 6dd67fd
2 parents 23fde16 + 9d4b1c8
commit 6dd67fd
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 28 deletions.
diff --git a/css/style.css b/css/style.css
@@ -155,7 +155,7 @@ nav ul li  a:hover{
 }
 
 h1 {
-  color: #0a0a0a;
+  color: rgb(252, 250, 250);
   margin-top: 10px;
   font-size: 1.5rem;
 }
@@ -770,7 +770,26 @@ div.card {
 }
 
 /* home section */
+/* home section */
+
+
+
+.discord-icon, .linkedin-icon{
+  width: 40px;
+  height: 40px;
+  margin-left: 15px;
+  margin-right: 20px;
+  opacity: 0;
+  transition: opacity 0.4s ease-in-out;
+
+}
+#home .icon-wrapper {
+  display: inline-block;
+
+}
+
 #home {
+  font-family: 'Montserrat', sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -789,36 +808,47 @@ div.card {
 }
 
 #home .btn {
-
-    background: transparent;
-    border: 3px solid #ffffff;
-    border-radius: 40px;
-    color: #000000;
-    font-weight: 700;
-    letter-spacing: 1px;
-    padding: 14px 16px;
-    margin-top: 42px;
-    margin-right: 16px;
-    -webkit-transition: all 0.4s ease-in-out;
-    transition: all 0.4s ease-in-out;
-    background-color: #ffffff;
-
-
+  background: transparent;
+  text-align: center;
+  border: 3px solid #e3c515;
+  border-radius: 30px;
+  color: #ffffff ; 
+  font-weight: bold; 
+  letter-spacing: 0.5px; 
+  padding: 16px 20px; 
+  margin-top: 25px;
+  margin-right: 16px;
+  -webkit-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+white-space: nowrap;
+width: 120px; /* Initial width */
 }
 
+
 #home .btn:hover {
-  background: #f1c11a;
+  background: rgb(225, 222, 222);
   color: black;
-  border-color: transparent;
-  transition: 0.8s;
-} 
+  width: 160px;
+  border: 3px solid #ffffff;
+  /* Matched border color with hover background */
+  /* transition: 0.8s;
+  opacity: 1; */
+}
+#home .home-thumb a:hover .discord-icon,
+#home .home-thumb a:hover .linkedin-icon {
+  opacity: 1;
+}
 
 #home .btn-success {
   background: #ffffff;
   color: #242424;
   border-color: transparent;
 }
 
+
 /* about section */
 #about h3 {
   margin-top: 0px;

diff --git a/index.html b/index.html
@@ -10,7 +10,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="keywords" content="">
   <meta name="description" content="">
-
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+</head>
   <!-- stylesheets css -->
   <link rel="stylesheet" href="css/bootstrap.min.css">
   <link rel="stylesheet" href="css/animate.min.css">
@@ -90,18 +91,15 @@
 
         <div class="col-md-offset-2 col-md-8 col-sm-12">
           <div class="home-thumb">
-            <h1 class="wow fadeInUp" data-wow-delay="0.4s">Hello, Villager</h1>
+            <h1 class="wow fadeInUp" data-wow-delay="0.4s">Hello Villagers!!</h1>
             <h3 class="wow fadeInUp" data-wow-delay="0.6s">We are <strong>Open Source Village</strong> </h3>
-            <h3 class="wow fadeInUp" data-wow-delay="0.8s"><strong>Join </strong>our community now </h3>
+             <h3 class="wow fadeInUp" data-wow-delay="0.8s"><strong>Join </strong>our community now </h3> 
             <a href="https://discord.gg/mM9qFh2uZR" class="btn btn-lg btn-default smoothScroll wow fadeInUp"
-
-
-
-              data-wow-delay="1s">Join Discord<image src ="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSzDzOJpiBR0fBAJIOjXtUqpW9H_G9jhuQNTohtYu7sA&s" style="height: 40px; width: 40px;margin-left: 15px;margin-right: 20px;margin-top:0px; margin-bottom: 0px; border-radius: 5px;"></image></a>
+data-wow-delay="1s"><span class="icon-wrapper">Discord</span><image class="discord-icon" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSzDzOJpiBR0fBAJIOjXtUqpW9H_G9jhuQNTohtYu7sA&s" style="height: 40px; width: 40px;margin-left: 15px;margin-right: 20px;margin-top:0px; margin-bottom: 0px; border-radius: 5px;"></image></a>
 
 
               <a style="font-size: 20 px;" href="https://www.linkedin.com/company/open-source-village/" class="btn btn-lg btn-default smoothScroll wow fadeInUp"
-              data-wow-delay="1s"> Follow us on LinkedIn<image src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/LinkedIn_icon.svg/1024px-LinkedIn_icon.svg.png"style="height: 40px; width: 40px;margin-left: 15px;margin-right: 20px;margin-top:0px; margin-bottom: 0px;"></image></a>
+              data-wow-delay="1s"><span class="icon-wrapper">Linkedin</span><image class="linkedin-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/LinkedIn_icon.svg/1024px-LinkedIn_icon.svg.png"style="height: 40px; width: 40px;margin-left: 15px;margin-right: 20px;margin-top:0px; margin-bottom: 0px;"></image></a>
             <!-- <a href="#" data-toggle="modal" data-target="#modal1"
               class="btn btn-lg btn-success smoothScroll wow fadeInUp" data-wow-delay="1.0s">JOIN NEWSLETTER</a> -->
           </div>