-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (93 loc) · 4.55 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
<!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>Acme Web Solutions </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!----Header Showcase---->
<header id="showcase" class="grid">
<div class="bg-image "></div>
<div class="content-wrap">
<h1>Welcome To Acme Web Solutions</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis fugiat itaque voluptates voluptas. Odit nobis quo cumque maxime eius aliquam?
</p>
<a gref="#section-b" class="button">Read More</a>
</div>
</header>
<!-----main area------>
<main id="main">
<!-----section-a----->
<section id="section-a" class="grid">
<div class="content-wrap">
<h2>Web & Application Development</h2>
<div class="content-text">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam deleniti doloribus omnis, atque nemo sapiente repudiandae repellendus, at fuga, ratione magnam cupiditate id accusamus consequatur placeat ipsa ex est iure ad amet in quos? Deleniti neque minus porro rerum illum!
</p>
</div>
</div>
</section>
<!----section-b----->
<section id="section-b" class="grid">
<ul>
<li>
<div class="card">
<img src="pexels.jpg" alt="">
<div class="card-content">
<h3 class="card-title">Web Development</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia at, aut deserunt sequi nulla consequatur nesciunt eveniet. Reiciendis, labore vero.</p>
</div>
</div>
</li>
<li>
<div class="card">
<img src="mobile.jpg" alt="">
<div class="card-content">
<h3 class="card-title">Mobile Application</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia at, aut deserunt sequi nulla consequatur nesciunt eveniet. Reiciendis, labore vero.</p>
</div>
</div>
</li>
<li>
<div class="card">
<img src="marketing.jpg" alt="">
<div class="card-content">
<h3 class="card-title">Tech Marketing</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Mollitia at, aut deserunt sequi nulla consequatur nesciunt eveniet. Reiciendis, labore vero.</p>
</div>
</div>
</li>
</ul>
</section>
<!-----section-c----->
<section id="section-c" class="grid">
<div class="content-wrap">
<h2 class="content-title">We handle all of your digital needs</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae aut sunt consequuntur in fugiat quo perferendis molestias officiis repellendus aliquid.</p>
</div>
</section>
<!---section-d---->
<section id="section-d" class="grid">
<div class="box">
<h2 class="content-title">Contact Us</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rem obcaecati ratione suscipit, fugit aliquam reprehenderit minus quidem laboriosam. Libero, quod?</p>
<p>[email protected]</p>
</div>
<div class="box">
<h2 class="content-title">About Our Company</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam minus laboriosam voluptate blanditiis repellat, eligendi id deleniti maxime fugiat neque consequuntur, ab nesciunt, officia tempora sed nulla eveniet natus quis.</p>
</div>
</section>
</main>
<!----footer---->
<footer id="main-footer" class="grid">
<div>Acme Web Solutions</div>
<div>Project By <a href="http://traversymedia.com" target="_blank">Traversy Media</a></div>
</footer>
</body>
</html>