Task1/project.html at main · Varunteja7/Task1 · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="project.css" />
    <title>Document</title>
  </head>
  <body>
    <!-- Header Part -->
    <div class="outer">
      <div class="inner">
        <h2>News Blog</h2>
        <h4>World Wide news</h4>
      </div>
    </div>
    <br />

    <!-- Form part -->
    <div class="form">
      <div class="box1">
        <h5>Select Category</h5>
        <select name="all" id="all">
          <option value="All" selected>All</option>
          <option value="All">Local</option>
          <option value="All">National</option>
          <option value="All">International</option>
        </select>
      </div>

      <div class="box2">
        <h2>All News</h2>
      </div>

      <div class="box3">
        <!-- <label for="email">Subscribe</label> -->
        <h5>Subscribe</h5>
        <input type="email" id="email" placeholder="email address" />
        <button id="btn">Subscribe</button>
      </div>
    </div>

    <div class="line"></div>

    <!-- Cards part -->

    <div class="card-container">
      <div class="card">
        <img src="image.png" alt="Image 1" />
        <div class="card-content">
          <h3>Card Title 1</h3>
          <h5>Posted On June 29</h5>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Voluptatum, quasi provident natus vero officiis aspernatur dolorem
            numquam minima rem. Voluptatem, nulla. Blanditiis eos veniam quae
            doloremque officiis debitis quisquam? Earum rerum dolorem aliquid.
            Possimus molestias expedita tempora cum dolore perferendis.
          </p>
          <!-- <button class="button">Read More</button> -->
          <a href="https://google.com" target="blank">Read More</a>
        </div>
      </div>
      <div class="line1"></div>
      <div class="card">
        <img src="image.png" alt="Image 1" />

        <div class="card-content">
          <h3>Card Title 2</h3>
          <h5>Posted On June 29</h5>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Voluptatum, quasi provident natus vero officiis aspernatur dolorem
            numquam minima rem. Voluptatem, nulla. Blanditiis eos veniam quae
            doloremque officiis debitis quisquam? Earum rerum dolorem aliquid.
            Possimus molestias expedita tempora cum dolore perferendis.
          </p>
          <!-- <button class="button">Read More</button> -->
          <a href="https://google.com" target="blank">Read More</a>
        </div>
      </div>
      <div class="line1"></div>
      <div class="card">
        <img src="image.png" alt="Image 1" />
        <div class="card-content">
          <h3>Card Title 3</h3>
          <h5>Posted On June 29</h5>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Voluptatum, quasi provident natus vero officiis aspernatur dolorem
            numquam minima rem. Voluptatem, nulla. Blanditiis eos veniam quae
            doloremque officiis debitis quisquam? Earum rerum dolorem aliquid.
            Possimus molestias expedita tempora cum dolore perferendis.
          </p>
          <!-- <button class="button">Read More</button> -->
          <a href="https://google.com" target="blank">Read More</a>
        </div>
      </div>
    </div>
  </body>
</html>