reList-page/index.html at main · msonnino/reList-page · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>reList - Playlist Converter</title>
  <!-- CSS Stylesheets -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

  <!-- Font Awesome Icons -->
  <script src="https://kit.fontawesome.com/347a6072e0.js" crossorigin="anonymous"></script>

  <!-- Bootstrap Scripts -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>

  <section id="title" class="colored-section">
    <div class="container-fluid">

      <!-- Nav Bar -->
      <nav class="navbar navbar-expand-lg navbar-dark">
        <img class="logo-image" src="images/reList-icon.svg" alt="relist-logo-icon">
        <a class="navbar-brand" href="">reList</a>
      </nav>


      <!-- Title -->

      <div class="row">
        <div class="col-lg-6">
          <h1 class="big-heading">Your Music Playlist Converter</h1>
          <p>reList lets you transfer your favorite music playlist between different music streaming services.</p>
          <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
        </div>
        <div class="col-lg-6">
          <img class="title-image" src="images/title-image.svg" alt="transfer-streaming-services">
        </div>
      </div>

    </div>

  </section>


  <!-- Demo -->

  <section id="features" class="white-section">
    <div class="container-fluid">

      <div class="row">


        <div class="feature col-lg-6">
          <div class="iphone-x">
          </div>
        </div>

        <div class="feature col-lg-6" align="left">
          <h2>Simple and Easy! Just:</h2>
          <br>
          <h3 class="feature-title">1. Log in to your music streaming services.</h3>
          <br>
          <h3 class="feature-title">2. Choose a playlist to convert.</h3>
          <br>
          <h3 class="feature-title">3. Done!</h3>


        </div>

      </div>

    </div>

  </section>


  <!-- Call to Action -->

  <section id="cta" class="colored-section">
    <div class="container-fluid">

      <h1 class="big-heading">Get Your Groove On.</h1>
      <button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i> Download</button>
    </div>
  </section>


  <!-- Footer -->

  <footer id="footer" class="white-section">
    <div class="container-fluid">


      <p>© Made by mSonnino <a href="mailto:msonnino@gmail.com">
        <i class="footer-social-icon fas fa-envelope"></i>
      </a> </p>

    </div>
  </footer>


</body>

</html>