-
Notifications
You must be signed in to change notification settings - Fork 0
/
Real-portfolio.html
161 lines (116 loc) · 6.74 KB
/
Real-portfolio.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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!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>HTML and CSS Portfolio Grid</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="main">
<div class="container">
<div class="grid" style="background-image:url('Images/img1.jpeg')">
<a href="#one" class="heading">
<span>Heading One</span>
</a>
<div class="details" id="one">
<a href="#" class="close">X</a>
<h2>This One</h2>
<p>This One
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img2.jpeg')">
<a href="#two" class="heading">
<span>Heading Two</span>
</a>
<div class="details" id="two">
<a href="#" class="close">X</a>
<h2>This Two</h2>
<p>This Two
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img3.jpeg')">
<a href="#three" class="heading">
<span>Heading Three</span>
</a>
<div class="details" id="three">
<a href="#" class="close">X</a>
<h2>This Three</h2>
<p>This Three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img4.jpeg')">
<a href="#four" class="heading">
<span>Heading Four</span>
</a>
<div class="details" id="four">
<a href="#" class="close">X</a>
<h2>This Four</h2>
<p>This Four
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img5.jpeg')">
<a href="#five" class="heading">
<span>Heading Five</span>
</a>
<div class="details" id="five">
<a href="#" class="close">X</a>
<h2>This Five</h2>
<p>This Five
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img6.jpeg')">
<a href="#six" class="heading">
<span>Heading Six</span>
</a>
<div class="details" id="six">
<a href="#" class="close">X</a>
<h2>This Six</h2>
<p>This Six
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img7.jpeg')">
<a href="#seven" class="heading">
<span>Heading Seven</span>
</a>
<div class="details" id="seven">
<a href="#" class="close">X</a>
<h2>This Seven</h2>
<p>This Seven
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img8.jpeg')">
<a href="#eight" class="heading">
<span>Heading Eight</span>
</a>
<div class="details" id="eight">
<a href="#" class="close">X</a>
<h2>This Eight</h2>
<p>This Eight
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
</div>
<div class="grid" style="background-image:url('Images/img9.jpeg')">
<a href="#nine" class="heading">
<span>Heading Nine</span>
</a>
<div class="details" id="nine">
<a href="#" class="close">X</a>
<h2>This Nine</h2>
<p>This Nine
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias voluptatu obcaecati consequatur sint impedit. Animi, excepturi, aliquid nemo, officiis obcaecati veritatis error blanditiis incidunt fugiat nulla eaque. Voluptatem, vitae debitis.</p>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</body>
</html>