Spaces:
Running
Running
| <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>Kasper | Template Two</title> | |
| <!-- Render All Elements Normally --> | |
| <link rel="stylesheet" href="CSS/Normalize.css" /> | |
| <!-- Font Awesome Library --> | |
| <link rel="stylesheet" href="CSS/all.min.css" /> | |
| <!-- Main Template CSS File --> | |
| <link rel="stylesheet" href="CSS/Kasper.css" /> | |
| <!-- Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <!-- Start Header --> | |
| <header> | |
| <div class="container"> | |
| <a href="#" class="logo"> | |
| <img src="images/logo.png" alt="Logo" /> | |
| </a> | |
| <nav> | |
| <i class="fas fa-bars toggle-menu"></i> | |
| <ul> | |
| <li><a class="active" href="#">Home</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">Portfolio</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| <div class="form"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- End Header --> | |
| <!-- Start Landing --> | |
| <div class="landing"> | |
| <div class="overlay"></div> | |
| <div class="text"> | |
| <div class="content"> | |
| <h2> | |
| Hello World!<br /> | |
| We Are Kasper We Make Art. | |
| </h2> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt | |
| nibh pulvinar a. Curabitur aliquet quam. Accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet | |
| elit, eget tincidunt. | |
| </p> | |
| </div> | |
| </div> | |
| <i class="fas fa-angle-left change-background fa-2x"></i> | |
| <i class="fas fa-angle-right change-background fa-2x"></i> | |
| <ul class="bullets"> | |
| <li></li> | |
| <li class="active"></li> | |
| <li></li> | |
| </ul> | |
| </div> | |
| <!-- End Landing --> | |
| <!-- Start Services --> | |
| <div class="services"> | |
| <div class="container"> | |
| <div class="main-heading"> | |
| <h2>Services</h2> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| </p> | |
| </div> | |
| <div class="services-container"> | |
| <div class="srv-box"> | |
| <i class="fas fa-desktop fa-3x"></i> | |
| <div class="text"> | |
| <h3>Vorem amet intuitive</h3> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt nibh pulvinar a. Curabitur aliquet quam. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="srv-box"> | |
| <i class="fas fa-cog fa-3x"></i> | |
| <div class="text"> | |
| <h3>Vorem amet intuitive</h3> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt nibh pulvinar a. Curabitur aliquet quam. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="srv-box"> | |
| <i class="fas fa-pencil-ruler fa-3x"></i> | |
| <div class="text"> | |
| <h3>Vorem amet intuitive</h3> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt nibh pulvinar a. Curabitur aliquet quam. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="srv-box"> | |
| <i class="fas fa-camera fa-3x"></i> | |
| <div class="text"> | |
| <h3>Vorem amet intuitive</h3> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt nibh pulvinar a. Curabitur aliquet quam. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Services --> | |
| <!-- Start Design --> | |
| <div class="design"> | |
| <div class="image"> | |
| <img src="images/mobile.png" alt="Mobile" /> | |
| </div> | |
| <div class="text"> | |
| <h2>Our Design Comes With...</h2> | |
| <ul> | |
| <li>Responsive Design</li> | |
| <li>Modern And Clean Design</li> | |
| <li>Clean Code</li> | |
| <li>Browser Friendly</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- End Design --> | |
| <!-- Start Portfolio --> | |
| <div class="portfolio"> | |
| <div class="container"> | |
| <div class="main-heading"> | |
| <h2>Portfolio</h2> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| </p> | |
| </div> | |
| <ul class="shuffle"> | |
| <li class="active">All</li> | |
| <li>App</li> | |
| <li>Photo</li> | |
| <li>Web</li> | |
| <li>Print</li> | |
| </ul> | |
| </div> | |
| <div class="imgs-container"> | |
| <div class="box"> | |
| <img src="images/shuffle-01.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <img src="images/shuffle-02.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <img src="images/shuffle-03.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <img src="images/shuffle-04.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <img src="images/shuffle-05.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <img src="images/shuffle-06.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <img src="images/shuffle-07.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| <div class="box"> | |
| <img src="images/shuffle-08.jpg" alt="" /> | |
| <div class="caption"> | |
| <h4>Awesome Image</h4> | |
| <p>Photography</p> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#" class="more">More</a> | |
| </div> | |
| <!-- End Portfolio --> | |
| <!-- Start Video --> | |
| <div class="video"> | |
| <video autoplay muted loop> | |
| <source src="images/awesome-video.mp4" type="video/mp4" /> | |
| </video> | |
| <div class="text"> | |
| <h2>Super Awesome Video Here</h2> | |
| <p>Its All You Need</p> | |
| <button>See More</button> | |
| </div> | |
| </div> | |
| <!-- End Video --> | |
| <!-- Start About --> | |
| <div class="about"> | |
| <div class="container"> | |
| <div class="main-heading"> | |
| <h2>About Us</h2> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| </p> | |
| </div> | |
| <img src="images/about.png" alt="" /> | |
| </div> | |
| </div> | |
| <!-- End About --> | |
| <!-- Start Stats --> | |
| <div class="stats"> | |
| <div class="container"> | |
| <div class="box"> | |
| <i class="fas fa-mug-hot"></i> | |
| <div class="number">1.236</div> | |
| <p>Coffee Drinks</p> | |
| </div> | |
| <div class="box"> | |
| <i class="far fa-folder"></i> | |
| <div class="number">256</div> | |
| <p>Completed Projects</p> | |
| </div> | |
| <div class="box"> | |
| <i class="far fa-envelope"></i> | |
| <div class="number">1,743</div> | |
| <p>Mail Sent</p> | |
| </div> | |
| <div class="box"> | |
| <i class="fas fa-trophy"></i> | |
| <div class="number">17</div> | |
| <p>Awards Received</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Stats --> | |
| <!-- Start Skills --> | |
| <div class="our-skills"> | |
| <div class="container"> | |
| <div class="testimonials"> | |
| <h3>Testimonials</h3> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| </p> | |
| <div class="content"> | |
| <img src="images/skills-01.jpg" alt="" /> | |
| <div class="text"> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| <p>John Doe, CEO</p> | |
| </div> | |
| </div> | |
| <div class="content"> | |
| <img src="images/skills-02.jpg" alt="" /> | |
| <div class="text"> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| <p>John Doe, CEO</p> | |
| </div> | |
| </div> | |
| <ul class="bullets"> | |
| <li></li> | |
| <li class="active"></li> | |
| <li></li> | |
| </ul> | |
| </div> | |
| <div class="skills"> | |
| <h3>Skills</h3> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| </p> | |
| <div class="prog-holder"> | |
| <h4>Adobe</h4> | |
| <div class="prog"> | |
| <span style="width: 90%" data-progress="90%"></span> | |
| </div> | |
| </div> | |
| <div class="prog-holder"> | |
| <h4>Html & Css</h4> | |
| <div class="prog"> | |
| <span style="width: 85%" data-progress="85%"></span> | |
| </div> | |
| </div> | |
| <div class="prog-holder"> | |
| <h4>JavaScript</h4> | |
| <div class="prog"> | |
| <span style="width: 80%" data-progress="80%"></span> | |
| </div> | |
| </div> | |
| <div class="prog-holder"> | |
| <h4>Php</h4> | |
| <div class="prog"> | |
| <span style="width: 90%" data-progress="90%"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Skills --> | |
| <!-- Start Quote --> | |
| <div class="quote"> | |
| <div class="container"> | |
| <q>accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt.</q> | |
| <span>John Doe</span> | |
| </div> | |
| </div> | |
| <!-- End Quote --> | |
| <!-- Start Pricing --> | |
| <div class="pricing"> | |
| <div class="container"> | |
| <div class="main-heading"> | |
| <h2>Pricing</h2> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| </p> | |
| </div> | |
| <div class="plans"> | |
| <div class="plan"> | |
| <div class="head"> | |
| <h3>Basic</h3> | |
| <span>19</span> | |
| </div> | |
| <ul> | |
| <li>Feature No 1</li> | |
| <li>Extra Feature</li> | |
| <li>Extra Feature No 2</li> | |
| <li>Feature</li> | |
| </ul> | |
| <div class="foot"> | |
| <a href="#">Buy Now</a> | |
| </div> | |
| </div> | |
| <div class="plan"> | |
| <div class="head"> | |
| <h3>Premium</h3> | |
| <span>29</span> | |
| </div> | |
| <ul> | |
| <li>Feature No 1</li> | |
| <li>Extra Feature</li> | |
| <li>Extra Feature No 2</li> | |
| <li>Feature</li> | |
| </ul> | |
| <div class="foot"> | |
| <a href="#">Buy Now</a> | |
| </div> | |
| </div> | |
| <div class="plan"> | |
| <div class="head"> | |
| <h3>Pro</h3> | |
| <span>39</span> | |
| </div> | |
| <ul> | |
| <li>Feature No 1</li> | |
| <li>Extra Feature</li> | |
| <li>Extra Feature No 2</li> | |
| <li>Feature</li> | |
| </ul> | |
| <div class="foot"> | |
| <a href="#">Buy Now</a> | |
| </div> | |
| </div> | |
| <div class="plan"> | |
| <div class="head"> | |
| <h3>Platinum</h3> | |
| <span>49</span> | |
| </div> | |
| <ul> | |
| <li>Feature No 1</li> | |
| <li>Extra Feature</li> | |
| <li>Extra Feature No 2</li> | |
| <li>Feature</li> | |
| </ul> | |
| <div class="foot"> | |
| <a href="#">Buy Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="contact-text">Contact us if you have special request</p> | |
| <a href="#" class="contact-link">Contact Us</a> | |
| </div> | |
| </div> | |
| <!-- End Pricing --> | |
| <!-- Start Subscribe --> | |
| <div class="subscribe"> | |
| <div class="container"> | |
| <form action=""> | |
| <i class="far fa-envelope fa-lg"></i> | |
| <input type="email" name="mail" placeholder="Your Email" /> | |
| <input type="submit" value="Subscribe" /> | |
| </form> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blan dit aliquet elit, eget tincidunt. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- End Subscribe --> | |
| <!-- Start Contact --> | |
| <div class="contact"> | |
| <div class="container"> | |
| <div class="main-heading"> | |
| <h2>Contact Us</h2> | |
| <p> | |
| Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget | |
| tincidunt. | |
| </p> | |
| </div> | |
| <div class="content"> | |
| <form action=""> | |
| <input class="main-input" type="text" name="name" placeholder="Your Name" /> | |
| <input class="main-input" type="email" name="mail" placeholder="Your Email" /> | |
| <textarea class="main-input" name="message" placeholder="Your Message"></textarea> | |
| <input type="submit" value="Send Message" /> | |
| </form> | |
| <div class="info"> | |
| <h4>Get In Touch</h4> | |
| <span class="phone">+00 123.456.789</span> | |
| <span class="phone">+00 123.456.789</span> | |
| <h4>Where We Are</h4> | |
| <address>Awesome Address 17<br />New York, NYC<br />123-4567-890<br />USA</address> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End Contact --> | |
| <!-- Start Footer --> | |
| <div class="footer"> | |
| <div class="container"> | |
| <img src="images/logo.png" alt="Logo" /> | |
| <p>We Are Social</p> | |
| <div class="social-icons"> | |
| <i class="fab fa-facebook-f"></i> | |
| <i class="fab fa-twitter"></i> | |
| <i class="fas fa-home"></i> | |
| <i class="fab fa-linkedin"></i> | |
| </div> | |
| <p class="copyright">© 2021 <span>Kasper</span> All Right Reserved</p> | |
| </div> | |
| </div> | |
| <!-- End Footer --> | |
| </body> | |
| </html> |