Responsive-Complete-Workflow-/index.html at master · AlveeM/Responsive-Complete-Workflow- · 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>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Applicious</title>
  <link href="./css/main.css" rel="stylesheet">
  <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

</head>

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

      <div class="logo col"><img src="img/logo.svg" alt="Appilicious 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 col">
        <h1 class="title-large"><span>Take your app to the</span> next level</h1>
        <p class="text-intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quas exercitationem esse voluptates laborum quidem quod dolor repellat voluptatem beatae, dolores, eligendi eius est, perferendis debitis ducimus magnam possimus cumque!</p>
        <!--  Double dashes signify a modifier to a class -->
        <a href="" class="btn btn--secondary">Learn More</a>
        <a href="" class="btn btn--primary">Get the App</a>
      </div>
    </div>

    <div class="col">
      <img src="img/phone.png" alt="" class="hero-img">
    </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 needed to do.</p>
      </div>

      <div class="col">
        <h1>Doing great things for you</h1>
        <h2>Lorem ipsum dolor</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis officia unde dolorum culpa blanditiis voluptatibus optio modi incidunt vitae itaque, repellat beatae, numquam reiciendis quos, sapiente nobis ullam totam minus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis nesciunt, eligendi explicabo, tempora hic laboriosam! Voluptatem distinctio rem vel praesentium inventore accusantium est a, expedita fugit, veritatis quia dolorum sit.</p>
        <a href="" class="btn btn--primary">Get the App</a>
      </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"></a>
  </section>


  <!--  Footer
  ==================================-->
  <footer>
    <div class="container">
      <p>Take your app to the next level</p>
      <ul class="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>
    </div>
    <ul class="unstyled-list nav-footer">
      <li><a href=""></a>Home</li>
      <li><a href=""></a>About</li>
      <li><a href=""></a>Blog</li>
      <li><a href=""></a>Pricing</li>
      <li><a href=""></a>Contact</li>
    </ul>
  </footer>


</body>

</html>