-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 11.8 KB
/
index.html
1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Company</title> <script src="https://kit.fontawesome.com/57a9a727c8.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"/> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/> <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"/></head><body> <div class="bgScreen"> <div class="loader"></div></div><div class="topBtn"> <a href="#"><i class="fas fa-arrow-up fa-2x"></i></a> </div><div class="head" data-aos="zoom-in"> <div class="headComp logo">Pentone</div><div class="headComp nav"> <ul class="navBar"> <li class="navComp1"><a href=""> home</a></li><li class="navComp2"><a href="#about"> about</a></li><li class="navComp7"><a href="#support"> support</a></li><li class="navComp3"><a href="#servicesId"> services</a></li><li class="navComp5"><a href="#team"> team</a></li><li class="navComp7"><a href="#contact"> contact</a></li></ul> </div><div class="headComp startBtn"> <button class="start">Get Start</button> <div class="navBarRespButton"> <i class="fas fa-bars fa-2x" onclick="respNavBar()"></i> <i class="fas fa-times fa-2x" onclick="respNavBar()"></i> </div></div></div></div><div class="headSec"> <div class="text" class="headSec" data-aos="fade-up"> <h2>PowerFul Digital Hardware with Us</h2> <p>We are the hub of Digital Hardwares</p></div><div class="headCards" class="headSec" data-aos="fade-up"> <div class="headCard"> <i class="fa fa-store fa-small fa-2x"></i> <p>Lorem ipsum</p></div><div class="headCard"> <i class="fas fa-chart-bar fa-2x"></i> <p>Dolare Ipsum</p></div><div class="headCard"> <i class="far fa-calendar-check fa-2x"></i> <p>Life Imusp</p></div><div class="headCard"> <i class="fas fa-paint-roller fa-2x"></i> <p>Magni Dolar</p></div><div class="headCard"> <i class="fas fa-database fa-2x"></i> <p>nemo Chita</p></div></div></div><div class="spans" id="about"> <span class="sec1" data-aos="fade-right"> <h3> Voluptatem dignissimos provident quasi corporis voluptates sit assumenda. </h3> <p class="text1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p><ul class="textWithTicks"> <li>Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li><li>Duis aute irure dolor in reprehenderit in voluptate velit.</li><li> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur. </li></ul> <p class="text2"> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident </p></span> <span class="sec2" data-aos="fade-left"><img src="./Images/about.jpg" alt="men sitting in office"/></span> </div><div class="swiper-container" data-aos="zoom-in"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="./SliderLogo/client-1.png" alt=""/> </div><div class="swiper-slide"> <img src="./SliderLogo/client-2.png" alt=""/> </div><div class="swiper-slide"> <img src="./SliderLogo/client-3.png" alt=""/> </div><div class="swiper-slide"> <img src="./SliderLogo/client-4.png" alt=""/> </div><div class="swiper-slide"> <img src="./SliderLogo/client-5.png" alt=""/> </div><div class="swiper-slide"> <img src="./SliderLogo/client-6.png" alt=""/> </div><div class="swiper-slide"> <img src="./SliderLogo/client-7.png" alt=""/> </div><div class="swiper-slide"> <img src="./SliderLogo/client-8.png" alt=""/> </div></div><div class="swiper-pagination"></div></div><div class="spans2"> <span class="sec2of2" data-aos="fade-right"> <img src="./Images/features.jpg" alt="man using laptop"/> </span> <span class="sec1of2" data-aos="fade-left"> <div class="secText"> <span class="icon"><i class="far fa-address-book fa-3x"></i></span> <span class="content"> <h4>Est labore ad</h4> <p> Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip </p></span> </div><div class="secText"> <span class="icon"><i class="fas fa-cube fa-3x"></i></span> <span class="content"> <h4>Harum esse qui</h4> <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt </p></span> </div><div class="secText"> <span class="icon"><i class="far fa-images fa-3x"></i></span> <span class="content"> <h4>Aut occaecati</h4> <p> Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere </p></span> </div><div class="secText"> <span class="icon"><i class="fas fa-shield-alt fa-3x"></i></span> <span class="content"> <h4>Beatae veritatis</h4> <p> Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta </p></span> </div></span> </div><div class="services" id="servicesId"> <h2>check our services</h2> <div class="serviceCards" data-aos="zoom-in"> <div class="serviceCard"> <div class="cardCon"> <i class="fas fa-baseball-ball fa-2x"></i> <h4>lorem Ipsum</h4> <p> Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi </p></div></div><div class="serviceCard"> <div class="cardCon"> <i class="fas fa-stream fa-2x"></i> <h4>lSed ut perspiciatis</h4> <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore </p></div></div><div class="serviceCard"> <div class="cardCon"> <i class="fas fa-tachometer-alt fa-2x"></i> <h4>Magni Dolores</h4> <p> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia </p></div></div><div class="serviceCard"> <div class="cardCon"> <i class="fas fa-globe-europe fa-2x"></i> <h4>Nemo Enim</h4> <p> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis </p></div></div><div class="serviceCard"> <div class="cardCon"> <i class="fab fa-google-drive fa-2x"></i> <h4>Kalie Monal</h4> <p> Modi nostrum vel laborum. Porro fugit error sit minus sapiente sit aspernatur </p></div></div><div class="serviceCard"> <div class="cardCon"> <i class="far fa-file-video fa-2x"></i> <h4>Dele cardo</h4> <p> Quis consequatur saepe eligendi voluptatem consequatur dolor consequuntur </p></div></div></div></div><div class="callToAction"> <h3 data-aos="zoom-in">call to action</h3> <p data-aos="zoom-in"> lorem ipsumDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p><button data-aos="zoom-in">Call to action</button> </div><div class="ourFeature" data-aos="zoom-in"> <span class="sec1of3"> <img src="./Images/counts-img.jpg" alt="man directing employ"/> </span> <span class="sec2of3"> <h4>Voluptatem dignissimos provident quasi</h4> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit </p><div class="featureCards"> <div class="featureCard"> <i class="far fa-smile fa-2x"></i> <div class="facts"> <h3 id="sixtyFive"></h3> <p> Happy Clients consequuntur voluptas nostrum aliquid ipsam architecto ut. </p></div></div><div class="featureCard"> <i class="fas fa-file-medical-alt fa-2x"></i> <div class="facts"> <h3 id="ninetyOne"></h3> <p> Projects adipisci atque cum quia aspernatur totam laudantium et quia dere tan ut. </p></div></div><div class="featureCard"> <i class="fas fa-medal fa-2x"></i> <div class="facts"> <h3 id="twenty"></h3> <p> Years of experience aut commodi quaerat modi aliquam nam ducimus aut voluptate non vel . </p></div></div><div class="featureCard"> <i class="far fa-clock fa-2x"></i> <div class="facts"> <h3 id="eigthyFive"></h3> <p> Awards rerum asperiores dolor alias quo reprehenderit eum et nemo pad der . </p></div></div></div></span> </div><div class="team" id="team"> <h2>Meet Our Team</h2> <div class="teamMember"> <div class="memberCard"> <div class="mediaAndPic"> <div class="memberImage"> <img src="./Images/team-1.jpg" alt="teamMember" class="member"> </div><div class="socialmedia"> <div class="iconSocial"><i class="fab fa-facebook-f fa-2x"></i></div><div class="iconSocial"><i class="fab fa-instagram fa-2x"></i></div><div class="iconSocial"><i class="fab fa-twitter fa-2x"></i></div><div class="iconSocial"><i class="fab fa-linkedin-in fa-2x"></i></div></div></div><div class="memberDetail"> <p class="memberName">Walter White</p><p class="memberDestination">Chief Excutive Officer</p></div></div><div class="memberCard"> <div class="memberImage"> <img src="./Images/team-2.jpg" alt="teamMember" class="member"> </div><div class="socialmedia"> <div class="iconSocial"><i class="fab fa-facebook-f fa-2x"></i></div><div class="iconSocial"><i class="fab fa-instagram fa-2x"></i></div><div class="iconSocial"><i class="fab fa-twitter fa-2x"></i></div><div class="iconSocial"><i class="fab fa-linkedin-in fa-2x"></i></div></div><div class="memberDetail"> <p class="memberName">Sarah Jhonson</p><p class="memberDestination">Product Manager</p></div></div><div class="memberCard"> <div class="memberImage"> <img src="./Images/team-3.jpg" alt="teamMember" class="member"> </div><div class="socialmedia"> <div class="iconSocial"><i class="fab fa-facebook-f fa-2x"></i></div><div class="iconSocial"><i class="fab fa-instagram fa-2x"></i></div><div class="iconSocial"><i class="fab fa-twitter fa-2x"></i></div><div class="iconSocial"><i class="fab fa-linkedin-in fa-2x"></i></div></div><div class="memberDetail"> <p class="memberName">William Anderson </p><p class="memberDestination">CCTO</p></div></div><div class="memberCard"> <div class="memberImage"> <img src="./Images/team-4.jpg" alt="teamMember" class="member"> </div><div class="socialmedia"> <div class="iconSocial"><i class="fab fa-facebook-f fa-2x"></i></div><div class="iconSocial"><i class="fab fa-instagram fa-2x"></i></div><div class="iconSocial"><i class="fab fa-twitter fa-2x"></i></div><div class="iconSocial"><i class="fab fa-linkedin-in fa-2x"></i></div></div><div class="memberDetail"> <p class="memberName">Amanda Jepson </p><p class="memberDestination">Accountant</p></div></div></div></div></div><div class="contact" id="contact"> <h2>Contact Us</h2> <div class="map"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3524.810274725495!2d67.05825124952199!3d24.872643023733577!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3eb33e923adec49d%3A0xcc2dbd936f1c5627!2sTariq%20Rd%2C%20Karachi%2C%20Karachi%20City%2C%20Sindh%2C%20Pakistan!5e0!3m2!1sen!2s!4v1627500973552!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe></div><div class="form"> <div class="detail"> <div class="detailCon"> <i class="fas fa-map-marker-alt "></i> <div class="detailText"> <p class="heading">Location:</p><p>A108 Adam Street, Tariq Road, Na 80000</p></div></div><div class="detailCon"> <i class="far fa-envelope"></i> <div class="detailText"> <p class="heading">Email:</p><p>[email protected]</p></div></div><div class="detailCon"> <i class="fas fa-mobile-alt"></i> <div class="detailText"> <p class="heading">Call:</p><p>+92 317 0268439 </p></div></div><div class="formContent"></div></div><div class="formCon"> <div class="nameAndEmail"> <input type="text" class="name" placeholder="Name"> <input type="text" class="email" placeholder="Your Email"> </div><input type="text" class="subject" placeholder="Subject"> <textarea name="message" class="message"></textarea> <input type="button" value="Send Message" class="btn"> </div></div><footer>Inspired by <a href="https://bootstrapmade.com/" target="_blank">Bootstrapmade</a></footer> <script src="https://unpkg.com/swiper/swiper-bundle.js"></script> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> <script src="app.js"></script></body></html>