HTML_Challenge/Rana HTML_3.html at master · Rananemer08/HTML_Challenge · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rana HTML_3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
             <div class="first-block>

          <img src= "Pasted image.png" alt="Glob">
            <h1>The Page Title</h1>
            <p>The Site Slogan</p>

        </header>
        <nav class="nav-section">
            <ul class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">New Page 1</a></li>
                <li><a href="">New Page 2</a></li>
                <li><a href="">New Page 3</a></li>
                <li><a href="">New Page 4</a></li>
            </ul>
        </nav>
    </div>
        <main>
        <div class="sidebar">
        <div class="Menu_paragraph">
            <h2>Main Menu</h2>
            <ul>
                <li>Menu Item 1</li>
                <li>Menu Item 2</li>
                <li>Menu Item 3</li>
                <li>Menu Item 4</li>
                <li>Menu Item 5</li>
                <li>Menu Item 6</li>
                <li>Menu Item 7</li>
                <li>Menu Item 8</li>
                <li>Menu Item 9</li>
            </ul>
        </div>
        <div class="Block_paragraph">
            <h2>Block</h2>
            <p>Enter Block content </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna  at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus volutpat nisi facilisis eros aliquet molestie. Fusce feugiat eros a nulla lobortis maximus.Morbi metus felis, efficitur at pharetra in, tincidunt at est. Nam non lectus tortor. </p>
        </div>
        </div>
        <div>
            <article class="gallery">
                <h1>Gallery</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna finibus lobortis a at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis. Praesent a nunc vel purus aliquet dapibus nec id enim. Etiam metus lorem, dictum quis ullamcorper aliquet, malesuada tincidunt sapien. Nulla felis risus, feugiat quis laoreet sit amet, elementum a nunc. Sed venenatis neque sit amet fermentum commodo. Sed eu ornare nibh. Nullam semper vitae dui vitae tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sed aliquam mauris. Phasellus volutpat nisi facilisis eros aliquet molestie.

                    Fusce feugiat eros a nulla lobortis maximus. Morbi metus felis, efficitur at pharetra in, tincidunt at est. Nam non lectus tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut turpis in ante sodales gravida. Vestibulum ut neque vitae leo vulputate imperdiet eget vel.
                </p>
                </article>
                <div class="flex-template">
                <div class="subscription">
                    <h1>Subscription</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna finibus lobortis a at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis. Praesent a nunc vel purus aliquet dapibus nec id enim. Etiam metus lorem, dictum quis ullamcorper aliquet, malesuada tincidunt sapien. Nulla felis risus, feugiat quis laoreet sit amet, elementum a nunc. Sed venenatis neque sit amet fermentum commodo. Sed eu ornare nibh. Nullam semper vitae dui vitae tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sed aliquam mauris. Phasellus volutpat nisi facilisis eros aliquet molestie.

                        Fusce feugiat eros a nulla lobortis maximus. Morbi metus felis, efficitur at pharetra in, tincidunt at est. Nam non lectus tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut turpis in ante sodales gravida. Vestibulum ut neque vitae leo vulputate imperdiet eget vel.
                    </p>
                    <button class="read-more">Read more</button>

                </div>
                <div class="Other_services">
                    <h1>other Services</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et risus sit amet urna finibus lobortis a at ligula. Praesent lacinia mi non enim dictum, eu fringilla turpis finibus. Proin non turpis id nunc mattis accumsan ac eget felis. Praesent a nunc vel purus aliquet dapibus nec id enim. Etiam metus lorem, dictum quis ullamcorper aliquet, malesuada tincidunt sapien. Nulla felis risus, feugiat quis laoreet sit amet, elementum a nunc. Sed venenatis neque sit amet fermentum commodo. Sed eu ornare nibh. Nullam semper vitae dui vitae tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc sed aliquam mauris. Phasellus volutpat nisi facilisis eros aliquet molestie.

                        Fusce feugiat eros a nulla lobortis maximus. Morbi metus felis, efficitur at pharetra in, tincidunt at est. Nam non lectus tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent ut turpis in ante sodales gravida. Vestibulum ut neque vitae leo vulputate imperdiet eget vel.
                    </p>
                    <button class="read-more">Read more</button>

                </div>
        </div>
    </div>
            </main>
            <footer class="footer">
                <p>Copyright &copy 2014.</p>

            </footer>
            <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required><br><br>

                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required><br><br>

                <label for="message">Message:</label>
                <textarea id="message" name="message"  required></textarea><br><br>

                <label>Feedback Type:</label><br><br>
                <input type="radio" id="complaint" name="radio" value="complain" required>
                <label for="complaint">Complaint</label><br><br>
                <input type="radio" id="suggestion" name="radio" value="suggestion" required>
                <label for="suggestion">Suggestion</label><br><br>

                <input type="submit" value="Submit">
              </form>
</body>
</html>