diff --git a/Business Website/images/img1.png b/Business Website/images/img1.png new file mode 100644 index 0000000..a05e23f Binary files /dev/null and b/Business Website/images/img1.png differ diff --git a/Business Website/index.html b/Business Website/index.html new file mode 100644 index 0000000..78c9f4f --- /dev/null +++ b/Business Website/index.html @@ -0,0 +1,268 @@ + + + + + + Business Website + + + + + + + + + + + + + +
+ +
+ + + +
+
+
+
Warmest welcome! from
+
Our Team
+
+ Show more +
+
+
+ + +
+
+

About us

+
+
+ +
+
+
Our Team Members-
+

Your Describe

+
+
+
+
+ + +
+
+

Mentors

+
+
+
+









+
+
+
+
+




+
+
+
+
+




+
+
+
+
+ +
+ + +
+
+

Our experiences

+
+
+
Our hard work behind this..
+ See more +
+
+
+
+ 1st + 90% +
+
+
+
+
+ 2nd + 85% +
+
+
+
+
+ 3rd + 80% +
+
+
+
+
+ 4th + 60% +
+
+
+
+
+ 5th + 70% +
+
+
+
+
+
+
+ + +
+
+

Teams

+
+
+
+ +
Sapne Ya Apne
+
+
+
+
+ +
Chaar Din Ki Zindagi Hai...
+
+
+
+
+ +
Coming Soon!
+
+
+
+
+ +
Coming Soon!
+
+
+
+
+ +
Coming Soon!
+

+
+
+
+
+
+ + +
+
+

Contact Us

+ +
+
+
Get in Touch
+

To get in touch with us..Contact via us!

