-
Notifications
You must be signed in to change notification settings - Fork 0
/
prehome.html
220 lines (217 loc) · 16.3 KB
/
prehome.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Tsehafe Gojjo</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
<link rel="stylesheet" href="assets/css/Team-Clean.css">
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="57">
<nav class="navbar navbar-light navbar-expand-lg fixed-top" id="mainNav">
<div class="container"><a class="navbar-brand" href="#page-top" style="color: rgb(240,95,64);">Tsehafe Gojjo</a><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-align-justify"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#about" style="color: var(--bs-gray-900);">About</a></li>
<li class="nav-item"><a class="nav-link" href="#services" style="color: var(--bs-gray-900);">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio" style="color: var(--bs-gray-900);">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="gallery/" style="color: var(--bs-gray-900);">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#" style="color: var(--bs-gray-900);">Shop</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" style="color: var(--bs-gray-900);">Contact</a></li>
<li class="nav-item"></li>
</ul>
</div>
</div>
</nav>
<header class="text-center text-white d-flex masthead" style="background-image: url('assets/img/Artboard%201@4x.png');">
<div class="container my-auto">
<div class="col">
<p style="color: var(--bs-gray-900);height: 148px;margin: -21px;margin-top: -85px;margin-bottom: -20px;">Welcome to Tsehafe Gojjo </p>
</div>
<div class="row">
<div class="col-lg-10 mx-auto">
<h1 class="text-uppercase"></h1><a class="btn btn-primary btn-xl" role="button" href="#services">Find Out More</a>
</div>
</div>
</div>
</header>
<section id="about" class="bg-primary">
<div class="container" style="width: 1302px;">
<div class="row">
<div class="col"><img src="assets/img/photo_2022-06-29_15-26-30.png" style="width: 642px;height: 465.362px;margin-top: -68px;margin-left: -49px;"></div>
<div class="col offset-lg-8 text-center mx-auto">
<h2 class="text-white section-heading">We've got what you need!</h2>
<hr class="light my-4">
<p class="text-faded mb-4">Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes are open source, free to download, and easy to use. No strings attached!</p><a class="btn btn-light btn-xl" role="button" href="#services">Get Started!</a>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">At Your Service</h2>
<hr class="my-4">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fas fa-vr-cardboard fa-4x text-primary mb-3 sr-icons" data-aos="zoom-in" data-aos-duration="200" data-aos-once="true"></i>
<h3 class="mb-3">Virtual Tour</h3>
<p class="text-muted mb-0">Our templates are updated regularly so they don't break.</p>
</div>
</div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fas fa-camera-retro fa-4x text-primary mb-3 sr-icons" data-aos="zoom-in" data-aos-duration="200" data-aos-delay="200" data-aos-once="true"></i>
<h3 class="mb-3">Photography</h3>
<p class="text-muted mb-0">We digitalize your memory's for years to come</p>
</div>
</div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fa fa-newspaper-o fa-4x text-primary mb-3 sr-icons" data-aos="zoom-in" data-aos-duration="200" data-aos-delay="400" data-aos-once="true"></i>
<h3 class="mb-3">Up to Date</h3>
<p class="text-muted mb-0">We document architectural heritage</p>
</div>
</div>
<div class="col-md-6 col-lg-3 text-center">
<div class="mx-auto service-box mt-5"><i class="fa fa-heart fa-4x text-primary mb-3 sr-icons" data-aos="fade" data-aos-duration="200" data-aos-delay="600" data-aos-once="true"></i>
<h3 class="mb-3">Made with Love</h3>
<p class="text-muted mb-0">you can purchase our products and advertise your service or product</p>
</div>
</div>
</div>
</div>
</section>
<section id="portfolio" class="p-0">
<div class="container-fluid p-0">
<div class="row g-0 popup-gallery">
<div class="col-sm-6 col-lg-4"><a class="portfolio-box" href="assets/img/fullsize/1.webp"><img class="img-fluid" src="assets/img/thumbnails/1.webp">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded"><span>Heritage</span></div>
<div class="project-name"><span>Ras Bitwoded Mengesha Atikem</span></div>
</div>
</div>
</a></div>
<div class="col-sm-6 col-lg-4"><a class="portfolio-box" href="assets/img/fullsize/2.webp"><img class="img-fluid" src="assets/img/thumbnails/2.webp">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded"><span>Heritage</span></div>
<div class="project-name"><span>Grazmach Tasse</span></div>
</div>
</div>
</a></div>
<div class="col-sm-6 col-lg-4"><a class="portfolio-box" href="assets/img/fullsize/3.webp"><img class="img-fluid" src="assets/img/thumbnails/3.webp">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded"><span>Heritage</span></div>
<div class="project-name"><span>Ras Kebede</span></div>
</div>
</div>
</a></div>
<div class="col-sm-6 col-lg-4"><a class="portfolio-box" href="assets/img/fullsize/4.webp"><img class="img-fluid" src="assets/img/thumbnails/4.webp">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded"><span>heritage</span></div>
<div class="project-name"><span>Wabi Shebelle</span></div>
</div>
</div>
</a></div>
<div class="col-sm-6 col-lg-4"><a class="portfolio-box" href="assets/img/fullsize/5.webp"><img class="img-fluid" src="assets/img/thumbnails/5.webp">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded"><span>Category</span></div>
<div class="project-name"><span>Project Name</span></div>
</div>
</div>
</a></div>
<div class="col-sm-6 col-lg-4"><a class="portfolio-box" href="assets/img/fullsize/6.webp"><img class="img-fluid" src="assets/img/thumbnails/6.webp">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded"><span>Category</span></div>
<div class="project-name"><span>Project Name</span></div>
</div>
</div>
</a></div>
</div>
</div>
</section>
<section class="team-clean" style="margin-top: -59px;background: var(--bs-gray-900);">
<div class="container text-center">
<h2 class="mb-4" style="color: rgb(252,254,255);">Our Profile</h2><a class="btn btn-light btn-xl sr-button" role="button" data-aos="zoom-in" data-aos-duration="400" data-aos-once="true" href="assets/pdf/tsehafegojjo_portfolio.pdf" style="background: rgb(241,104,75);" download="TsehafeGojjo">Download Now!</a>
</div>
<div class="container">
<div class="intro">
<h2 class="text-center" style="color: rgb(255,255,255);">Team </h2>
<p class="text-center" style="color: rgb(255,255,255);">Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. Vestibulum nibh erat, pellentesque ut laoreet vitae. </p>
</div>
<div class="row justify-content-evenly people">
<div class="col-md-6 col-lg-4 item"><img class="rounded-circle" src="assets/img/1.jpg">
<h3 class="name" style="color: rgb(247,248,249);">Abel</h3>
<p class="title" style="color: rgb(240,95,64);">Graphics Designer</p>
<p class="description" style="color: rgb(252,254,255);">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, et interdum justo suscipit id. Etiam dictum feugiat tellus, a semper massa. </p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
<div class="col-md-6 col-lg-4 item"><img class="rounded-circle" src="assets/img/photo_2021-06-23_13-55-56.jpg" style="border-radius: 50%;">
<h3 class="name" style="color: rgb(253,254,255);">Eyob Lemawossen</h3>
<p class="title" style="color: var(--bs-primary);">web developer</p>
<p class="description" style="color: rgb(252,254,255);">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, et interdum justo suscipit id. Etiam dictum feugiat tellus, a semper massa. </p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
<div class="col-md-6 col-lg-4 item"><img class="rounded-circle" src="assets/img/3.jpg">
<h3 class="name" style="color: rgb(252,254,255);">Naol Teklu </h3>
<p class="title" style="color: var(--bs-primary);">Architect, graphics designer</p>
<p class="description" style="color: rgb(255,255,255);">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, et interdum justo suscipit id. Etiam dictum feugiat tellus, a semper massa. </p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
<div class="col-md-6 col-lg-4 item"><img class="rounded-circle" src="assets/img/3.jpg">
<h3 class="name" style="color: rgb(255,255,255);">Natan Birhanu</h3>
<p class="title" style="color: var(--bs-primary);">Photographer, history enthusiast<br></p>
<p class="description" style="color: rgb(252,254,255);">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, et interdum justo suscipit id. Etiam dictum feugiat tellus, a semper massa. </p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
<div class="col-md-6 col-lg-4 item"><img class="rounded-circle" src="assets/img/3.jpg">
<h3 class="name" style="color: rgb(252,254,255);">Ruth Takele</h3>
<p class="title" style="color: var(--bs-primary);">photographer and architect<br></p>
<p class="description" style="color: rgb(255,255,255);">Aenean tortor est, vulputate quis leo in, vehicula rhoncus lacus. Praesent aliquam in tellus eu gravida. Aliquam varius finibus est, et interdum justo suscipit id. Etiam dictum feugiat tellus, a semper massa. </p>
<div class="social"><a href="#"><i class="fa fa-facebook-official"></i></a><a href="#"><i class="fa fa-twitter"></i></a><a href="#"><i class="fa fa-instagram"></i></a></div>
</div>
</div>
</div>
</section>
<section id="contact" style="height: 471.4px;margin-top: -70px;">
<div class="container">
<div class="row">
<div class="col-lg-8 text-center mx-auto">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="my-4">
<p class="mb-5">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 text-center ms-auto"><i class="fa fa-phone fa-3x mb-3 sr-contact" data-aos="zoom-in" data-aos-duration="300" data-aos-once="true"></i>
<p>+251 900000000</p>
</div>
<div class="col-lg-4 text-center me-auto"><i class="fa fa-envelope-o fa-3x mb-3 sr-contact" data-aos="zoom-in" data-aos-duration="300" data-aos-delay="300" data-aos-once="true"></i>
<p><a href="mailto:your-email@your-domain.com">tsehafegojjo@gmail.com</a></p>
</div>
</div>
</div>
</section>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script src="assets/js/creative.js"></script>
</body>
</html>