EarBot/connect.html at main · dev7060/EarBot · 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
150
151
152
153
154
155
156
157
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>EarBot</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg bg-dark text-white">
        <a class="navbar-brand text-danger" href="#">Ear<span class="text-secondary">Bot</span></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link text-white" href="#">Audio Products <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  text-white" href="#">Connect</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  text-white" href="#">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  text-white" href="#">Support</a>
                </li>
            </ul>
        </div>
    </nav>

    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="workplace-2303851_1920.jpg" alt="First slide" style="height: 400px;">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="workplace-2303851_1920.jpg" alt="Second slide" style="height: 400px;">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="workplace-2303851_1920.jpg" alt="Third slide" style="height: 400px;">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <div class="row bg-secondary p-5">
        <div class="col-lg-12 col-md-12 col-12 text-center">
            <p>SPACESHIP GRADE ALUMINUM CASING ENSURES LONG-LASTING DURABILITY AND RELIABLE CHARGING.</p>
        </div>
    </div>

    <div class="row p-5">
        <div class="col-lg-12 col-md-12 col-12 text-left">
            <h3>Philips SHL3060BK</h3>
            <p>This DJ inspired headphone produces powerful sound and bass. The design with rotatable soft ear cups you enjoy on the go a perfect listening experience.</p>
            <img src="workplace-2303851_1920.jpg" alt="First slide" style="height: 200px; width: 350px;">
        </div>
    </div>
    <div class="row pl-5">
        <div class="col-lg-12 col-md-12 col-12 text-left">
            <h3>Philips SHL3060BK</h3>
            <p>This DJ inspired headphone produces powerful sound and bass. The design with rotatable soft ear cups you enjoy on the go a perfect listening experience.</p>
            <img src="workplace-2303851_1920.jpg" alt="First slide" style="height: 200px; width: 350px;">
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12 col-md-12 col-12 text-center">
            <h2 class="mt-2 mb-2">Image Gallery</h1>
        </div>
    </div>
    <div class="row mt-3 ml-1 mr-1">

        <div class="col-lg-4 col-md-4 col-4">
            <img class="w-100" src="workplace-2303851_1920.jpg" alt="First slide" style="height: 250px;">
        </div>
        <div class="col-lg-4 col-md-4 col-4">
            <img class="w-100" src="workplace-2303851_1920.jpg" alt="First slide" style="height: 250px;">
        </div>
        <div class="col-lg-4 col-md-4 col-4">
            <img class="w-100" src="workplace-2303851_1920.jpg" alt="First slide" style="height: 250px;">
        </div>
    </div>
    <div class="row mt-2 ml-2">
        <div class="col-lg-6 col-md-6 col-6 mt-2 text-left">
            <h4>Colors</h4>
            <p>
                <small>
                    If you’re looking for an easy way to transform your mood, cue the music. Studies have shown that
                    music can buoy your mood and fend off depression. It can also improve blood flow in ways similar to
                    statins, lower your levels of stress-related hormones like cortisol and ease pain. Listening to
                    music before an operation can even improve post-surgery outcomes.
                </small>
            </p>
        </div>

        <div class="col-lg-6 col-md-6 col-6 mt-2 text-left">
        </div>
    </div>

    <div class=" row mt-2">
        <div class="col-lg-12 col-md-12 col-12 p-0 m-0 mt-2 text-center">
            <h3 class="text-secondary">WE ARE SOCIAL</h3>
        </div>
    </div>
    <div class=" row m-0">
        <div class="col-lg-12 col-md-12 col-12 p-0 m-0 mt-2 text-center">
            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                    class="bi bi-trophy-fill" viewBox="0 0 16 16">
                    <path
                        d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935z" />
                </svg></a>

            <a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
                    class="bi bi-trophy-fill" viewBox="0 0 16 16">
                    <path
                        d="M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5c0 .538-.012 1.05-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33.076 33.076 0 0 1 2.5.5zm.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935zm10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935z" />
                </svg></a>

        </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>