This repository has been archived by the owner on Dec 12, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
gridmobile.html
136 lines (114 loc) · 5.81 KB
/
gridmobile.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Grid responsive layout mobile first</title>
<link rel="stylesheet" href="../css/gridmobile.css">
</head>
<body>
<main>
<!-- Header Showcase -->
<header id="showcase" class="grid">
<!-- to add a bg image with opacity and z index and stuff it is preferable tu use a div alone -->
<div class="bg-image"></div>
<div class="content-wrap">
<div class="content-text">
<h1>Welcome To My Website</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium, similique dignissimos nihil quia
ab fugiat. Labore explicabo inventore voluptate minus. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Id ullam quasi inventore fugiat incidunt nobis corrupti reiciendis maxime porro. Suscipit?</p>
<a href="#section-b" class="btn">Read More</a>
</div>
</div>
</header>
<!-- Main area -->
<main id="main">
<!-- section a -->
<section id="section-a" class="grid">
<div class="content-wrap">
<h2 class="content-title">Web & Application Development</h2>
<div class="content-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse quae obcaecati odio animi nesciunt
molestiae, magnam dolores? Voluptatum eveniet autem dignissimos, ratione quo delectus deserunt
corrupti nobis? Nemo, earum. Obcaecati suscipit laboriosam sed officia id nesciunt corporis,
amet porro rerum?
</p>
</div>
</div>
</section>
<!-- section b -->
<section id="section-b" class="grid">
<ul>
<li>
<div class="card">
<img src="../images/america-american-flag-architecture-450597.jpg" alt="">
<div class="card-content">
<h3 class="card-title">Web Development</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit ea dolore doloribus quas?
Consequuntur tempore neque deserunt accusamus aperiam optio.</p>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://static.pexels.com/photos/574077/pexels-photo-574077.jpeg" alt="">
<div class="card-content">
<h3 class="card-title">Web Development</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit ea dolore doloribus quas?
Consequuntur tempore neque deserunt accusamus aperiam optio.</p>
</div>
</div>
</li>
<li>
<div class="card">
<img src="https://static.pexels.com/photos/265087/pexels-photo-265087.jpeg" alt="">
<div class="card-content">
<h3 class="card-title">Web Development</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit ea dolore doloribus quas?
Consequuntur tempore neque deserunt accusamus aperiam optio.</p>
</div>
</div>
</li>
</ul>
</section>
<!-- section c -->
<section id="section-c" class="grid">
<div class="content-wrap">
<h2 class="card-title">
We handle all of your digital needs
</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic eos tempora tenetur a, quos suscipit commodi
accusantium corporis voluptatibus possimus in odit est accusamus, porro id facere beatae nostrum
fugit?</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. Voluptatibus odio, nulla error officiis vero
cupiditate repellat velit hic a ipsam repudiandae nesciunt tenetur et quis enim? Eius numquam quibusdam
soluta?</p>
</div>
<div class="box">
<h2 class="content-title">About our company</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus odio, nulla error officiis vero
cupiditate repellat velit hic a ipsam repudiandae nesciunt tenetur et quis enim? Eius numquam quibusdam
soluta?</p>
</div>
</section>
</main>
<!-- footer -->
<footer id="main-footer" class="grid">
<div>Acme Web Solution</div>
<div>Project By
<a href="http://facebook.com/dzcode.design" target="_blank">
Amine Hammou
</a>
</div>
</footer>
</main>
</body>
</html>