-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
196 lines (172 loc) · 9.59 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
<!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">
<link href="./assets/css/style.css" type="text/css" rel="stylesheet">
<link href="./assets/css/reset.css" type="text/css" rel="stylesheet">
<link href="./assets/img/logo/favico.ico" rel="icon" type="image/icon">
<script src="./assets/js/toggle_button.js" defer></script>
<title>Portfolio Website</title>
</head>
<body>
<!-- header section -->
<header id="header">
<div class="container">
<!-- Navigation bar -->
<nav class="navbar">
<!-- logo -->
<div class="logo">
<a href="#home">© Christ Sadi</a>
</div>
<!-- Navigation button for moblie -->
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!-- Navigation links -->
<div class="navbar-links">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#skill">Skills</a></li>
<li><a href="#about">About</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<!-- banner section -->
<div id="home">
<div class="container">
<div class="text">
<h1>WELCOME</h1>
<p>I'm Christ Sadi, currently doing a course to be a Full-Stack Developer. I am a self employed cultural tour guide, in Cape Town South Africa. </p>
<br>
<br>
<p>I have been learning programming for <span id="timer-seconds" style="color: rgb(245, 65, 218);">0</span> seconds.
<br>
<br>That would translate to <span id="timer-days" style="color: rgb(245, 65, 218);">0</span> days!</p>
</div>
<img src="./assets/img/logo/logo gif/logo-gif.gif" alt="logo gif">
</div>
</div>
<!-- portfolio section-->
<section id="portfolio">
<div class="container">
<h2>PORTFOLIO</h2>
<h3>Featured Work</h3>
<div class="feature">
<div class="work-container">
<a href="https://sadicapetours.com" target="_blank"><img src="./assets/img/portfolio/sadicapetours.jpg" alt="sadicapetours"></a>
<p><a href="https://sadicapetours.com" target="_blank">Sadicapetours</a></p>
<details class="summary">
<summary>
Overview
</summary>
<p>This is a website for my tourism business.
<br>I used <a href="https://www.prestashop.com/en" target="_blank ">Prestashop</a> to bring this website to life.
<p>Page link: <a href="https://sadicapetours.com/" target="_blank">here</a>
</p>
</p>
</details>
</div>
<div class="work-container">
<a href="https://christsadi.github.io/Company-Home-Page-with-Flexbox/" target="_blank"><img src="./assets/img/portfolio/css flexbox.jpg" alt="css flexbox project"></a>
<p><a href="https://christsadi.github.io/Company-Home-Page-with-Flexbox/" target="_blank">CSS Flexbox Project</a></p>
<details class="summary">
<summary>
Overview
</summary>
<p>This is a codecademy project, I use flexbox to design and build the layout for a company's homepage.</p>
<p>Page link: <a href="https://christsadi.github.io/Company-Home-Page-with-Flexbox/" target="_blank">here</a></p>
<p>GitHub Repository: <a href="https://github.com/Christsadi/Company-Home-Page-with-Flexbox" target="_blank">here</a></p>
</details>
</div>
<div class="work-container">
<a href="https://christsadi.github.io/Challenge-Project-Responsive-Club-Website/" target="_blank"><img src="./assets/img/portfolio/responsive website.png" alt="responsive website"></a>
<p><a href="https://christsadi.github.io/Challenge-Project-Responsive-Club-Website/" target="_blank">Responsive website</a></p>
<details class="summary">
<summary>
Overview
</summary>
<p>This is a codecademy project, I built a club group page that will dynamically respond as you adjust the size of your screen.</p>
<p>Page link: <a href="https://christsadi.github.io/Challenge-Project-Responsive-Club-Website/" target="_blank">here</a></p>
<p>GitHub Repository: <a href="https://github.com/Christsadi/Challenge-Project-Responsive-Club-Website" target="_blank">here</a></p>
</details>
</div>
</div>
</div>
</section>
<!-- skills section-->
<section id="skill">
<div class="container">
<h2>SKILLS</h2>
<div class="skill-set">
<div class="skill-container">
<img src="./assets/img/skills/CSS3.png" alt="CSS3">
<p>CSS 3
<br>Level: Intermediate</p>
</div>
<div class="skill-container">
<img src="./assets/img/skills/HTML5.png" alt="HTML5">
<p>HTML 5
<br>Level: Intermediate</p>
</div>
<div class="skill-container">
<img src="./assets/img/skills/js.png" alt="Javascript ES6">
<p>Javascript ES6 Level: Basic</p>
</div>
<div class="skill-container">
<img src="./assets/img/skills/ps.png" alt="PhotoShop">
<p>PhotoShop Level: Intermediate</p>
</div>
<div class="skill-container">
<img src="./assets/img/skills/Git.png" alt="Git">
<p>Git Level: Basic</p>
</div>
</div>
</div>
</section>
<!-- about section-->
<section id="about">
<div class="about-me">
<div class="container">
<h2>About</h2>
<p>I'm Christ Sadi, a full stack web developer student and cultural tour guide in Cape Town South Africa.
<br>
<br>I've been practicing programming for over a year at a moderate pace and love it.
<br>
<br>Currently working as a tour guide under the brand Sadicapetours and I do free-lance work online.
<br>
<br>My experiences are in customer service, Prestashop open source e-commerce platform, tech support, PhotoShop and SEO.</p>
<!-- displays image when screen is resized to less then 820px width -->
<img src="./assets/img/about mobile.jpg" alt="Christ Sadi">
</div>
</div>
</section>
</main>
<!-- footer section -->
<footer id="footer">
<!-- social media container section -->
<div class="container">
<a href="https://www.facebook.com/christ.b.sadi/" target="_blank"><img src="./assets/img/social media/fb_logo.png" alt="facebook"></a>
<a href="https://github.com/Christsadi" target="_blank"><img src="./assets/img/social media/github.png" alt="github"></a>
<a href="https://www.instagram.com/christ_maximus/" target="_blank"><img src="./assets/img/social media/Instagram_logo.png" alt="instagram"></a>
<a href="https://www.linkedin.com/in/christ-sadi-855370104/" target="_blank"><img src="./assets/img/social media/LinkedIn_logo.png" alt="linkedin"></a>
<a href="https://twitter.com/MaximusChrist" target="_blank"><img src="./assets/img/social media/Twitter logo.png" alt="twitter"></a>
</div>
<div class="container-footer">
<!-- footer with script to updae year automatically -->
<h4>©Christ Sadi <script>document.write(new Date().getFullYear());</script></h4>
<p>christsadi@mail.com</p>
</div>
</footer>
<!-- script to run timer and change days in Banner section -->
<script src="./assets/js/script.js" type="text/javascript"></script>
</body>
</html>