-
Notifications
You must be signed in to change notification settings - Fork 0
/
index-divclass.html
97 lines (80 loc) · 4.48 KB
/
index-divclass.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
<!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>Tour Blog</title>
<style>
.author-name{
font-size: 20px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.real{
background: midnightblue;
color: white;
}
.blog{
background-color: orange;
border: 5px solid rgba(14, 243, 6, 0.836);
border-radius: 16px;
/*margin: 50px 30px;*/
padding: 10px 30px;
width: 50%;
margin: 50px auto;
}
.blog-title{
text-align: center;
font-size: 2em;
font-weight: 100;
font-family: Arial, Helvetica, sans-serif;
}
.blog p{
text-align: justify;
}
.akk{
display: block;
}
.duii{
display: inline;
}
.hwv{
border-radius: 50% 15% 15% 50% / 50% 0% 0% 50%;
padding-left: 300px;
}
</style>
</head>
<body>
<marquee class="real" behavior="alternate" direction="right"><h1>Welcome to Canada</h1></marquee>
<br><br><br>
<div class="blog">
<h3 class="blog-title">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
<small>optio inventore: <span class="real">natus illum. Maxime rerum distinctio</span></small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod dolorem ex, optio inventore natus illum. Maxime rerum distinctio modi consequuntur? Tempora commodi minima facilis praesentium voluptatibus. Nam adipisci corrupti ducimus! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident error ea, excepturi quae ipsa deserunt dolorum. Deserunt est fuga rerum, quaerat cumque alias? Dolorum, quaerat aspernatur omnis numquam itaque quia?</p>
</div>
<div class="blog">
<h3 class="blog-title">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
<small>optio inventore: <span class="author-name real">natus illum. Maxime rerum distinctio</span></small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod dolorem ex, optio inventore natus illum. Maxime rerum distinctio modi consequuntur? Tempora commodi minima facilis praesentium voluptatibus. Nam adipisci corrupti ducimus! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident error ea, excepturi quae ipsa deserunt dolorum. Deserunt est fuga rerum, quaerat cumque alias? Dolorum, quaerat aspernatur omnis numquam itaque quia?</p>
</div>
<div class="blog">
<h3 class="blog-title">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
<small>optio inventore: <span class="real">natus illum. Maxime rerum distinctio</span></small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod dolorem ex, optio inventore natus illum. Maxime rerum distinctio modi consequuntur? Tempora commodi minima facilis praesentium voluptatibus. Nam adipisci corrupti ducimus! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident error ea, excepturi quae ipsa deserunt dolorum. Deserunt est fuga rerum, quaerat cumque alias? Dolorum, quaerat aspernatur omnis numquam itaque quia?</p>
</div>
<br><br><br>
<b class="akk">This is an Inline tag</b>
<b class="akk">This is also Inline</b>
<b class="akk">This is Inline tag too</b>
<br><br><br>
<h2 class="duii">This is a Blog element.</h2>
<h2 class="duii">This is also Blog element.</h2>
<h2 class="duii">This is Bloge element too.</h2>
<br><br><br>
<div class="blog hwv">
<h3 class="blog-title">Lorem ipsum dolor sit amet consectetur adipisicing elit</h3>
<small>optio inventore: <span class="author-name real">natus illum. Maxime rerum distinctio</span></small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod dolorem ex, optio inventore natus illum. Maxime rerum distinctio modi consequuntur? Tempora commodi minima facilis praesentium voluptatibus. Nam adipisci corrupti ducimus! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident error ea, excepturi quae ipsa deserunt dolorum. Deserunt est fuga rerum, quaerat cumque alias? Dolorum, quaerat aspernatur omnis numquam itaque quia?</p>
</div>
</body>
</html>