BandSite/index.html at main · Sepehr-Sobhani/BandSite · 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>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href="./styles/main.css" rel="stylesheet"/>
    <title>Biography</title>
</head>
<body>
<header class="page-head">

    <a class="logo container" href="index.html">
        <img alt="band logo" src="./assets/Logo/Logo-bandsite.svg">
    </a>
    <nav class="nav">
        <ul class="nav__list">
            <li class="nav__item active"><a class="nav__link" href="#">Biography</a></li>
            <li class="nav__item inactive "><a class="nav__link" href="/pages/shows.html">Shows</a></li>
        </ul>
    </nav>

</header>
<main>
    <section class="banner">
        <h1 class="banner__text container">Gaspard Auge &<br/> Xavier de Rosnay</h1>
    </section>

    <section class="about container">
        <h2 class="about__header">About The Musicians</h2>

        <img alt="singer" class="about__img secondcontainer" src="./assets/Images/singer3.jpg">

        <article>
            <h3 class="about__top secondcontainer">
                “We are more comfortable with not
                fighting what comes naturally. Before
                we might have thought, ‘We need to
                be smarter than this’”
            </h3>
            <h3 class="about__mid secondcontainer">- Xavier de Rosnay</h3>
            <h3 class="about__bottom secondcontainer">Xavier de Rosnay & Gaspard Augé</h3>
            <div class="about__content secondcontainer">
                <p class="about__first">
                    Xavier De Ronsay and Gaspard Augé had a few
                    mutual friends, who happened to run a record label,
                    seeking tracks for a compilation. With an immediate
                    connection, the pair decided to try their hand at
                    making a song. That’s when they created their
                    breakout single, We Are Your Friends – a feel-good,
                    funk-filled, instant anthem that lost the remix
                    contest, but won the attention of Pedro Winter,
                    director of the newly founded Ed Banger Records,
                    who boasted Daft Punk as former clients. One week
                    later, they were in his office, signing a record deal.
                </p>
                <p class="about__second">
                    Xavier De Ronsay and Gaspard Augé had a few
                    mutual friends, who happened to run a record label,
                    seeking tracks for a compilation. With an immediate
                    connection, the pair decided to try their hand at
                    making a song. That’s when they created their
                    breakout single, We Are Your Friends – a feel-good,
                    funk-filled, instant anthem that lost the remix
                    contest, but won the attention of Pedro Winter,
                    director of the newly founded Ed Banger Records,
                    who boasted Daft Punk as former clients. One week
                    later, they were in his office, signing a record deal.
                </p>
            </div>
        </article>
    </section>
    <div class="gallery">
        <section class="container">
            <h2 class="gallery__header">Photo Gallery</h2>
            <div class="gallery__imgs">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-1.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-2.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-3.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-4.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-5.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-6.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-7.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-8.jpg">
                <img alt="gallery photo" class="gallery__img" src="./assets/Images/Photo-gallery-9.jpg">
            </div>
        </section>
    </div>

    <section class="container">
        <h2 class="conversation__header">Join The Conversation</h2>
        <div class="conversation">
        <form action="GET" class="form__container conversation__form">
            <div class="conversation__img">

            <img class="conversation__photo" src="./assets/Images/Mohan-muruge.jpg">
            </div>
            <div class="conversation__content">
                <label class="conversation__labelTablet" for="name">NAME</label>
                <label class="conversation__labelMob" for="name">JOIN THE CONVERSATION</label>
                <input class="conversation__name" type="text" name="name" placeholder="Enter your name">
                <label class="conversation__nameLabel" for="comment">COMMENT</label>
                <textarea class="conversation__comment" name="comment" placeholder="Add a new comment"></textarea>
                <button class="conversation__button container" type="submit">COMMENT</button>
            </div>
        </form>

        <div class="comment">
            <ul class="comment__list"></ul>
        </div>
    </section>

</main>
<footer class="footer">
    <section class="footer__top container">
        <h2 class="footer__head">Get In Touch</h2>
        <section class="footer__icons">
            <img class="footer__icon" alt="instagram"  src="./assets/Icons/SVG/Icon-instagram.svg">
            <img class="footer__icon" alt="facebook" src="./assets/Icons/SVG/Icon-facebook.svg">
            <img class="footer__icon" alt="twitter" src="./assets/Icons/SVG/Icon-twitter.svg">
        </section>
        <div class="footer__logo">
            <img alt="logo" class="footer__brand" src="./assets/Logo/Logo-bandsite.svg">
        </div>
    </section>
    <section class="footer__content container">
        <div class="contactinfo ">
            <p class="contactinfo__name">Richard Rovner</p>
            <p class="contactinfo__title">The Bees Knees Management</p>
            <p class="contactinfo__address">460 King Street West<br/>
                Toronto, Ontario M5V 1L7</p>
            <p class="contactinfo__email"><a href="mailto:info@thebeesknees.com">info@thebeesknees.com</a></p>
        </div>
        <div class="contactinfo ">
            <p class="contactinfo__name">Marsha Vlasic</p>
            <p class="contactinfo__title">Artist Group International </p>
            <p class="contactinfo__address">Booking Agent for<br/>
                US / South America / Japan</p>
            <p class="contactinfo__email"><a href="mailto:marsha.vlasic@artistgrp.com">marsha.vlasic@artistgrp.com</a>
            </p>
        </div>
        <div class="contactinfo ">
            <p class="contactinfo__name">Russel Warby</p>
            <p class="contactinfo__title">William Morrir Entertainment </p>
            <p class="contactinfo__address">Booking Agent for<br/>
                UK / EU / AU</p>
            <p class="contactinfo__email"><a href="mailto:RLW@wmeentertainment.com">RLW@wmeentertainment.com</a></p>
        </div>
    </section>
    <div class="footer__copyright container">
        Copyright The Bees Knees © 2018 All Rights Reserved
    </div>

</footer>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="./scripts/index-page.js"></script>
</body>
</html>