Aligned the about us in home page (#459)

Fixed issue #434 Aligned the about us in center
HimanshuNarware · Jul 23, 2024 · 95e762a · 95e762a
2 parents cea286b + eec6e9b
commit 95e762a
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 26 deletions.
diff --git a/src/Component/Footer.css b/src/Component/Footer.css
@@ -47,6 +47,7 @@
 	margin-bottom: 10px;
   }
 
+
   .footer-links {
 	list-style-type: none;
 	padding: 0;
@@ -101,6 +102,7 @@
 	transition: all 0.3s ease-in-out;
   }
 
+
   .footer-links li:hover span {
 	color: #8a2be2;
   }
@@ -110,18 +112,17 @@
 	background-color: #8a2be2;
   }
 
-
   .footer-social-icons {
 
 	display: flex;
 	gap: 15px;
 	margin: 10px 0;
+
   }
 
-  .footer-social-icons a {
-	color: #ccc;
-	font-size: 1.5em;
-	transition: color 0.3s, transform 0.3s;
+  .footer-social-icons a{
+	color: white;
+	font-size: 24px;
   }
 
   .footer-social-icons a:hover  {
@@ -151,4 +152,105 @@
 	  font-size: 0.8em;
 	}
   }
-
+  .icons {
+	background: rgba(120, 12, 159, 0.144);
+	top: 0px;
+	color: blue;
+	box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.279);
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	position: relative;
+	overflow: hidden;
+	box-shadow: 0.5px 1px 7px #ba87ea52,0.5px 1px 7px #892be252;
+	backdrop-filter: blur(1px);
+  }
+
+  .icons a::after {
+	content: "";
+	width: 40px;
+	height: 40px;
+	top: -40px;
+	left: 0;
+	background: linear-gradient(
+	  40deg,
+	  rgb(246, 126, 28),
+	  rgb(221, 54, 54),
+	  rgb(250, 41, 118),
+	  rgb(214, 18, 214)
+	);
+	position: absolute;
+	transition: 0.5s;
+
+  }
+  .outerD{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 13px;
+  }
+
+  .icons a:hover::after {
+	top: 0px;
+  }
+
+  .icons:nth-child(1) a::after {
+	background: linear-gradient(
+	  40deg,
+	  rgb(246, 126, 28),
+	  rgb(221, 54, 54),
+	  rgb(250, 41, 118),
+	  rgb(214, 18, 214)
+	);
+  }
+
+  .icons:nth-child(2) a::after {
+	background: linear-gradient(40deg, #000609, #00101a);
+  }
+  .icons:nth-child(4) a::after {
+	background: linear-gradient(40deg, rgb(4, 51, 98), rgb(10, 102, 194));
+  }
+
+  .icons:nth-child(5) a::after {
+	background: linear-gradient(
+	  40deg,
+	  rgb(0, 255, 255),
+	  rgb(0, 191, 255),
+	  rgb(0, 128, 255),
+	  rgb(0, 64, 255)
+	);
+  }
+  .icons:nth-child(3) a::after {
+	background: linear-gradient(
+	  40deg,
+	  rgb(95, 0, 140),
+	  rgb(95, 0, 140),
+	  rgb(27, 1, 39),
+	  rgb(27, 1, 39)
+	);
+  }
+
+  .f01 {
+	position: absolute;
+	bottom: 0;
+  }
+
+  .ico {
+   background-color: transparent;
+	position: absolute;
+	font-size: 26px;
+	z-index: 20;
+	top: 50%;
+	left: 50%;
+
+	transform: translate(-50%, -50%);
+
+	color: white; /* Remove font-size property from here */
+  }
+  .ico:hover{
+	background-color: transparent;
+  }
+  .head{
+	@apply xs:text-[12px]; /* Remove font-size property from here */
+  }
+
diff --git a/src/Component/Footer.jsx b/src/Component/Footer.jsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { FaGithub, FaLinkedin, FaStar, FaTwitter } from 'react-icons/fa';
+import { FaGithub,FaStar } from 'react-icons/fa';
 import favicon from "../image/footer/favicon.png";
+import { AiOutlineInstagram } from "react-icons/ai";
+import { FaXTwitter } from "react-icons/fa6";
+import { FaLinkedinIn } from "react-icons/fa";
+import { FaFacebookF } from "react-icons/fa";
+import { BsYoutube } from "react-icons/bs";
+import { Link } from "react-router-dom";
 import img from "../image/footer/footer-qr.jpg";
 import './Footer.css';
 
@@ -41,17 +47,49 @@ function Footer() {
             <li><span><a href="https://github.com/HimanshuNarware/CareerZunction_Intern?tab=coc-ov-file#readme">Code of Conduct</a></span></li>
           </ul>
           <h4 className="footer-heading">Get in touch</h4>
-          <div className="footer-social-icons">
-            <a href="https://github.com/HimanshuNarware" target="_blank" rel="noopener noreferrer">
-              <FaGithub />
-            </a>
-            <a href="https://www.linkedin.com/in/HimanshuNarware/" target="_blank" rel="noopener noreferrer">
-              <FaLinkedin />
-            </a>
-            <a href="https://twitter.com/N_Himanshu_" target="_blank" rel="noopener noreferrer">
-              <FaTwitter />
-            </a>
-          </div>
+
+          <div className='outerD  gap-4 md:gap-2'>
+        <span className='icons'>
+                <a
+                  href="/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                > <AiOutlineInstagram
+                color="white"
+                fontSize={25}
+                className="ico "
+              /></a></span>
+                <span  className='icons'><a
+                  href="/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FaXTwitter color="white" fontSize={25} className="ico" />
+
+                </a></span>
+                <span  className='icons'><a
+                  href="/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FaGithub  className="ico" />
+                </a></span>
+                <span  className='icons'> <a
+                  href="/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FaLinkedinIn className="ico " />
+                </a></span>
+                <span  className='icons'><a
+                  href="/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <FaFacebookF className="ico " />
+                </a></span> 
+        </div>
+
         </div>
         <div className="footer-section">
           <img src={img} id="qr" alt="QR Code" className="footer-qr" />

diff --git a/src/Component/Home.jsx b/src/Component/Home.jsx
@@ -75,6 +75,7 @@ function Home() {
 
           </div>
           <div className="wrapper-bx-2">
+          <div className='inside'>
             <div className="wrapper-bx-2-0 wrapper-bx-2-1 outline">
               <i className='icon' style={{ color: 'blueviolet' }}>
                 <GiWorld />
@@ -96,6 +97,9 @@ function Home() {
                 </p>
               </div>
             </div>
+            </div>
+
+            <div className='inside'>
             <div className="wrapper-bx-2-0 wrapper-bx-2-3 outline">
               <i className='icon' style={{ color: 'blueviolet' }}>
                 <FaPeopleGroup />
@@ -115,6 +119,8 @@ function Home() {
                 <p> CareerZunction is completely free to use..</p>
               </div>
             </div>
+
+            </div>
           </div>
         </div>
       </div>

diff --git a/src/Style/Home.css b/src/Style/Home.css
@@ -161,16 +161,20 @@
 }
 
 .page_1 .wrapper_p1 .wrapper-bx-2 {
-
+ padding: 20px;
   margin: 13px 8px;
-  display: grid;
-  gap: 10px;
-  padding: 38px 36px;
+  display: flex;
+  justify-content: center;
+  gap: 60px;
+  align-items: center;
+}
+.inside{
+  display: flex;
+  flex-direction: column;
 }
-
 .page_1 .wrapper_p1 .wrapper-bx-2-0 {
   margin: 16px 14px;
-  display: grid;
+
   padding: 8px 2px;
   /* padding: 8px; */
   transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Added transition */
@@ -278,7 +282,12 @@
     margin-inline: 25vw;
   }
 } /*# sourceMappingURL=Home.css.map */
-
+@media screen and (max-width: 700px) {
+  .page_1 .wrapper_p1 .wrapper-bx-2 {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
 /* Scroll bar css */
 /* Webkit (Safari/Chrome) */
 ::-webkit-scrollbar {
@@ -299,4 +308,4 @@
 }
 ::-moz-scrollbar-thumb {
   background:rgb(148, 22, 233);
-}
+}