diff --git a/Pages/Contact-Us/index.html b/Pages/Contact-Us/index.html new file mode 100644 index 000000000..37646a69c --- /dev/null +++ b/Pages/Contact-Us/index.html @@ -0,0 +1,154 @@ + + + + + + + Contact Us + + + + + + + + + + +
+ +
+ + + + + +
+
+
+

Contact Information

+

+ Fill up the form and our Team will get back to you within 24 hours +

+ + +
+
+
+

Send us a message :)

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/Pages/Contact-Us/media-query.css b/Pages/Contact-Us/media-query.css new file mode 100644 index 000000000..bb86c74b1 --- /dev/null +++ b/Pages/Contact-Us/media-query.css @@ -0,0 +1,94 @@ +@media screen and (max-width: 1030px) { + + h3 { + font-size: 1.2rem; + } + + .main-nav { + overflow: initial; + } + + .hamburger{ + display: block; + } + + .hamburger.active .bar:nth-child(2){ + opacity: 0; + } + .hamburger.active .bar:nth-child(1){ + transform: translateY(8px) rotate(45deg); + } + .hamburger.active .bar:nth-child(3){ + transform: translateY(-8px) rotate(-45deg); + } + + .nav-menu{ + position: absolute; + top: -1000px; + left: 0; + gap: 0; + flex-direction: column; + width: 100%; + text-align: center; + transition: 0.3s; + z-index: 1; + /* background-color: aqua; */ + /* max-height: 10vh; */ + margin-top: 50px; + padding: 0; + + background: rgba(236, 235, 255, 0.2); + /* border-radius: 16px; */ + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + backdrop-filter: blur(3.3px); + -webkit-backdrop-filter: blur(3.3px); + border: 1px solid rgba(236, 235, 255, 0.3); + + } + .hover-link{ + margin: 16px 0; + } + .nav-menu.active{ + top: 13%; + } + + .company-logo{ + min-width: 200px; + } +} + +@media only screen and (max-width: 767px) { + .box-wrapper { + width: 100%; + } + + .info-wrap, + .form-wrap { + width: 100%; + height: inherit; + float: none; + } + + .info-wrap { + border-radius: 30px 30px 0px 0px; + } + + .form-wrap { + border-radius: 0px 0px 30px 30px; + } + + .form-group { + width: 100%; + float: none; + margin: 25px 0px; + } + + .form-fields .form-group:last-child, + .submit-button { + width: 100%; + } + + .submit-button { + margin: 10px 0px; + } + } \ No newline at end of file diff --git a/Pages/Contact-Us/styles.css b/Pages/Contact-Us/styles.css new file mode 100644 index 000000000..1294ec0df --- /dev/null +++ b/Pages/Contact-Us/styles.css @@ -0,0 +1,485 @@ + + @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap"); + + :root { + --primary-text-color: #183b56; + --secondary-text-color: #577592; + --accent-color: #2294ed; + --accent-color-dark: #1d69a3; + --padding-inline-section: 20px; + } + + +* { + font-family: "Nunito", sans-serif; + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; + outline: none; + border: none; + transition: all 0.2s linear; +} +#section-wrapper { + width: 100%; + padding: 10px; +} + +a { + text-decoration: none; + display: inline-block; + color: #221818; +} + +ul { + list-style: none; +} + + +/* nav bar */ + +.main-nav { + margin-top: 20px; + justify-content: space-between; + margin-left: 20%; + margin-right: 20%; +} + + +.nav-links { + flex-basis: 730px; +} + +.nav-menu{ + display: flex; + align-items: center; +} + +.nav-links ul { + justify-content: space-between; +} + +.nav-toggle { + display: none; +} + +.hamburger{ + display: none; + cursor: pointer; +} + +.bar{ + display: block; + width: 25px; + height: 3px; + margin: 5px auto; + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + background-color: black; +} +/* social media section */ + +*, +*::before, +*::after { + box-sizing: border-box; +} +.mf-social-side-list { + position: fixed; + top: 30vh; + left: 10px; + z-index: 100; +} +.mf-social-side-list ul { + list-style: none; + display: flex; + flex-direction: column; + padding: 0; + margin: 0; +} +.mf-social-side-list ul li a { + color: #ffffff; + border-radius: 50%; + width: 35px; + height: 35px; + line-height: 35px; + margin-top: 5px; + text-align: center; + text-decoration: none; + display: inline-block; + -webkit-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.mf-social-side-list ul li a:hover { + opacity: 0.9; + -webkit-transform: translateY(-3px); + transform: translateY(-3px); +} +.mf-social-side-list ul li a[href*="facebook"] { + background: #3b5998; +} +.mf-social-side-list ul li a[href*="instagram"] { + background: radial-gradient( + circle at 30% 107%, + #fdf497 0%, + #fdf497 5%, + #fd5949 45%, + #d6249f 60%, + #285aeb 90% + ); +} +.mf-social-side-list ul li a[href*="youtube"] { + background: #c4302b; +} +.mf-social-side-list ul li a[href*="linkedin"] { + background: #0077b5; +} +.mf-social-side-list ul li a[href*="twitter"] { + background: #00acee; +} + + + + + + + +.box-wrapper { + position: relative; + display: table; + width: 75vw; + height: 87vh; + margin: auto; + margin-top: 35px; + border-radius: 30px; + /* filter: drop-shadow(-5px -5px 5px rgb(0, 0, 0,0.4)); */ + filter: drop-shadow(0px 0px 10px rgb(0, 0, 0,0.4)); +} + +.box-wrapper:hover{ + transition: 0.25s ; + filter: drop-shadow(0px 0px 10px rgb(0, 0, 0,0.7)); + +} + +.info-wrap { + width: 35%; + height: 85vh; + padding: 40px; + float: left; + display: block; + border-radius: 30px 0px 0px 30px; + background: linear-gradient(144deg, + rgba(126, 39, 156, 0.9) 0%, + rgba(49, 39, 157, 0.9) 49%); + color: #fff; +} + +.info-title { + text-align: left; + font-size: 28px; + letter-spacing: 0.5px; + text-shadow: 1px 2px 2px black; +} + +.info-sub-title { + font-size: 18px; + font-weight: 300; + margin-top: 17px; + letter-spacing: 0.5px; + line-height: 26px; + text-shadow: 1px 1px 2px black; +} + +.info-details { + list-style: none; + margin: 60px 0px; +} + +.info-details li { + margin-top: 25px; + font-size: 18px; + color: #fff; + text-shadow: 1px 1px 2px rgb(228, 16, 16); +} + +.info-details li i { + background: #ffbf00; + padding: 9px; + border-radius: 50%; + font-size: 14px; + margin-right: 5px; + text-shadow: 1px 2px 2px black; + box-shadow: 1px 1px 2px black; +} + +.info-details li a { + color: #fff; + font-size: 16px; + text-decoration: none; +} + +.info-details li a:hover { + color: #78f447; +} + +.social-icons { + list-style: none; + text-align: center; + margin: 20px 0px; +} + +.social-icons li { + display: inline-block; +} + +.social-icons li i { + background: #49025f; + color: #fff; + padding: 15px; + font-size: 20px; + border-radius: 22%; + margin: 0px 5px; + cursor: pointer; + transition: all 0.5s; + text-shadow: 1px 2px 2px black; + box-shadow: 1px 1px 2px black; +} + +.social-icons li i:hover { + background: #fff; + color: #000000; +} + +.form-wrap { + width: 65%; + height: 85vh; + float: right; + padding: 40px 25px 35px 25px; + border-radius: 0px 30px 30px 0px; + background: #ecf0f3; +} + +.form-title { + font-family: Georgia, 'Times New Roman', Times, serif !important; + text-align: center; + margin-left: 23px; + font-size: 30px; + letter-spacing: 0.5px; + text-shadow: 1px 1px 2px black, 1px 1px 2px white; +} + +.form-fields { + display: table; + width: 100%; + padding: 15px 5px 5px 5px; +} + +.form-fields input, +.form-fields textarea { + border: none; + outline: none; + background: none; + font-size: 18px; + color: #555; + padding: 20px 10px 20px 5px; + width: 100%; +} + +.form-fields textarea { + height: 150px; + resize: none; +} + +.form-group { + width: 46%; + float: left; + padding: 0px 30px; + margin: 14px 12px; + border-radius: 25px; + box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #ffffff; +} + +.form-fields .form-group:last-child { + width: 96%; +} + +.submit-button { + width: 96%; + height: 9vh; + margin: 20px 12px; + border-radius: 30px; + font-size: 20px; + font-weight: 500; + text-shadow: 1px 2px 2px black; + outline: none; + border: none; + cursor: pointer; + color: #fff; + text-align: center; + background: #49025f; + box-shadow: 2px 3px 8px #7d7a7a, -3px -3px 8px white; + transition: transform 0.5s; +} + +.submit-button:hover { + background: #31279d; + transform: scale(0.98); +} + + +/* footer */ + +.footer { + /* bottom: 0; + left: 0; + right: 0; + background: #111; + */ + + height: auto; + + padding-top: 20px; + background-color: #ebf2fa; + } + + .footer-content { + display: flex; + justify-content:space-around; + align-items:center ; + flex-direction: row; + + } + + .app-logo{ + margin-left: 50px; + padding-left: 50px; + width: 300px; + } + + .app-info{ + margin-right: 10px; + padding-left: 100px; + width: 1000px; + + } + .footer-logo img{ + height: 61px; + width: 270px; + border-left: 6px solid #2d4bf0; + padding-left: 10px; + padding-right: 15px; + border-right: 6px solid #2d4bf0; + } + .app-info p{ + padding-bottom: 30px; + color: ffffff; + padding-left: 20px; + + } + + .useful-links{ + margin: 60px; + width: 500px; + text-decoration:underline; + padding-right: 30px; + } + + .useful-links ul{ + display: grid; + grid-template-columns: repeat(2, 1fr); + padding-left: 10px; + } + .links-title{ + font-size: 1.40rem; + + line-height: 1.30rem; + color: rgb(33, 28, 28); + height: fit-content; + padding-bottom: 20px; + } + .links-title-span{ + padding-left: 10px; + border-left: 6px solid #2d4bf0; + padding-right: 10px; + border-right: 6px solid #2d4bf0; + + } + .useful-links ul li { + font-size: 18px; + padding: 3px; + color: ffffff; + } + + .useful-links ul li a:hover{ + color: #111; + transition: 0.5s; + transform: scale(1.1); + } + + .footer-logo { + font-size: 2.1rem; + font-weight: 500; + text-transform: capitalize; + line-height: 3rem; + } + .copyright{ + background-color: #d6d9fd; + padding: 18px; + text-align: center; + } + .copyright h3{ + font-size: 20px; + color: rgb(33, 28, 28); + } + .copyright h3 a{ + + color: rgb(34, 91, 184); + } + .copyright h3 a:hover{ + + transition: 0.5s; + transform: scale(1.1); + } + .popup { + transition: all 300ms ease-out; + } + .popup-basic:hover { + box-shadow: 8px 18px 25px #dc5555; + } + + .popup-premium:hover { + box-shadow: 8px 18px 25px #5f4b8bff; + } + .popup-ultimate:hover { + box-shadow: 8px 18px 25px #f5b55a; + } + + #myBtn { + position: fixed; + bottom: 20px; + right: 10px; + height: 60px; + width: 60px; + display: none; + place-items: center; + border-radius: 50%; + transition: opacity 0.3s, background-color 0.3s; + box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.3), + inset -4px -4px 6px 0 rgba(255, 255, 255, .2), + inset 4px 4px 6px 0 rgba(97, 96, 96, 0.2); + cursor: pointer; + z-index: 1; + } + + #myBtn:hover{ + opacity: 1; + background-color: #91f0c0; + animation: animate 1s linear infinite; + } + @keyframes animate{ + 50%{ + transform: translateY(3px); + } + } \ No newline at end of file diff --git a/index.html b/index.html index c8aecc061..44e769b96 100644 --- a/index.html +++ b/index.html @@ -496,6 +496,19 @@

CareerLaunch
Accelerator

+