+
+
+ +
+
Name
+
Your Company name
+
+
+
+ +
+
Address
+
+
+
+
+ +
+
Connect via US
+
Follow US
+
+
+
+
+
+
Contact US
+
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/Business Website/script.js b/Business Website/script.js new file mode 100644 index 0000000..4371178 --- /dev/null +++ b/Business Website/script.js @@ -0,0 +1,73 @@ +$(document).ready(function(){ + $(window).scroll(function(){ + // sticky navbar on scroll script + if(this.scrollY > 20){ + $('.navbar').addClass("sticky"); + }else{ + $('.navbar').removeClass("sticky"); + } + + // scroll-up button show/hide script + if(this.scrollY > 500){ + $('.scroll-up-btn').addClass("show"); + }else{ + $('.scroll-up-btn').removeClass("show"); + } + }); + + // slide-up script + $('.scroll-up-btn').click(function(){ + $('html').animate({scrollTop: 0}); + // removing smooth scroll on slide-up button click + $('html').css("scrollBehavior", "auto"); + }); + + $('.navbar .menu li a').click(function(){ + // applying again smooth scroll on menu items click + $('html').css("scrollBehavior", "smooth"); + }); + + // toggle menu/navbar script + $('.menu-btn').click(function(){ + $('.navbar .menu').toggleClass("active"); + $('.menu-btn i').toggleClass("active"); + }); + + // typing text animation script + var typed = new Typed(".typing", { + strings: ["Your TEAM"], + typeSpeed: 100, + backSpeed: 80, + loop: true + }); + + var typed = new Typed(".typing-2", { + strings: ["Your TEAM"], + typeSpeed: 100, + backSpeed: 80, + loop: true + }); + + // owl carousel script + $('.carousel').owlCarousel({ + margin: 20, + loop: true, + autoplay: true, + autoplayTimeOut: 2000, + autoplayHoverPause: true, + responsive: { + 0:{ + items: 1, + nav: false + }, + 600:{ + items: 2, + nav: false + }, + 1000:{ + items: 3, + nav: false + } + } + }); +}); diff --git a/Business Website/style.css b/Business Website/style.css new file mode 100644 index 0000000..57fb4f1 --- /dev/null +++ b/Business Website/style.css @@ -0,0 +1,806 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Titan+One&display=swap"); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + text-decoration: none; +} +html{ + scroll-behavior: smooth; +} +body{ + background: #111; + color: floralwhite; +} +/* custom scroll bar */ +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: #f1f1f1; +} +::-webkit-scrollbar-thumb { + background: #888; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +/* all similar content styling codes */ +section{ + padding: 100px 0; +} +.max-width{ + max-width: 1300px; + padding: 0 80px; + margin: auto; +} +.about, .services, .skills, .teams, .contact, footer{ + font-family: 'Poppins', sans-serif; +} +.about .about-content, +.services .serv-content, +.skills .skills-content, +.contact .contact-content{ + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +section .title{ + position: relative; + text-align: center; + font-size: 40px; + font-weight: 500; + margin-bottom: 60px; + padding-bottom: 20px; + font-family: 'Ubuntu', sans-serif; +} +section .title::before{ + content: ""; + position: absolute; + bottom: 0px; + left: 50%; + width: 180px; + height: 3px; + background: #ffffff; + transform: translateX(-50%); +} +section .title::after{ + position: absolute; + bottom: -8px; + left: 50%; + font-size: 20px; + color:#999387; + padding: 0 5px; + background: #111; + transform: translateX(-50%); +} + +/* navbar styling */ +.navbar{ + position: fixed; + width: 100%; + z-index: 999; + padding: 30px 0; + font-family: 'Ubuntu', sans-serif; + transition: all 0.3s ease; +} +.navbar.sticky{ + padding: 15px 0; + background:#c0b29f; +} +.navbar .max-width{ + display: flex; + align-items: center; + justify-content: space-between; +} +.navbar .logo:hover{ + transform: scale(1.3); +} +.navbar .logo a{ + color: #000000; + -webkit-text-stroke: 1px #000000; + text-transform: uppercase; + font-size: 35px; + font-weight: 600; +} +.navbar .logo a span{ + color: red; + -webkit-text-stroke: 1px #000000; + transition: all 0.3s ease; +} +.navbar .logo a span span{ + color: #000000; +} +.navbar .logo a span span span{ + color:whitesmoke; +} +.navbar.sticky .logo a span{ + color: rgb(0, 0, 0); +} +.navbar .menu li{ + list-style: none; + display: inline-block; +} +.navbar .menu li a{ + display: block; + color: #000000; + font-size: 18px; + font-weight: 500; + margin-left: 25px; + transition: color 0.3s ease; +} +.navbar .menu li a:hover{ + color:#000000; + font-weight: 800; + transform: scale(1.3); +} +.navbar.sticky .menu li a:hover{ + color: rgb(0, 0, 0); +} + +/* menu btn styling */ +.menu-btn{ + color: rgb(0, 0, 0); + font-size: 23px; + cursor: pointer; + display: none; +} +.scroll-up-btn{ + position: fixed; + height: 45px; + width: 42px; + background: #ffffff; + right: 30px; + bottom: 10px; + text-align: center; + line-height: 45px; + color: rgb(0, 0, 0); + z-index: 9999; + font-size: 30px; + border-radius: 6px; + border-bottom-width: 2px; + cursor: pointer; + opacity: 0; + pointer-events: none; + transition: all 0.3s ease; +} +.scroll-up-btn.show{ + bottom: 30px; + opacity: 1; + pointer-events: auto; +} +.scroll-up-btn:hover{ + filter: brightness(90%); +} + + +/* home section styling */ +.home{ + display: flex; + background: url("") no-repeat center; + height: 100vh; + color: #aa9976; + -webkit-text-stroke:1px black; + min-height: 500px; + background-size: cover; + background-attachment: fixed; + font-family: 'Ubuntu', sans-serif; +} +.home .max-width{ + width: 100%; + display: flex; +} +.home .max-width .row{ + margin-right: 0; +} +.home .home-content .text-1{ + font-size: 27px; +} +.home .home-content .text-2{ + font-size: 75px; + font-weight: 600; + margin-left: -3px; +} +.home .home-content .text-3{ + font-size: 40px; + margin: 5px 0; +} +.home .home-content .text-3 span{ + color:#999387; + font-weight: 500; +} +.home .home-content a{ + display: inline-block; + background:#2d201c; + color: #fff; + font-size: 25px; + padding: 12px 16px; + margin-top: 20px; + font-weight: 400; + border-radius: 10px; + border: 2px solid #999387; + transition: all 0.3s ease; +} +.home .home-content a:hover{ + color:#aa8946; + background: none; + font-weight: 800; +} + +/* about section styling */ +.about .title::after{ + content: "who we are"; +} +.about .about-content .left{ + width: 45%; +} +.about .about-content .left img{ + height: 450px; + width: 450px; + object-fit: contain; + border-radius: 6px; +} +.about .about-content .right{ + width: 55%; +} +.about .about-content .right .text{ + font-size: 25px; + font-weight: 600; + margin-bottom: 10px; +} +.about .about-content .right .text span{ + color:#999387; +} +.about .about-content .right p{ + text-align: justify; +} +.about .about-content .right a{ + display: inline-block; + background:#999387; + color: #fff; + font-size: 20px; + font-weight: 500; + padding: 10px 30px; + margin-top: 20px; + border-radius: 6px; + border: 2px solid #999387; + transition: all 0.3s ease; +} +.about .about-content .right a:hover{ + color:#999387; + background: none; +} + +/* services section styling */ +.services, .teams{ + color:#ffffff; + background: #111; + text-decoration: black; + +} +a, a:hover, a:focus, a:active { + text-decoration: none; + color: inherit; + } +.services .title::before, +.teams .title::before{ + background: #fff; +} +.services .title::after, +.teams .title::after{ + background: #111; + content: "other things"; +} +.services .serv-content .card{ + width: calc(33% - 20px); + background-image: url(images/TBF\ 2nd.png); + background-size: cover; + text-align: center; + border-radius: 6px; + padding: 50px 25px; + cursor: pointer; + transition: all 0.3s ease; + + +} +.services .serv-content .card:hover{ + background-image: url(images/img1.png); + transform: scale(1.05); + background-size: cover; + background-position: center; +} +.services .serv-content .card .box{ + transition: all 0.3s ease; +} +.services .serv-content .card:hover .box{ + transform: scale(1.2); +} +.services .serv-content .card i{ + font-size: 50px; + color:#999387; + transition: color 0.3s ease; +} +.services .serv-content .card:hover i{ + color: #fff; +} +.services .serv-content .card .text{ + font-size: 25px; + font-weight: 500; + margin: 10px 0 7px 0; +} +.services .serv-content .card1{ + width: calc(33% - 20px); + background-image: url(images/img1.png); + background-size: cover; + text-align: center; + border-radius: 6px; + padding: 50px 25px; + cursor: pointer; + transition: all 0.3s ease; + background-position: center; + +} +.services .serv-content .card1:hover{ + background-image: url(images/img1.png); + transform: scale(1.05); + background-position: center; + +} +.services .serv-content .card1 .box{ + transition: all 0.3s ease; +} +.services .serv-content .card1:hover .box{ + transform: scale(1.2); +} +.services .serv-content .card1 i{ + font-size: 50px; + color:#999387; + transition: color 0.3s ease; +} +.services .serv-content .card1:hover i{ + color: #fff; +} +.services .serv-content .card1 .text{ + font-size: 25px; + font-weight: 500; + margin: 10px 0 7px 0; +} +.services .serv-content .card2{ + width: calc(33% - 20px); + background-image: url(images/img1.png); + background-size: cover; + text-align: center; + border-radius: 6px; + padding: 50px 25px; + cursor: pointer; + transition: all 0.3s ease; + background-position: center; + +} +.services .serv-content .card2:hover{ + background-image: url(images/img1.png); + transform: scale(1.05); + background-position: center; + + +} +.services .serv-content .card2 .box{ + transition: all 0.3s ease; +} +.services .serv-content .card2:hover .box{ + transform: scale(1.2); +} +.services .serv-content .card2 i{ + font-size: 50px; + color:#999387; + transition: color 0.3s ease; +} +.services .serv-content .card2:hover i{ + color: #fff; +} +.services .serv-content .card2 .text{ + font-size: 25px; + font-weight: 500; + margin: 10px 0 7px 0; +} +/* skills section styling */ + +.skills .title::after{ + content: "Our Approches"; +} +.skills .skills-content .column{ + width: calc(50% - 30px); +} +.skills .skills-content .left .text{ + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; +} +.skills .skills-content .left p{ + text-align: justify; +} +.skills .skills-content .left a{ + display: inline-block; + background:#999387; + color: #fff; + font-size: 18px; + font-weight: 500; + padding: 8px 16px; + margin-top: 20px; + border-radius: 6px; + border: 2px solid #999387; + transition: all 0.3s ease; +} +.skills .skills-content .left a:hover{ + color:#999387; + background: none; +} +.skills .skills-content .right .bars{ + margin-bottom: 15px; +} +.skills .skills-content .right .info{ + display: flex; + margin-bottom: 5px; + align-items: center; + justify-content: space-between; +} +.skills .skills-content .right span{ + font-weight: 500; + font-size: 18px; +} +.skills .skills-content .right .line{ + height: 5px; + width: 100%; + background: rgb(247, 246, 246); + position: relative; +} +.skills .skills-content .right .line::before{ + content: ""; + position: absolute; + height: 100%; + left: 0; + top: 0; + background:#e2c97b; +} +.skills-content .right .html::before{ + width: 90%; +} +.skills-content .right .css::before{ + width: 85%; +} +.skills-content .right .js::before{ + width: 80%; +} +.skills-content .right .c::before{ + width: 60%; +} +.skills-content .right .mysql::before{ + width: 70%; +} + +/* teams section styling */ +.teams .title::after{ + content: "what we do"; +} +.teams .carousel .card{ + background-image: url(images/back1.gif); + background-size: cover; + background-repeat: no-repeat; + border-radius: 10px; + padding: 25px 35px; + text-align: center; + transition: all 0.3s ease; +} +.teams .carousel .card:hover{ + background-image: url(images/back1.gif); +} +.teams .carousel .card .box{ + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} +.teams .carousel .card:hover .box{ + transform: scale(1.2); +} +.teams .carousel .card .text{ + font-size: 25px; + font-weight: 500; + margin: 10px 0 7px 0; +} +.teams .carousel .card img{ + height: 250px; + width: 250px; + object-fit: fill; + transition: all 0.3s ease; + border-radius: 20px; +} +.teams .carousel .card:hover img{ + border-color: rgb(0, 0, 0); +} +.owl-dots{ + text-align: center; + margin-top: 20px; +} +.owl-dot{ + height: 13px; + width: 13px; + margin: 0 5px; + outline: none!important; + border-radius: 50%; + border: 2px solid #ffffff!important; + transition: all 0.3s ease; +} +.owl-dot.active{ + width: 35px; + border-radius: 14px; +} +.owl-dot.active, +.owl-dot:hover{ + background:#999387!important; +} + +/* contact section styling */ +.contact .title::after{ + content: "get in touch"; +} +.contact .contact-content .column{ + width: calc(50% - 30px); +} +.contact .contact-content .text{ + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; +} +.contact .contact-content .left p{ + text-align: justify; +} +.contact .contact-content .left .icons{ + margin: 10px 0; +} +.contact .contact-content .row{ + display: flex; + height: 65px; + align-items: center; +} +.contact .contact-content .row .info{ + margin-left: 30px; +} +.contact .contact-content .row i{ + font-size: 25px; + color:#999387; +} +.contact .contact-content .info .head{ + font-weight: 500; +} +.contact .contact-content .info .sub-title{ + color: rgb(114, 109, 109); +} +.contact .right form .fields{ + display: flex; +} +.contact .right form .field, +.contact .right form .fields .field{ + height: 45px; + width: 100%; + margin-bottom: 15px; +} +.contact .right form .textarea{ + height: 80px; + width: 100%; +} +.contact .right form .name{ + margin-right: 10px; +} +.contact .right form .field input, +.contact .right form .textarea textarea{ + height: 100%; + width: 100%; + border: 1px solid #999387; + border-radius: 6px; + outline: none; + padding: 0 15px; + font-size: 17px; + font-family: 'Poppins', sans-serif; + transition: all 0.3s ease; +} +.contact .right form .field input:focus, +.contact .right form .textarea textarea:focus{ + border-color: #b3b3b3; +} +.contact .right form .textarea textarea{ + padding-top: 10px; + resize: none; +} +.contact .right form .button-area{ + display: flex; + align-items: center; +} +.right form .button-area button{ + color: #fff; + display: block; + width: 160px!important; + height: 45px; + outline: none; + font-size: 18px; + font-weight: 500; + border-radius: 6px; + cursor: pointer; + flex-wrap: nowrap; + background:#999387; + border: 2px solid #999387; + transition: all 0.3s ease; +} +.right form .button-area button:hover{ + color:#999387; + background: none; +} +/* footer section styling */ +footer{ + background:#aa9977; + padding: 15px 23px; + color: rgb(0, 0, 0); + text-align: center; +} +footer span a{ + color:#aa9d86; + text-decoration: none; +} +footer span a:hover{ + text-decoration: underline; +} + + +/* responsive media query start */ +@media (max-width: 1104px) { + .about .about-content .left img{ + height: 350px; + width: 350px; + } +} + +@media (max-width: 991px) { + .max-width{ + padding: 0 50px; + } +} +@media (max-width: 947px){ + .menu-btn{ + display: block; + z-index: 999; + } + .menu-btn i.active:before{ + content: "\f00d"; + } + .navbar .menu{ + position: fixed; + height: 100vh; + width: 100%; + left: -100%; + top: 0; + background: #111; + text-align: center; + padding-top: 80px; + transition: all 0.3s ease; + } + .navbar .menu.active{ + left: 0; + } + .navbar .menu li{ + display: block; + } + .navbar .menu li a{ + display: inline-block; + margin: 20px 0; + font-size: 25px; + } + .home .home-content .text-2{ + font-size: 70px; + } + .home .home-content .text-3{ + font-size: 35px; + } + .home .home-content a{ + font-size: 23px; + padding: 10px 30px; + } + .max-width{ + max-width: 930px; + } + .about .about-content .column{ + width: 100%; + } + .about .about-content .left{ + display: flex; + justify-content: center; + margin: 0 auto 60px; + } + .about .about-content .right{ + flex: 100%; + } + .services .serv-content .card{ + width: calc(50% - 10px); + margin-bottom: 20px; + } + .skills .skills-content .column, + .contact .contact-content .column{ + width: 100%; + margin-bottom: 35px; + } +} + +@media (max-width: 690px) { + .max-width{ + padding: 0 23px; + } + .home .home-content .text-2{ + font-size: 60px; + } + .home .home-content .text-3{ + font-size: 32px; + } + .home .home-content a{ + font-size: 20px; + } + .services .serv-content .card{ + width: 100%; + } +} + +@media (max-width: 500px) { + .home .home-content .text-2{ + font-size: 50px; + } + .home .home-content .text-3{ + font-size: 27px; + } + .about .about-content .right .text, + .skills .skills-content .left .text{ + font-size: 19px; + } + .contact .right form .fields{ + flex-direction: column; + } + .contact .right form .name, + .contact .right form .email{ + margin: 0; + } + .right form .error-box{ + width: 150px; + } + .scroll-up-btn{ + right: 15px; + bottom: 15px; + height: 38px; + width: 35px; + font-size: 23px; + line-height: 38px; + } +} +.cursor { + position: fixed; + border-radius: 50%; + transform: translateX(-50%) translateY(-50%); + pointer-events: none; + left: -100px; + top: 50%; + visibility: visible; + mix-blend-mode: difference; + background-color: #0a0a0a; + border: 3px solid #999387; + opacity: 0.6; + height: 30px; + width: 30px; + transition: all 300ms ease-out; + } + .coming{ + justify-content: center; + justify-content: center; + } + \ No newline at end of file