band/band.html at master · viveksgl/band · 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
<!doctype html>
<html lang="en">
<head>
    <title>New Band</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        .container {
            padding: 80px 120px;
        }
        .person {
            border: 10px solid transparent;
            margin-bottom: 25px;
            width: 80%;
            height: 80%;
            opacity: 0.7;
                }
            .person:hover {
             border-color: #f1f1f1;
                }

            .carousel-inner img {
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */
    width: 50%; /* Set width to 100% */
    margin: auto;
}

.carousel-caption h3 {
    color: #fff !important;
}

@media (max-width: 100px) {
    .carousel-caption {
        display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
    }
}
    </style>

</head>
    <body>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicator-->
            <ol class="carousel-indicastors">
                <li data-target="#myCarousal" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>

            </ol>
             <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="book%201.jpg" alt="New York">
      <div class="carousel-caption">
        <h3>New York</h3>
        <p>The atmosphere in New York is lorem ipsum.</p>
      </div>
    </div>

    <div class="item">
      <img src="uoh%20logo.jpg" alt="Chicago">
      <div class="carousel-caption">
        <h3>Chicago</h3>
        <p>Thank you, Chicago - A night we won't forget.</p>
      </div>
    </div>

    <div class="item">
      <img src="story%20book.jpg" alt="Los Angeles">
      <div class="carousel-caption">
        <h3>LA</h3>
        <p>Even though the traffic was a mess, we had the best time.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

        </div>

    <div class="container text-center">
    <h3>THE BAND BY VIVEK SINGHAL</h3>
        <P>WE LOVE MUSIC</P>
        <P>We have created a fictional band website. Lorem ipsum..</P>
        <br>
        <div class="row">
            <div class="col-sm-4">
                <p class="text-center"><strong>Name</strong></p><br>
                <a href="#demo" data-toggle="collapse">
                <img class="img-circle person" src="book%201.jpg" alt="Ramdom name">
                </a>
                 <div id="demo" class="collapse">
                     <p>Guitarist and Lead Vocalist</p>
                     <p>Loves long walks on the beach</p>
                     <p>Member since 1988</p>
                </div>

            </div>
            <div class="col-sm-4">
                 <p class="text-center"><strong>Name</strong></p><br>
                    <a href="#demo2" data-toggle="collapse">
                 <img class="img-circle person" src="book%201.jpg" alt="Random Name">
                </a>
                <div id="demo2" class="collapse">
                    <p>Drummer</p>
                    <p>Loves drummin'</p>
                    <p>Member since 1988</p>
                </div>

            </div>
            <div class="col-sm-4">
                 <p class="text-center"><strong>Name</strong></p><br>
                 <a href="#demo3" data-toggle="collapse">
                 <img class="img-circle person" src="disney%20book.jpg" alt="Random Name">
                </a>
                  <div id="demo3" class="collapse">
                      <p>Bass player</p>
                      <p>Loves math</p>
                      <p>Member since 2005</p>
                </div>

            </div>

        </div>
    </div>
    </body>


</html>