Appilicous/index.html at master · ikasianiuk/Appilicous · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Appilicous</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <header class="main-header">
    <div class="container grid">

      <div class="logo col">
        <img src="img/logo.svg" alt="Appilicous logo">
      </div>

      <nav class="main-nav col">
        <ul class="unstyled-list">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>

    </div>
  </header>

<!-- Hero area
  ============================== -->

  <section class="hero">
    <div class="container grid">

      <div class="hero-text">
        <h1 class="title-large"><span>Take your app to the </span> next level</h1>
        <p class="text-intro">
          The perfect landing page for your app, whatever it might be.
          Show off the apps features, show some sexy picture and get more people do download it today
        </p>
        <a href="#" class="btn btn--secondary">Learn More</a>
        <a href="#" class="btn btn--primary">Get the App</a>
      </div>

      <div class="col">
        <img src="img/phone.png" alt="" class="hero-img">
      </div>

    </div>

  </section>

  <!-- Sales points
  ============================== -->

  <section class="sales-points">
    <div class="container grid">
      <h1>Promote your App</h1>
      <div class="sales-point col">
        <img src="img/sales-responsive.png" alt="">
        <h2></h2>
        <p></p>
      </div>
      <div class="sales-point col">
        <img src="img/sales-hand.png" alt="">
        <h2></h2>
        <p></p>
      </div>
      <div class="sales-point col">
        <img src="img/sales-graph.png" alt="">
        <h2></h2>
        <p></p>
      </div>
    </div>
  </section>

  <!-- Promo section
  ============================== -->

  <section class="promo">
    <div class="grid">

      <div class="title-box">
        <h1>This app is amazing</h1>
        <p>It does everything you didn't know an app nedded to do</p>
      </div>

      <div class="col">
        <h1>Doing great things for you</h1>
        <h2>Phasellus henrerit  psoeure</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus hendrerit posuere finibus. Phasellus nibh lorem, cursus eu justo in, bibendum rutrum diam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur. Phasellus hendrerit posuere finibus. Phasellus nibh lorem, cursus eu justo in, bibendum rutrum diam. </p>
        <a href=""></a>.btn.btn--primary
      </div>

      <div class="col img-box">
        <img src="img/phone-in-hand.jpg" alt="A hand holding a phone">
      </div>
    </div>
  </section>

  <!-- Call to action(CTA)
  ============================== -->

  <section class="cta">
    <p class="text-large">You made it to the bottom and you still aren’t sure?</p>
    <h1 class="title-large">SHOWCASE THE GREATNESS today</h1>
    <a href="" class="btn btn--primary">Get the app</a>
  </section>

  <!-- Footer
  ============================== -->

  <footer>
    <div class="container">
      <p>Take your app to the next level</p>
      <ul class="unstyled-list social-links">
        <li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></li>
      </ul>
      <ul class="unstyled-list nav-footer">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </footer>

  <!-- Font Awesome -->
  <script src="https://use.fontawesome.com/97974f9c24.js"></script>

</body>
</html>