-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
66 lines (53 loc) · 3.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="_zBkIyrQHfJ7PcTzegeI0Zk1Ddy65qTz3Dp_BjT-onI" />
<title>Read more or Less</title>
<link rel="stylesheet" href="./CSS/main.css">
<link rel="stylesheet" href="./CSS/font-awesome.min.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> -->
</head>
<body>
<div class="card-container">
<div class="text-container">
<h2> <i class="fa fa-gift gift" aria-hidden="true" style="font-size: 80px;"></i> Gifts</h2>
<p class="text">Lorem ipsum
dolor sit amet consectetur adipisicing elit. Suscipit perferendis
ipsa, qui non minus minima. Delectus, fugit minus consequatur placeat, reiciendis nulla totam tempore
nam omnis aliquid corrupti expedita sapiente <span class="dots">...</span> <span
class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae dolores
itaque magnam eius Ullam maxime, officia quos voluptate quis eos laboriosam enim
nisi autem nesciunt pariatur maiores quae molestiae voluptates aperiam quidem hic est, et nulla
culpa quibusdam soluta alias? </span></p>
<button class="read-more-btn">Read More</button>
</div>
<div class="text-container">
<h2> <i class="fa fa-coffee coffee" aria-hidden="true" style="font-size: 80px;"></i> Drinks</h2>
<p class="text">Lorem ipsum
dolor sit amet consectetur adipisicing elit. Suscipit perferendis
ipsa, qui non minus minima sapiente laboriosam voluptatum alias <span class="dots">...</span> <span
class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae dolores
quam consequatur mollitia itaque magnam eius, beatae ducimus veritatis vel tempore ex id, ea
reiciendis et molestiae illo maiores. Ullam maxime, officia quos voluptate quis eos laboriosam enim
nisi hic est, et nulla
culpa quibusdam soluta alias? </span></p>
<button class="read-more-btn">Read More</button>
</div>
<div class="text-container">
<h2> <i class="fa fa-tree tree" aria-hidden="true" style="font-size: 80px;"></i> Christmas tree</h2>
<p id="text" class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit perferendis
ipsa, qui non minus minima. Delectus, fugit minus consequatur placeat, reiciendis nulla totam
tempore nam omnis aliquid <span class="dots">...</span> <span
class="more-text">Architecto vero a quis libero quisquam fugit. Non sit pariatur recusandae
dolores quam consequatur mollitia itaque magnam eius, beatae ducimus veritatis vel tempore ex
id, ea reiciendis et molestiae illo maiores. </span>
</p>
<button class="read-more-btn">Read More</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>