-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
229 lines (223 loc) · 9.23 KB
/
index.html
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Welcome to Mensah Tribe Web Solution, lets bring your vision to fruition.">
<meta name="keywords" content="chicago,web design, webpage, website,mensah,tribe,web,solutions,development">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="lightbox.min.css">
<link rel="stylesheet" href="utilities.css">
<link rel="stylesheet" href="style.css">
<title>Welcome Mensah Tribe Web Solutions|MTS </title>
</head>
<body id="home">
<header class="hero">
<div id="navbar" class="navbar top">
<h1 class="logo">
<a href="index.html">
<span class="text-primary"><i class="fas fa-flask"></i> MensahTribe</span><br>WebSolutions
</a>
</h1>
<nav>
<ul>
<li><a href="#home" class="current">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<h1><span class="text-primary">Mensah Tribe</span> Web Solutions</h1>
<p class="lead">I am a full-stack web developer and UI/UX javascript specialist based out of the Windy City. We
specialize in designing simple solutions to complex large-scale problems.</p>
<a href="#about" class="btn"><i class="fas fa-chevron-right"></i>Discover More</a>
</div>
</header>
<main>
<!-- About:Icons -->
<section id="about" class="icons bg-light">
<div class="flex-items">
<div>
<i class="fas fa-pencil-ruler fa-2x"></i>
<div>
<h3>User Interface Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, vel.</p>
</div>
</div>
<div>
<i class="fas fa-cogs fa-2x"></i>
<div>
<h3>User Experience Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, vel.</p>
</div>
</div>
<div>
<i class="fas fa-database fa-2x"></i>
<div>
<h3>Technical Support</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, vel.</p>
</div>
</div>
</div>
</section>
<!--About:Solutions -->
<section class="solutions flex-columns">
<div class="row">
<div class="column">
<div class="column-1">
<img src="photo3.jpg" alt="Photo by David Travis on Unsplash">
</div>
</div>
<div class="column">
<div class="column-2 bg-primary">
<h4>What you are looking for?</h4>
<h2>We design simple-solutions to complex large-scale problems </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni at magnam quaerat culpa accusantium ullam
atque. Assumenda illo dignissimos culpa?</p>
<a href="" class="btn btn-outline">
<i class="fas fa-chevron-right"></i>How Services Work</a>
</a>
</div>
</div>
</div>
</section>
<!-- portfolio -->
<section id="portfolio" class="portfolio flex-grid section-padding">
<header class="section-header">
<h4>Take a look at what we do</h4>
<h2>Project Portfolio</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, ab.</p>
</header>
<div class="row">
<div class="column">
<a href="good-news-coming.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="good-news-coming.jpg" alt="Photo by Jon Tyson on Unsplash">
</a>
<a href="change-is-coming.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="change-is-coming.jpg" alt="Photo by Markus Spiske on Unsplash">
</a>
</div>
<div class="column">
<a href="good-vibees.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="good-vibees.jpg" alt="Photo by MARK ADRIANE on Unsplash">
</a>
<a href="disney-skull.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="disney-skull.jpg" alt="Photo by Christian Wagner on Unsplash">
</a>
</div>
<div class="column">
<a href="darth-strom.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="darth-strom.jpg" alt="Photo by MARK ADRIANE on Unsplash">
</a>
<a href="safari-jeffery.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="safari-jeffery.jpg" alt="Photo by Christian Wagner on Unsplash">
</a>
</div>
<div class="column">
<a href="paris-ride.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="paris-ride.jpg" alt="Photo by MARK ADRIANE on Unsplash">
</a>
<a href="ballon-rise.jpg" data-lightbox="portfolio" data-title="projects coming soon">
<img src="ballon-rise.jpg" alt="Photo by Christian Wagner on Unsplash">
</a>
</div>
</div>
</section>
<!--Blog-->
<section id="blog" class="blog flex-columns flex-reverse">
<div class="row">
<div class="column">
<div class="column-1">
<img src="JavaScript_web_design.jpg" alt="Photo by David Travis on Unsplash">
</div>
</div>
<div class="column">
<div class="column-2 bg-secondary">
<h4>May 19 2020</h4>
<h2>What is Javascript?</h2>
<p>In this article we will look at JavaScript from a high level, answering questions such as "What is it?"
and "What can you do with it?", and making sure you are comfortable with JavaScript's purpose.</p>
<a href="blog.html" class="btn btn-outline">
<i class="fas fa-chevron-right"></i>Discover Our Blog</a>
</a>
</div>
</div>
</div>
</section>
<!-- Team -->
<section id="team" class="team section-padding">
<header class="section-header">
<h4>Who we are</h4>
<h2>Lets meet the team</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, ab.</p>
</header>
<div class="flex-items">
<div>
<img src="nick.jpg" alt="">
<h4>Nick M.</h4>
<p>Javascript Specialist</p>
</div>
<div>
<img src="wdw-alex-2016.jpeg" alt="">
<h4>Jane D.</h4>
<p>UX/UI Specialist</p>
</div>
<div>
<img src="wdw-zoe-2016.jpeg" alt="">
<h4>Joe D.</h4>
<p>Technical Support</p>
</div>
</div>
</section>
<!--Contact-->
<section id="contact" class="contact flex-columns">
<div class="row">
<div class="column">
<div class="column-1">
<img src="contact-us.jpg" alt="Photo by David Travis on Unsplash">
</div>
</div>
<div class="column">
<div class="column-2 bg-light">
<h2>Lets Get In Touch</h2>
<form action=" https://www.freecodecamp.com/email-submit" method="post" class="callback-form">
<div class="form-control">
<label for="name"></label>
<input type="text" name='name' id='name' placeholder="Enter name">
</div>
<div class="form-control">
<label for="email"></label>
<input type="text" name='email' id='email' placeholder="Enter email">
</div>
<div class="form-control">
<label for="phone"></label>
<input type="text" name='phone' id='phone' placeholder="Enter phone">
<input type="submit" value="Send" id="submit" class="btn">
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<footer id="main-footer" class='footer bg-dark'>
<div class="social">
<a href="#"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#"><i class="fab fa-github fa-2x"></i></a>
<a href="#"><i class="fab fa-youtube fa-2x"></i></a>
<a href="#"><i class="fab fa-facebook fa-2x"></i></a>
</div>
<p>Mensah Tribe Web Solutions © 2020, All Rights Reserved</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="lightbox.min.js"></script>
<script src="script.js"></script>
</body>
</html>