231 lines
7.1 KiB
HTML
231 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Houtworm's Free Software Services</title>
|
|
<meta name="description" content="Website van Danny Houtworm Verkoop onderhoud reparatie en hosting van Computers, Servers, Telefoons, Drones, Websites, Gereedschap en kleine elektronica in heel Friesland.">
|
|
<meta name="keywords" content="Houtworm, Computer, Gaming, Linux, Telefoon, Smartphone, Reparatie, Repareren, Friesland, Heerenveen, Sneek, Drachten, Leeuwarden, Root, Android, Kapot, Vast, Service, Onderhoud, Internet, Sony, LG, Samsung, Umi, HTC, console, Playstation, Website, Hosting">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Houtworm's Free Software Services</h1>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#">Home</a></li>
|
|
<li><a href="#">About</a></li>
|
|
<li><a href="#">Services</a></li>
|
|
<li><a href="#">Contact</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<div class="grid-small">
|
|
<div class="grid-small-item effect-flipxp">
|
|
<span class="icon">★</span>
|
|
<h3>Flip X</h3>
|
|
<p>Positive</p>
|
|
</div>
|
|
<div class="grid-small-item effect-flipxn">
|
|
<span class="icon">★</span>
|
|
<h3>Flip X</h3>
|
|
<p>Negative</p>
|
|
</div>
|
|
<div class="grid-small-item effect-flipyp">
|
|
<span class="icon">★</span>
|
|
<h3>Flip Y</h3>
|
|
<p>Positive</p>
|
|
</div>
|
|
<div class="grid-small-item effect-flipyn">
|
|
<span class="icon">★</span>
|
|
<h3>Flip Y</h3>
|
|
<p>Negative</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-top-image">
|
|
<div class="grid-top-image-item effect-scaleup">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Scale</h3>
|
|
<p>up.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-scaledown">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Scale</h3>
|
|
<p>down.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-small">
|
|
<div class="grid-small-item effect-moveup">
|
|
<span class="icon">★</span>
|
|
<h3>Move</h3>
|
|
<p>up.</p>
|
|
</div>
|
|
<div class="grid-small-item effect-moveleft">
|
|
<span class="icon">★</span>
|
|
<h3>Move</h3>
|
|
<p>left.</p>
|
|
</div>
|
|
<div class="grid-small-item effect-movedown">
|
|
<span class="icon">★</span>
|
|
<h3>Move</h3>
|
|
<p>down.</p>
|
|
</div>
|
|
<div class="grid-small-item effect-moveright">
|
|
<span class="icon">★</span>
|
|
<h3>Move</h3>
|
|
<p>right.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-left-image">
|
|
<div class="grid-left-image-item effect-tiltcw">
|
|
<img src="https://via.placeholder.com/150" alt="Image 3">
|
|
<div class="grid-left-image-item-content">
|
|
<h3>Tilt</h3>
|
|
<p>clockwise.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-left-image-item effect-tiltccw">
|
|
<img src="https://via.placeholder.com/150" alt="Image 3">
|
|
<div class="grid-left-image-item-content">
|
|
<h3>Tilt</h3>
|
|
<p>counter clockwise.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid-small">
|
|
<div class="grid-small-item effect-skewxp">
|
|
<span class="icon">★</span>
|
|
<h3>Skew X</h3>
|
|
<p>Positive</p>
|
|
</div>
|
|
<div class="grid-small-item effect-skewxn">
|
|
<span class="icon">★</span>
|
|
<h3>Skew X</h3>
|
|
<p>Negative</p>
|
|
</div>
|
|
<div class="grid-small-item effect-skewyp">
|
|
<span class="icon">★</span>
|
|
<h3>Skew Y</h3>
|
|
<p>Positive</p>
|
|
</div>
|
|
<div class="grid-small-item effect-skewyn">
|
|
<span class="icon">★</span>
|
|
<h3>Skew Y</h3>
|
|
<p>Negative</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-top-image">
|
|
<div class="grid-top-image-item effect-glow">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Glow</h3>
|
|
<p>Glow.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-top-image">
|
|
<div class="grid-top-image-item effect-hor-shutter-close">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Shutter Horizontal</h3>
|
|
<p>Close.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-hor-shutter-open">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Shutter Horizontal</h3>
|
|
<p>Open.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-ver-shutter-close">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Shutter Vertical</h3>
|
|
<p>Close.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-ver-shutter-open">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Shutter Vertical</h3>
|
|
<p>Open.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-top-image">
|
|
<div class="grid-top-image-item effect-dia-shutter-close">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Shutter Diagonal</h3>
|
|
<p>Close.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-dia-shutter-open">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Shutter Diagonal</h3>
|
|
<p>Open.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-top-image">
|
|
<div class="grid-top-image-item effect-sweep-up">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep</h3>
|
|
<p>Up.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-sweep-down">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep</h3>
|
|
<p>Down.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-sweep-left">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep</h3>
|
|
<p>Left.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-sweep-right">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep</h3>
|
|
<p>Right.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-top-image">
|
|
<div class="grid-top-image-item effect-sweep-from-up-right">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep From</h3>
|
|
<p>Up Right.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-sweep-from-down-left">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep From</h3>
|
|
<p>Down Left.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-sweep-to-up-right">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep To</h3>
|
|
<p>Up Right.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-sweep-to-down-left">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Sweep To</h3>
|
|
<p>Down Left.</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid-top-image">
|
|
<div class="grid-top-image-item effect-corner-square">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Radius</h3>
|
|
<p>0.</p>
|
|
</div>
|
|
<div class="grid-top-image-item effect-corner-round">
|
|
<img src="https://via.placeholder.com/250" alt="Image 1">
|
|
<h3>Radius</h3>
|
|
<p>500px.</p>
|
|
</div>
|
|
</div>
|
|
<div class="contact-form">
|
|
<h2>Contact Us</h2>
|
|
<form name="contactForm" onsubmit="return validateForm()">
|
|
<input type="text" name="name" placeholder="Your Name">
|
|
<input type="text" name="email" placeholder="Your Email">
|
|
<textarea name="message" placeholder="Your Message"></textarea>
|
|
<input type="submit" value="Send Message">
|
|
</form>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<p>Made with ❤ Powered by <a href="#">Free Software</a></p>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
|