responsive-web-design-I/features.html at master · mrazahub/responsive-web-design-I · 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
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Great Idea! - Features</title>

  <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/features.css">
  <link rel="stylesheet" href="css/media-800.css">
  <link rel="stylesheet" href="css/media-500.css">

  <script src="https://kit.fontawesome.com/be7a85e91c.js"></script>

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
    <header id="top-header">
      <a class="toggle open" href="#nav"><i class="fas fa-bars"></i></a>
      <nav id="nav">
        <a class="toggle close" href="#"><i class="fas fa-times"></i></a>
        <ul class="nav-list">
          <li class="list-item"><a href="index.html">Home</a></li>
          <li class="list-item"><a href="services.html">Services</a></li>
          <li class="list-item"><a href="product.html">Product</a></li>
          <li class="list-item"><a href="#">About</a></li>
          <li class="list-item"><a href="features.html">Features</a></li>
          <li class="list-item"><a href="#">Contact</a></li>
        </ul>
      </nav>
      <a class="logo" href="index.html"> <img src="img/logo.png" alt="Great Idea! Company logo."></a>
    </header>

<main>
  <header class="features-header">
    <h1 class="animate-1">Features</h1>
    <p class="animate-2">Our services provide the best digital value in nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque eleifend. Mauris euismod facilisis iaculis.</p>
  </header>

  <article class="features-top">

    <section class="features-box-1">
      <h3>Digital Design</h3>
      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
      eleifend. Mauris euismod facilisis iaculis.</p>
      <button>Learn More</button>
    </section>

    <section class="features-box-2">
      <h3>UX / UI</h3>
      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
      eleifend. Mauris euismod facilisis iaculis.</p>
      <button>Learn More</button>
    </section>

    <section class="features-box-3">
      <h3>Digital Marketing</h3>
      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
      eleifend. Mauris euismod facilisis iaculis.</p>
      <button>Learn More</button>
    </section>

  </article>

<article class="features-bottom">
  <section class="bottom-features-box">
      <h2>Some Facts About Our Services</h2>
      <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor. Mauris consectetur feugiat justo quis aliquet. Curabitur cursus et justo eu consequat. Fusce finibus sem neque, sed faucibus nibh pellentesque
      eleifend. Mauris euismod facilisis iaculis.
      </p>
    <div class="inner-box">
        <div>
            <h3>Security</h3>
            <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor.</p>
        </div>
        <div>
            <h3>Peformance</h3>
            <p>Nulla suscipit interdum diam at maximus. Proin vitae tellus rutrum, accumsan nunc sit amet, iaculis tortor.</p>
        </div>
    </div>
  </section>

  <section class="bottom-features-box">
    <img src="img/creative-mind_brainstorm_alphaspirit_iStock_Thinkstock_cropped.jpg" alt="iPad Pro">
  </section>

</article>

</main>

<footer>
  <p>Copyright Great Idea! 2018</p>
</footer>

</body>
</html>