sleeptrackerui/index.html at master · sleeptrackerteam/sleeptrackerui · 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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sleep Tracker</title>

  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="css/index.css">
  <script src="./components/panels.js" async></script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
  <div class="container">

    <header class="main-navigation">
      <nav class="nav">
        <a href="index.html">Home</a>
        <a href="About.html">About Us</a>
        <a href="https://sleeptracker123.netlify.com/">Register</a>
      </nav>
      <img class="logo" src="img\onlinelogomaker-041519-1606-0110_250x50.png" alt="Great Idea! Company logo.">
    </header>

    <section class="cta">
      <div class="cta-text">
        <h1>Use Sleep Tracker</h1>
        <button onclick="window.location.href = 'https://sleeptracker123.netlify.com/';">Login</button>
      </div>
      <!-- <img src="img/header-img.png" alt="Image of a code snippet."> -->
    </section>

    <section class="main-content">

      <div class="top-content">
        <div class="text-content">
          <h4>Insomnia?</h4>
          <p>Just as people have always slept, there has always been those who have had difficulty falling asleep. While electric lighting, bright screens, and the 24/7 society may be modern developments that can contribute to problems sleeping, insomnia is an age old problem.</p>
        </div>
        <div class="text-content">
          <h4>Sleep as a Necessity</h4>
          <p>As anyone would understand after dealing with the effects of sleep deprivation for any given period of time, sleep is something to be respected simply out of what it provides us. Not sleeping can cause all sorts of problems, affecting so many areas of our lives. Just the act of going out or even staying sane throughout the day is made immeasurably harder without a solid base of sleep.</p>
        </div>
      </div>

      <img class="middle-img" src="img\pexels-photo-935777_800x500.jpeg" alt="Image of code snippets across the screen">

      <!-- <div class="bottom-content">
        <div class="text-content">
          <h4>Product</h4>
          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
        </div>
        <div class="text-content">
          <h4>About</h4>
          <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
        </div>
      </div> -->

    </section>
    <section class="secondary">
      <div class="accordion">
        <div class="panel">
          <div class="panel-bar">
            <h3>Our Vision</h3>
            <div class="panel-buttons">
              <button class="panel-btn-open">Open</button>
              <button class="panel-btn-close hide-btn">Close</button>
            </div>
          </div>
          <div class="panel-content">
            <p>Our vision is to provide you with the information that you need to get the perfect amount of rest that is required to be the best you possible. Not everyone needs 8 hours of sleep, but how do you know if you’re someone lucky enough to need only 6? Or an unlucky one that needs 10?! Enter Sleep Tracker.</p>
          </div>
        </div><!-- end of panel -->
        <div class="panel">
          <div class="panel-bar">
            <h3>Our Product</h3>
            <div class="panel-buttons">
              <button class="panel-btn-open">Open</button>
              <button class="panel-btn-close hide-btn">Close</button>
            </div>
          </div>
          <div class="panel-content">
            <p>Sleep Tracker allows you to create a sleep entry for any date that you set. Once you have that sleep entry you'll be able to rate exatly how you felt when you woke up, as well as throughout the day. Were you tired? Grumpy? Hunkeydorey? After your entry is created we will calculate, behind the scenes, how many hours of sleep you should have each night. Remember, to get to your dream.. you have to sleep!</p>
          </div>
        </div><!-- end of panel -->
        <div class="panel">
          <div class="panel-bar">
            <h3>Mobile? Download the Android App</h3>
            <div class="panel-buttons">
              <button class="panel-btn-open">Open</button>
              <button class="panel-btn-close hide-btn">Close</button>
            </div>
          </div>
          <div class="panel-content">
            <p id="first">FIRST</p>
            <p>From your smartphone or tablet running Android 4.0 or higher, go to Settings, scroll down to Security, and select Unknown sources. Selecting this option will allow you to install apps outside of the Google Play store. Depending on your device, you can also choose to be warned before installing harmful apps. This can be enabled by selecting the Verify apps option in the Security settings.</p>
           <a href="Sleep_Tracker_v1.01.apk" download="Sleep Tracker Android">
            <button class = github>Download App</button>
           </a>
          </div>
        </div><!-- end of panel -->
      </div>
    </section>


  </div><!-- container -->
</body>
</html>