project-HTML-CSS/index.html at main · Abdulhafeez012/project-HTML-CSS · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width", initial-scale=1.0>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link href="./resources/CSS/index.css" type="text/css" rel="stylesheet">
        <title>Ezo-Headset</title>
    </head>
    <body>
        <header class="Page-Header">
            <logo id="logo">
                <img src="./resources/Color logo - no background.svg" width="100px" height="100px">
            </logo>
            <h1 id="Title-header">listen B-Careful</h1>
            <button id="Button-Header"><span>Listen Here</span></button>
        </header>
        <main class="Page-main">
            <aside class = "side-bar-main">
                <section class="first-list-items">
                    <ul  id = "list-items">
                        <button id="button-items"><span>List Of Headphones</span></button><br><br>
                        <p id="Sony">SONY</p>
                        <span id ="Sony-list">
                            <nav><a href="https://electronics.sony.com/audio/headphones/headband/p/mdrzx310ap-b" target="_blank">MDR-ZX310AP</a></nav><br>
                            <nav><a href="https://electronics.sony.com/audio/speakers/360-reality-audio/p/whxb900n-b" target="_blank">WH-XB900N</a></nav><br>
                            <nav><a href="https://electronics.sony.com/audio/headphones/headband/p/whxb700-b" target="_blank">WH-XB700</a></nav><br>
                            <nav><a href="https://electronics.sony.com/audio/headphones/all-headphones/p/whch510-b" target="_blank">WH-CH510</a></nav><br>
                            <nav><a href="https://electronics.sony.com/audio/headphones/all-headphones/p/wh1000xm3-b" target="_blank">WH-1000XM3</a></nav><br>
                        </span>
                        <p id="beats">BEATS</p>
                        <span id = "Beats-list">
                            <nav><a href="https://www.beatsbydre.com/earbuds/beats-fit-pro" target="_blank">Beats Fit Pro</a></nav><br>
                            <nav><a href="https://www.beatsbydre.com/earphones/studio-buds" target="_blank">Beats Studio Buds</a></nav><br>
                            <nav><a href="https://www.beatsbydre.com/earphones/beats-flex" target="_blank">Beats Flex</a></nav><br>
                            <nav><a href="https://www.beatsbydre.com/headphones/solo3-wireless" target="_blank">Beats Solo<sup>3</sup>&nbsp;Wireless</a></nav><br> <!-- This shortcut {&nbsp;} for space between words -->
                            <nav><a href="https://www.beatsbydre.com/headphones/studio3-wireless" target="_blank">Beats Studio<sup>3</sup>&nbsp;Wireless</a></nav><br>
                        </span>
                        <p id="razer">RAZER</p>
                        <span id="Razer-list">
                            <nav><a href="https://www.razer.com/mobile-headsets/Razer-Opus/RZ04-02490111-R3M1" target="_blank">Razer x <sup>*</sup>A Bathing Ape<sup>®</sup> Opus</a></nav><br>
                            <nav><a href="https://www.razer.com/gaming-headsets/Razer-Nari/RZ04-02680100-R3U1" target="_blank">Razer Nari</a></nav><br>
                            <nav><a href="https://www.razer.com/gaming-headsets/Razer-Kraken-V3-Pro/RZ04-03460100-R3U1" target="_blank">Razer Kraken V3 Pro</a></nav><br>
                            <nav><a href="https://www.razer.com/gaming-headsets/Razer-BlackShark-V2-X/RZ04-03240600-R3U1" target="_blank">Razer BlackShark V2 X - Green</a></nav><br>
                        </span>
                    </ul>
                </section>
            </aside>
            <article class="article-main">
                <section class="section1-article">
                    <img id="image-article" src="./resources/article-image-with-no-background.png">
                    <h2 id="Head-article"><stroge>Sound you can believe in</stroge></h2>
                    <p id="Par-article">
                        A built-in analog amplifier integrated in the HD Noise-Canceling Processor
                        QN1 realizes an unmatched signal-to-noise ratio for low distortion and exceptional
                        sound quality for portable devices. Powerful 1.57" drivers, with Liquid Crystal Polymer (LCP) diaphragms,
                        make the headphones perfect for handling heavy beats and can reproduce a full
                    </p>
                </section>
            </article>
            <form class="form-page">
                  <textarea placeholder="Your Text here"></textarea><br><br>
                <span class="color-text">
                    <label for="color-text">select the color text:&nbsp;</label>
                    <input type="color" id="color-text" name="color-text" value="#FFFAFA"><br>
                </span>
                <br>
                <span class="size-text">
                    <input type="number" id="size-text" name="size" placeholder="&nbsp;Size Of Text In Pixels"><br>
                </span>
                <br>
                <span class="repeat-text">
                    <input type="number" id="repeat-text" name="repeat" placeholder="&nbsp;Number Of Text Repeat"><br>
                </span><br>
                <input type="submit" id ="submit-form" value="submit">
            </form>
            <aside class="display-area">

            </aside>
        </main>
        <footer class="footer-page">
            <h3 id="head-footer">© All Rights Reserved</h3>
        </footer>
    </body>
</html>