Spaces:

MalekCode03
/

KasperZero

Running

App Files Files Community

MalekCode03 commited on Apr 21, 2025

Commit

8959b5b

verified ·

1 Parent(s): 7450b1f

Update index.html

Browse files

Files changed (1) hide show

index.html +477 -19

index.html CHANGED Viewed

@@ -1,19 +1,477 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>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 &amp; 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">&copy; 2021 <span>Kasper</span> All Right Reserved</p>
+      </div>
+    </div>
+    <!-- End Footer -->
+  </body>
+</html>