musicteacher/index.html at main · webpointco/musicteacher · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Padmanabhan S.</title>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="images/favicon.png">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles/main.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Proza+Libre:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/7dc3015a44.js" crossorigin="anonymous"></script><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css" media="all"><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-font-face.min.css" media="all"><link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free-v4-shims.min.css" media="all">
</head>

<body>

<!-- Navbar Stuff -->
<nav class="navbar navbar-custom navbar-expand-lg navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"></a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link" href="#about">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#listen">My Performances</a>
        </li>
        <li class="nav-item">
          <form class="form-inline my-2 my-lg-0">
            <a class="btn btn-outline-success my-2 my-sm-0" id="contactbutton" href="#contact">Contact Me</a>
          </form>
        </li>
      </ul>
    </div>
  </div>
</nav>

    <!-- Home -->

    <div class="jumbotron" id="about">
      <div class="container">
        <div class="row about-row align-items-center justify-content-center">
          <div class="col-md-6 col-md-pull-5 text-container my-auto col1">
            <h1 class="about-header">Namaste</h1>
            <p class="first-paragraph" style="line-height: 1.5;">My name is Padmanabhan S. I am a Carnatic vocal artist, Gana Praveen (7 year course) in music from <a target="_blank" href="http://www.swathithirunal.in/rel_akademi.htm"class="text-link">Sree Swathi Thirunal College of Music</a> at Trivandrum, India.
            </p>
            <a class="top-social" href="https://www.facebook.com/padmanabhan.pathu.5" target="_blank"><i style="font-size: 1.5em;" class="fab fa-facebook fa-2x"></i></a>
            <a class="top-social" href="mailto:pathu010@gmail.com" target="_blank"><i style="font-size: 1.5em;" class="fas fa-envelope-square fa-2x"></i></a>
          </div>
          <div class="col-md-6 col-md-push-6 my-auto center-block align-items-center justify-content-center col2" align="center">
            <img src="images/homeimage.png" class="img-fluid image-center" alt="...">
          </div>
        </div>
      </div>
    </div>

    <div class="jumbotron2">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col my-auto">
            <h1 class="contact-header">What do I do?</h1>
            <h2 class="what-do-i-do-text" style="line-height: 1.5;">I am very passionate about music and have decades of experience teaching music for students at all levels. I teach individual and
              group classes and am flexible on the time. I am also the Mullamood Bhagavathar on behalf of the Travancore palace and Navarathri trust for the iconic <a class="text-link" target="_blank" href="https://spst.in/">
                Sree Padmanabha Swamy temple</a> in Trivandrum.
              </h2>
              <h2 class="what-do-i-do-text" style="line-height: 1.5;">
                <span class="contact-sentence">If anyone is interested in learning music, please contact me at: </br> <i class="fas fa-mobile-alt"></i> &nbsp;&nbsp;91 9495392708 (Within India)
                </br><i class="fab fa-whatsapp"></i> &nbsp;91 9400070948 (for WhatsApp)</span>
              </h2>
            <div class="video-row row" id="listen">
              <div class="video-col my-auto center-block align-items-center justify-content-center col-lg-6" align="center">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item vid1" src=" https://www.youtube.com/embed/57FUcCiBJp8"></iframe>
                </div>
              </div>
              <div class="video-col my-auto center-block align-items-center justify-content-center col-lg-6" align="center">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item vid1" src=" https://www.youtube.com/embed/YhyuXRAv15Q"></iframe>
                </div>
              </div>
            </div>
            <!-- <div class="video-row row" id="listen">
              <div class="video-col my-auto center-block align-items-center justify-content-center col-lg-6" align="center">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe class="embed-responsive-item vid1" src=" https://www.youtube.com/embed/57FUcCiBJp8"></iframe>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="jumbotron2">
      <div class="container" id="contact">
        <div class="row justify-content-center">
          <div class="col my-auto">
            <form action="https://formsubmit.co/pathu010@gmail.com" method="POST" class="contact-form">
              <h1 class="contact-header">Get In Touch.</h1>
              <input type="hidden" name="_captcha" value="false">
              <p class="form-label">Full Name</p>
              <input class="form-input" type="text" placeholder="Enter your Full Name" name="Name" required>

              <p class="form-label">Email Address</p>
              <input class="form-input" type="text" placeholder="Enter your Email" name="Email" required>

              <p class="form-label">Message</p>
              <textarea id="form-textarea" name="Message" placeholder="Feel Free to Leave me a Message Here!" id="" cols="30" rows="6"></textarea>
              <button type = "submit" class="submit-btn">Send Message</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    </body>

</html>