basic-website-layout/index.html at master · brendef/basic-website-layout · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="assets/css/animate.css">
    <title>Welcome to WebCoffee</title>
  </head>
  <body>
    <!-- Header Showcase -->
    <header id="showcase" class="grid">
      <!-- Navigation -->
      <div class="content-wrap">
        <h1>Welcome to WebCoffee</h1>
        <!-- <div class="shape1"></div> -->
        <div class="content-text">
          <p>
            Why do it when a computer can? WebCoffee offers customised software
            to automate bussiness functions, and it is tailored to only your
            bussiness.
          </p>
        </div>
        <a
          href="mailto:admin@webcoffee.org?Subject=Hi%20there" target="_top"
          class="btn">
          Contact us
        </a>
      </div>
    </header>
    <!-- Main Area -->
    <main id="main">
      <!-- Section A -->
      <section id="section-a" class="grid">
        <div class="content-wrap">
          <h2 class="content-title">What is automation software</h2>
          <p>
            <span class="definition">
              Noun: 'The use or introduction of automatic equipment in
              manufacturing or other process or facility.'
            </span>
            The dictionary definition of automation mentions 'automatic
            equipment' but it can be more than that, autimation can be software
            that sorts or even sends emails, contacts your supliers or clients,
            places orders, updates your websites or socials or whatever else
            you would like your computer to do for you.
          </p>
        </div>
      </section>
      <!-- Section B -->
      <!-- <section id="section-b" class="grid">
        <ul>
          <li>
            <div class="card">
              <img src="assets/images/close-up.jpg" alt="">
              <div class="card-content">
                <h3 class="card-title">Card Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat hic laudantium possimus qui, aspernatur modi labore atque voluptatem magni aliquid.</p>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img src="assets/images/arc-design.jpg" alt="">
              <div class="card-content">
                <h3 class="card-title">Card Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat hic laudantium possimus qui, aspernatur modi labore atque voluptatem magni aliquid.</p>
              </div>
            </div>
          </li>
          <li>
            <div class="card">
              <img src="assets/images/modern-design.jpg" alt="">
              <div class="card-content">
                <h3 class="card-title">Card Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat hic laudantium possimus qui, aspernatur modi labore atque voluptatem magni aliquid.</p>
              </div>
            </div>
          </li>
        </ul>
      </section> -->
      <!-- Section C -->
      <!-- <section id="section-c" class="grid">
        <div class="content-wrap">
          <h2 class="content-title">Section C Title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio temporibus quia reprehenderit illum enim, deleniti perspiciatis veritatis natus sit incidunt.</p>
        </div>
      </section> -->
      <!-- Section D -->
      <section id="section-d" class="grid">
        <div class="box">
          <h2 class="content-title">Contact Us</h2>
          <p>
            Email:
          </p>
          <p>
            <a href="mailto:admin@webcoffee.org?Subject=Hi%20there" target="_top">
              admin@webcoffee.org
            </a>
          </p>
        </div>
        <div class="box">
          <h2 class="content-title">About</h2>
          <p>
            WebCoffee started as a web design agency that gave web pressence
            to small and big bussinesses back in 2016. From there we evolved
            into what we are today, creating tailored software for companies
            small and big.
          </p>
        </div>
      </section>
      <footer id="main-footer" class="grid">
        <div>2018 WebCoffee &copy;</div>
        <div>
          Project By
          <a href="#weblink" target="_blank">Web Coffee</a>
          (yes we created our own website 😉)
        </div>
      </footer>
    </main>
  </body>
</html>