CreativeBusinessWebsite/services.html at master · CatSheiles/CreativeBusinessWebsite · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Business Website</title>

    <link rel="stylesheet" href="style.css">

</head>
<!--fontawesome for social icons-->
<script src="https://kit.fontawesome.com/18cd2f8298.js" crossorigin="anonymous"></script>

<body>
    <header>
        <div class="logo">Creative Dev Co</div>
        <div class="toggle">
            <i class="fas fa-bars" style="font-size:48px"></i>
        </div>
        <div class="navigation">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="work.html">Work</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>

            <div class="social-bar">
                <ul>
                    <li>
                        <a href="https://facebook.com">
                            <i class="fab fa-facebook-square"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://twitter.com">
                            <i class="fab fa-twitter-square"></i>
                        </a>
                    </li>
                    <li>
                        <a href="https://instagram.com">
                            <i class="fab fa-instagram-square"></i>
                        </a>
                    </li>
                </ul>
                <a href="mailto:you@email.com" class="email-icon">
                    <i class="fas fa-envelope-open-text"></i>
                </a>
            </div>
        </div>
    </header>

    <section>
        <div class="title">
            <h1>Services that we can help you with</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Optio amet aliquam ex ipsa, eligendi fugit. Veniam cum officia, molestias eum rem,
                temporibus laudantium at exercitationem modi sit consectetur facere voluptatem.
                Porro modi eum possimus repudiandae nulla quasi, id dicta omnis nobis sit
                impedit officia non necessitatibus quaerat tempora reiciendis recusandae.</p>
        </div>
        <div class="services">
            <div class="service">
                <div class="icon">
                    <i class="fas fa-tape fa-6x"></i>
                </div>
                <h2>Design</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Accusamus cum fugiat necessitatibus, quas voluptatibus
                    consequuntur nesciunt eaque rem tempora laboriosam.</p>
            </div>
            <div class="service">
                <div class="icon">
                    <i class="fas fa-file-code fa-6x"></i>
                </div>
                <h2>Development</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Accusamus cum fugiat necessitatibus, quas voluptatibus
                    consequuntur nesciunt eaque rem tempora laboriosam.</p>
            </div>
            <div class="service">
                <div class="icon">
                    <i class="fas fa-tachometer-alt fa-6x"></i>
                </div>
                <h2>SEO</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Accusamus cum fugiat necessitatibus, quas voluptatibus
                    consequuntur nesciunt eaque rem tempora laboriosam.</p>
            </div>
            <div class="service">
                <div class="icon">
                    <i class="fas fa-search-dollar fa-6x"></i>
                </div>
                <h2>Marketing</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Accusamus cum fugiat necessitatibus, quas voluptatibus
                    consequuntur nesciunt eaque rem tempora laboriosam.</p>
            </div>
            <div class="service">
                <div class="icon">
                    <i class="fas fa-mobile-alt fa-6x"></i>
                </div>
                <h2>App Development</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Accusamus cum fugiat necessitatibus, quas voluptatibus
                    consequuntur nesciunt eaque rem tempora laboriosam.</p>
            </div>
            <div class="service">
                <div class="icon">
                    <i class="fas fa-exclamation-triangle fa-6x"></i>
                </div>
                <h2>Error Fixing</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Accusamus cum fugiat necessitatibus, quas voluptatibus
                    consequuntur nesciunt eaque rem tempora laboriosam.</p>
            </div>
        </div>

    </section>

    <script src="main.js"></script>
</body>
</html>