-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (113 loc) · 5.61 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ali Sayed</title>
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<script>
var html = document.documentElement;
html.className = html.className.replace("no-js", "js");
</script>
</head>
<body>
<div class="page-wrapper">
<header class="layout-header cl">
<div class="layout-header__big"></div>
<div class="menu-inner">
<nav>
<ul class="nav">
<li class="nav__item"><a class="nav__link link" href="#beginning">Beginning</a></li>
<li class="nav__item"><a class="nav__link link" href="#services">Services</a></li>
<li class="nav__item"><a class="nav__link link" href="#about">About</a></li>
</ul>
</nav>
</div>
<div class="layout-header__small" id="beginning">
<div class="menu">
<a class="menu__toggle js-menu__toggle link" href="#" title="menu">
toggle menu
<span class="menu__toggle-icon"></span>
</a>
</div>
<h1 class="layout-header__caption">
Ali Sayed’s<br>
<strong class="layout__caption--bold">Web Designing</strong><br>
<span class="layout__caption--regular">Project</span>
</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
<p>quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dol.</p>
</div>
</header>
<main class="layout-content cl">
<div class="layout-content__small" id="services">
<ul class="layout-content__list">
<li class="layout-content__item">
<h2 class="layout__caption layout-content__caption">
Drawing
<strong class="layout__caption--bold">Scketch</strong>
</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
</li>
<li class="layout-content__item">
<h2 class="layout__caption layout-content__caption">
Making
<strong class="layout__caption--bold">Design</strong>
</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
</li>
<li class="layout-content__item">
<h2 class="layout__caption layout-content__caption">
Developing
<strong class="layout__caption--bold">Product</strong>
</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidu.</p>
</li>
</ul>
</div>
<div class="layout-content__big">
<div class="layout-content__section layout-content__section1">
<h2 class="layout__caption layout-content__caption layout__caption--dark">
Best
<strong class="layout__caption--bold">Starting</strong>
</h2>
<p>Lorem ipsum dolor sit amet, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.</p>
<a class="btn btn--dark" href="#">View Our History</a>
</div>
<div class="layout-content__section layout-content__section2">
<h2 class="layout__caption layout-content__caption">
Verified
<strong class="layout__caption--bold">Dummy</strong>
</h2>
<p>Lorem ipsum dolor sit amet, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea.</p>
<a class="btn" href="#">Go To The Page</a>
</div>
</div>
</main>
<footer class="layout-footer cl">
<div class="layout-footer__small" id="about">
<p class="layout__caption block-shift-left">This Webpage Is <strong class="layout__caption--bold">Designed By</strong></p>
<img class="logo" src="img/logo.png" width="90" height="90" alt="Ali Sayed">
<p class="layout__caption layout__caption--bold layout__caption--small">Ali Sayed</p>
<p class="layout-footer__text">Graphic Designer</p>
</div>
<div class="layout-footer__big">
<p class="layout__caption block-shift-right">Say <strong class="layout__caption--bold">‘Hello’</strong></p>
<form class="form" action="/" method="post">
<input class="form__input" type="text" name="name" placeholder="Your Name">
<input class="form__input" type="email" name="email" placeholder="Your Email">
<textarea id="message" class="form__textarea" name="message" placeholder="Your Message Here..."></textarea>
<button class="btn form__btn" type="submit">Send</button>
</form>
<p class="layout-footer__text">Stay Connnected With Us...</p>
<a class="social-btn social-btn_net_facebook" href="#">facebook</a>
<a class="social-btn social-btn_net_dribbble" href="#">dribbble</a>
<a class="social-btn social-btn_net_twitter" href="#">twitter</a>
<p class="layout-footer__text">Please Feel Free To Contat With me For Any Kind of Prject.</p>
</div>
</footer>
</div>
<script src="js/scripts.min.js"></script>
</body>
</html>