HTML-Challenge/Maher-HTML-3.html at master · halawimaher/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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/level3.css" />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Linux</title>
  </head>
  <body>
    <div id="web">
      <header role="banner">
        <div class="logo">
          <img
            src="https://cdn.discordapp.com/attachments/752787012477780018/758259026772492318/html3.png"
            alt="Linux Penguin Logo"
            width="600px"
            class="linux-logo"
          />
          <h3 class="slogan"><em>Maher's Website</em></h3>
        </div>
        <br />
        <nav>
          <ul class="navbar">
            <li>Home</li>
            <hr />
            <li>Contact</li>
            <hr />
            <li>More Distros</li>
            <hr />
            <li>News</li>
            <hr />
            <li>History</li>
          </ul>
        </nav>
      </header>
      <br />
      <main role="main">
        <section class="one">
          <div class="distros">
            <h3>Famous Distros</h3>
            <br />
            <ul>
              <li><a href="#">Ubuntu</a></li>
              <li><a href="#">Arch</a></li>
              <li><a href="#">Fedora</a></li>
              <li><a href="#">RedHat</a></li>
            </ul>
          </div>
          <div class="de">
            <h3>Famous DEs</h3>
            <br />
            <hr />
            <br />
            <p>
              A desktop environment is the bundle of components that provide you
              common graphical user interface (GUI) elements such as icons,
              toolbars, wallpapers, and desktop widgets. Thanks to the desktop
              environment, you can use Linux graphically using your mouse and
              keyboard like you do in other operating systems like Windows and
              macOS. There are several desktop environments and these desktop
              environments determines what your Linux system looks like and how
              you interact with it.
            </p>
          </div>
        </section>
        <br />
        <section class="two">
          <div class="adv">
            <h3>Advantages</h3>
            <br />
            <p>
              Many linux advantages can be listed but I'll be talking only about
              the personal freedom that linux de's present.
            </p>
          </div>
          <div class="subs">
            <h3>Subscriptions</h3>
            <br />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
              Assumenda asperiores, blanditiis pariatur, fuga ab hic ex magnam
              dolore sunt cumque fugiat facere similique voluptatum sit error
              porro sint, ad quae?
            </p>
            <br />
            <button>Read more</button>
          </div>
          <hr />
          <div class="serv">
            <h3>Other Services</h3>
            <br />
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia
              nemo provident voluptates aliquam maiores, numquam, est aut
              asperiores dicta quo modi placeat vero in rerum sed minus itaque
              non reiciendis!
            </p>
            <br />
            <button>Read more</button>
          </div>
        </section>
        <br />
        <div class="form">
            <form action="">
              <label for="name">Name</label>
              <input type="text" name="Name" id="name" required /><br />
              <label for="email">Email</label>
              <input type="email" name="Email" id="email" required /><br />
              <label for="tel">Telephone</label>
              <input type="tel" name="Tel-Nb" id="tel" /><br />
              <label for="rev">Your Review :</label>
              <textarea
                name="Suggestions"
                id="rev"
                cols="50"
                rows="10"
                placeholder="Let me know your thoughts"
                required
              ></textarea>

              <p>Would you recommend Linux to a friend?</p>
              <div class="choice">
                <div class="choices">
                  <label for="yes"><em>Yes</em> </label>
                  <input type="radio" name="Choice" id="yes" checked />
                </div>
                <div class="choices">
                  <label for="no"> <em>No</em> </label>
                  <input type="radio" name="Choice" id="no" />
                </div>
              </div>

              <button type="submit">Submit</button>
            </form>
          </div>
        </main>
        <hr />
        <footer>
            <a href="https://www.facebook.com/MercedesBenz" target="blank" class="fa fa-facebook"></a>
            <a href="https://twitter.com/mercedesbenz" target="blank" class="fa fa-twitter"></a>
            <a href="https://www.youtube.com/user/MercedesBenzTV" target="blank" class="fa fa-youtube"></a>
            <a href="https://www.instagram.com/mercedesbenz/" target="blank" class="fa fa-instagram"></a>
            <a href="https://www.pinterest.com/MercedesBenz/" target="blank" class="fa fa-pinterest"></a>
        </footer>
      </div>
    </body>
  </html>