-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (62 loc) · 7.08 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!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>scrolling web site</title>
<link rel="stylesheet" href="style.css">
<script defer src="main.js"></script>
</head>
<body>
<span class="toggle">
<span></span>
<span></span>
<span></span>
</span>
<nav>
<span class="close">X</span>
<a href="#">Home</a>
<a href="#">Product</a>
<a href="#">Shop</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<header>
<h2><a href="#" class="logo">Ahmed <br> Salama</a></h2>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">About</a></li>
<li><a href="#">content</a></li>
</ul>
</header>
<!-- scroll to top btn -->
<span class="up">Up</span>
<section class="main">
<img src="./images/stars1.webp" id="stars">
<h2 class="ahmed">Ahmed Salama</h2>
<img src="./images/moon2.webp" id="moon">
<img src="./images/mountains3.webp" id="mountains3">
<img src="./images/mountains4.webp" id="mountains4">
<img src="./images/river5.webp" id="river5">
<img src="./images/boat6.webp" id="boat6">
<img src="./images/mountains7.webp" id="mountains7">
</section>
<div class="content">
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis necessitatibus explicabo hic enim temporibus aperiam laboriosam ex. Aliquid, minus maxime quibusdam voluptatum rerum eos blanditiis eaque repellendus quis ex esse sint dolorem minima omnis! Id accusamus facere enim mollitia culpa, iusto corporis dolorem necessitatibus repellendus quasi? Consectetur enim consequuntur, sint hic quaerat eum, mollitia at quidem voluptatibus, sequi repellendus aut iusto iste officia aspernatur tempora harum necessitatibus architecto a illum consequatur labore perferendis quod! Suscipit vitae repellat saepe, commodi ab nisi culpa doloribus odit tenetur enim architecto. Sequi nesciunt eum beatae consequatur, molestias facere at voluptate temporibus quis cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis necessitatibus explicabo hic enim temporibus aperiam laboriosam ex. Aliquid, minus maxime quibusdam voluptatum rerum eos blanditiis eaque repellendus quis ex esse sint dolorem minima omnis! Id accusamus facere enim mollitia culpa, iusto corporis dolorem necessitatibus repellendus quasi? Consectetur enim consequuntur, sint hic quaerat eum, mollitia at quidem voluptatibus, sequi repellendus aut iusto iste officia aspernatur tempora harum necessitatibus architecto a illum consequatur labore perferendis quod! Suscipit vitae repellat saepe, commodi ab nisi culpa doloribus odit tenetur enim architecto. Sequi nesciunt eum beatae consequatur, molestias facere at voluptate temporibus quis cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis necessitatibus explicabo hic enim temporibus aperiam laboriosam ex. Aliquid, minus maxime quibusdam voluptatum rerum eos blanditiis eaque repellendus quis ex esse sint dolorem minima omnis! Id accusamus facere enim mollitia culpa, iusto corporis dolorem necessitatibus repellendus quasi? Consectetur enim consequuntur, sint hic quaerat eum, mollitia at quidem voluptatibus, sequi repellendus aut iusto iste officia aspernatur tempora harum necessitatibus architecto a illum consequatur labore perferendis quod! Suscipit vitae repellat saepe, commodi ab nisi culpa doloribus odit tenetur enim architecto. Sequi nesciunt eum beatae consequatur, molestias facere at voluptate temporibus quis cumque.</p>
<h2>Lorem ipsum dolor sit amet.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis necessitatibus explicabo hic enim temporibus aperiam laboriosam ex. Aliquid, minus maxime quibusdam voluptatum rerum eos blanditiis eaque repellendus quis ex esse sint dolorem minima omnis! Id accusamus facere enim mollitia culpa, iusto corporis dolorem necessitatibus repellendus quasi? Consectetur enim consequuntur, sint hic quaerat eum, mollitia at quidem voluptatibus, sequi repellendus aut iusto iste officia aspernatur tempora harum necessitatibus architecto a illum consequatur labore perferendis quod! Suscipit vitae repellat saepe, commodi ab nisi culpa doloribus odit tenetur enim architecto. Sequi nesciunt eum beatae consequatur, molestias facere at voluptate temporibus quis cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis necessitatibus explicabo hic enim temporibus aperiam laboriosam ex. Aliquid, minus maxime quibusdam voluptatum rerum eos blanditiis eaque repellendus quis ex esse sint dolorem minima omnis! Id accusamus facere enim mollitia culpa, iusto corporis dolorem necessitatibus repellendus quasi? Consectetur enim consequuntur, sint hic quaerat eum, mollitia at quidem voluptatibus, sequi repellendus aut iusto iste officia aspernatur tempora harum necessitatibus architecto a illum consequatur labore perferendis quod! Suscipit vitae repellat saepe, commodi ab nisi culpa doloribus odit tenetur enim architecto. Sequi nesciunt eum beatae consequatur, molestias facere at voluptate temporibus quis cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis necessitatibus explicabo hic enim temporibus aperiam laboriosam ex. Aliquid, minus maxime quibusdam voluptatum rerum eos blanditiis eaque repellendus quis ex esse sint dolorem minima omnis! Id accusamus facere enim mollitia culpa, iusto corporis dolorem necessitatibus repellendus quasi? Consectetur enim consequuntur, sint hic quaerat eum, mollitia at quidem voluptatibus, sequi repellendus aut iusto iste officia aspernatur tempora harum necessitatibus architecto a illum consequatur labore perferendis quod! Suscipit vitae repellat saepe, commodi ab nisi culpa doloribus odit tenetur enim architecto. Sequi nesciunt eum beatae consequatur, molestias facere at voluptate temporibus quis cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis necessitatibus explicabo hic enim temporibus aperiam laboriosam ex. Aliquid, minus maxime quibusdam voluptatum rerum eos blanditiis eaque repellendus quis ex esse sint dolorem minima omnis! Id accusamus facere enim mollitia culpa, iusto corporis dolorem necessitatibus repellendus quasi? Consectetur enim consequuntur, sint hic quaerat eum, mollitia at quidem voluptatibus, sequi repellendus aut iusto iste officia aspernatur tempora harum necessitatibus architecto a illum consequatur labore perferendis quod! Suscipit vitae repellat saepe, commodi ab nisi culpa doloribus odit tenetur enim architecto. Sequi nesciunt eum beatae consequatur, molestias facere at voluptate temporibus quis cumque.</p>
</div>
<footer>
inspired by <span>Nouvil</span> academy
</footer>
</body>
</html>