Web_Dev_Code/blog.html at master · Madhav-Jindal/Web_Dev_Code · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body{
            border: 20px solid #bdc3c7;
            padding: 20px;
            max-width: 700px;
            width: 80%;
            margin: auto;
            font-family: Source Sans Pro;
        }

       h2{
           font-weight: 700;
           columns: #2c3e50;
           text-transform: capitalize;
           font-size: 2rem;
       }
       .quote{
            border-left: 5px solid #bdc3c7 ;
            padding-left: 5px;
       }
       .date{
           color: rgb(96, 166, 194);
           text-transform: uppercase;
           letter-spacing:0.2rem;


       }
       .post{
           margin-bottom: 20px;
       }
       hr {
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
}
hr:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}
    </style>
</head>
<body>
    <div class="post">
        <div class="date">July 11 2020</div>
        <h2>This is my first article</h2>
         <div class="quote">
             <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati rerum accusantium minima sequi repellendus eaque tempore voluptate natus iusto nostrum totam sunt itaque provident deserunt, mollitia cumque odit. Unde, eveniet.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium voluptates saepe, voluptatem reiciendis accusamus dignissimos doloremque modi odio, vel quis, beatae molestias provident illum quisquam illo quibusdam. Exercitationem, enim.
            </p>
        </div>
            <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati rerum accusantium minima sequi repellendus eaque tempore voluptate natus iusto nostrum totam sunt itaque provident deserunt, mollitia cumque odit. Unde, eveniet.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium voluptates saepe, voluptatem reiciendis accusamus dignissimos doloremque modi odio, vel quis, beatae molestias provident illum quisquam illo quibusdam. Exercitationem, enim.
            </p>
            <hr>
    </div>
    <div class="post">
        <div class="date">July 11 2020</div>
        <h2>This is another post</h2>
         <div class="quote">
             <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati rerum accusantium minima sequi repellendus eaque tempore voluptate natus iusto nostrum totam sunt itaque provident deserunt, mollitia cumque odit. Unde, eveniet.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium voluptates saepe, voluptatem reiciendis accusamus dignissimos doloremque modi odio, vel quis, beatae molestias provident illum quisquam illo quibusdam. Exercitationem, enim.
            </p>
        </div>
            <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Obcaecati rerum accusantium minima sequi repellendus eaque tempore voluptate natus iusto nostrum totam sunt itaque provident deserunt, mollitia cumque odit. Unde, eveniet.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem laudantium voluptates saepe, voluptatem reiciendis accusamus dignissimos doloremque modi odio, vel quis, beatae molestias provident illum quisquam illo quibusdam. Exercitationem, enim.
            </p>
            <hr>
    </div>
</body>
</html>