Skip to content

Instantly share code, notes, and snippets.

@kurunve

kurunve/HTML Task Kottans

Last active August 29, 2015 14:07
Show Gist options
  • Save kurunve/e3130fea7609f937a262 to your computer and use it in GitHub Desktop.
Save kurunve/e3130fea7609f937a262 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HTML Task Kottans
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Abstract Page</title>
</head>
<body>
<header>
<nav>
<a href="#about">About</a>
<a href="#faq">F.A.Q.</a>
<a href="#contacts">Contacts</a>
<a href="#register">Register</a>
<a href="#contacts">Feedback</a>
</nav>
</header>
<main>
<h1> Some Abstract Page Header </h1>
<section id="about">
<h2> About Abstract Page </h2>
<img src="http://www.developermemes.com/wp-content/uploads/2013/03/Facepalm-1.jpeg" alt="Tactical facepalm">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, animi provident aspernatur. Optio quisquam veritatis aperiam adipisci possimus minus, animi cumque excepturi, ex ullam iure, commodi odit totam doloribus tenetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, animi provident aspernatur. Optio quisquam veritatis aperiam adipisci possimus minus, animi cumque excepturi, ex ullam iure, commodi odit totam doloribus tenetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, animi provident aspernatur. Optio quisquam veritatis aperiam adipisci possimus minus, animi cumque excepturi, ex ullam iure, commodi odit totam doloribus tenetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste natus doloremque mollitia delectus. Similique tempore, dolorum hic obcaecati ea quae enim est, sit maiores asperiores doloremque ex reprehenderit quis in!</p>
</section>
<section id="faq">
<h2> Frequently Asked Questions </h2>
<dl>
<dt>Question 1</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 2</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 3</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 4</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
<dt>Question 5</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi aspernatur ducimus commodi tenetur possimus autem suscipit quas! Vero placeat molestiae impedit tempore fugiat enim consectetur magni sequi, praesentium, corporis reiciendis.</dd>
</dl>
</section>
<section id="contacts">
<h2>Contacts</h2>
<address>
<div>
<a href="http://www.stackoverflow.com" class="link">StackOwerflow</a>
</div>
<div>
<a href="http://www.linkedin.com" class="link">Linkedin</a>
</div>
<div>
<a href="http://www.goole.com" class="link">Google</a>
</div>
</address>
</section>
<section id="register">
<h2>Register for participation</h2>
<form>
<div>
<label for="email-input-register">Email</label>
<input id="email-input-register" type="text" name="email" size="40" maxlength="50">
</div>
<div>
<label for="password-input-register"> Password</label>
<input id="password-input-register" type="password" size="40" maxlength="50">
<p>
<sub>We will <s>never</s>
<a href="#reference1" class="link"><sup>1</sup></a>
sell your personal details</sub>
</p>
</div>
<div>
<textarea name="comment" rows="3" cols="20">Comment</textarea>
</div>
<div>
<input id="checkbox-input" type="checkbox" checked="checked">
<label for="checkbox-input">Check this if you are happy with all conditions!</label>
</div>
<input type="submit" value="Subscribe">
<input type="reset" value="Clear">
</form>
</section>
<section id="feedback">
<h2>Problems?</h2>
<h4> Please, provide your feedback</h4>
<form>
<div>
<input id="name-input-feedback" type="text" name="name-feedback" placeholder="Name" size="40"/>
</div>
<div>
<input id="email-input-feetback" type="text" name="email-feedback" placeholder="Email" size="40"/>
</div>
<div>
<textarea name="Question" rows="5" cols="20" placeholder="Question/Comment"></textarea>
</div>
<input type="submit" value="Send"/>
<input type="reset" value="Clear"/>
</form>
</section>
<aside id="reference1">
<p> <sup>1</sup>We will sell it anyway!</p>
</aside>
</main>
<footer>
<div class="links">
<a href="#about">About</a>
<a href="#faq">F.A.Q.</a>
<a href="#contacts">Contacts</a>
<a href="#register">Register</a>
<a href="#contacts">Feedback</a>
</div>
<p> (c) made by Kuru 2014</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment