-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (105 loc) · 4.79 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+Sundanese:wght@400..700&display=swap');</style>
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>Benson OgheneOchuko</title>
<link rel="icon" type="image/png" href="./images/build digital products.png">
</head>
<body class="scrollbar">
<header class="flex-container header" id='header'>
<p class="author">Benson OgheneOchuko</p>
<button id="mobile-nav-toggle" class="mobile-nav-toggle" aria-controls='navigation' aria-expanded='false'>
<svg class= 'hamburger' viewBox='0 0 100 100' width='40' fill='var(--button-color)' stroke='var(--button-color)' stroke-width='.3rem' stroke-linecap='round'>
<line class='line line_top'
x1= '10' x2= '60' y1= '30' y2= '30'>
</line>
<line class='line line_center'
x1= '10' x2= '90' y1= '50' y2= '50'>
</line>
<line class='line line_bottom'
x1= '90' x2= '40' y1= '70' y2= '70'>
</line>
</svg>
<span class="visually-hidden">menu</span>
</button>
<nav class="nav" id="navigation">
<ul role='list' class="nav-list">
<li class="visually-hidden">
<a href="#about">About</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul role='list'>
</nav>
</header>
<main>
<section class="grid-container hero-section ">
<div class="hero | flow span-2">
<h1 class="fs-h1" >Crafting Compelling Digital<br> Experiences</h1>
<p class="fs-regular" >creating visually stunning and user-friendly websites that<br>captivate audiences and drive engagement</p>
<button class="button" data-target="contact" >Contact Me</button>
</div>
<span class="hero-image focus-image"></span>
</section>
<section id="portfolio">
<span class="flex-container">
<h2 class="fs-h2 portfolio-h2">Exploring the Frontiers of Web Design </h2>
<p class='portfolio-message'>Deliver stunning digital experiences to your users that adapt across devices & prioritize usability while delivering value.</p>
</span>
<section class="flex-container portfolio_projects">
<article class="flex-container project_card">
<span class="project_card_details flow">
<h2 class="fs-h3">Portfolio Website</h2>
<p class="fs-body"> A well crafted portfolio website showcasing modern web design principles and development best practices. </p>
<p class="fs-body">
This project exemplifies proficiency in creating accessible, responsive experiences with a focus on intuitive user interactions and long-term scalability.
</p>
</span>
<figure class="project_image_figure bg_image" style="background-image: url('images/portfolio-website-screenshot.png');">
<figcaption>
Responsive portfolio website
</figcaption>
</figure>
</article>
<article class="flex-container project_card">
<span class="project_card_details flow">
<h2 class="fs-h3">Dynamic Reusable Form - vue.js</h2>
<p class="fs-body"> A versatile Vue.js form component that dynamically adjusts its functionality based on provided data. It can switch between a sign-in/sign-up form and a custom form with any number of fields.</p>
<p class="fs-body">
The form is fully responsive; submission endpoints and the form title are dynamically set according to the provided configuration, allowing for integration into various application contexts.
</p>
</span>
<figure class="project_image_figure bg_image" style="background-image: url('images/dynamic reusable form.png');">
<figcaption>
Responsive portfolio website
</figcaption>
</figure>
</article>
</section>
</section>
<section class="contact flow" id="contact">
<h2 class="fs-h2">Let's get in touch</h2>
<div class="grid-container" >
<span class="focus-image imagery section-image"></span>
<form name="contact form" class="span-2 div-padding" action="https://getform.io/f/pbqgzzzb" method="POST" id="footer-form">
<input type="text" name="name" placeholder="name" required autocomplete="on">
<input type="email" name="email" placeholder="email" required autocomplete="on">
<textarea class="scrollbar" type="textarea" name="message" placeholder="message" required rows='3'></textarea>
<button type="submit" class="button form-button">Send</button>
</form>
</div>
<span id="copyright">
© <span id="copyrightYear"></span> All Rights Reserved.
</span>
</section>
</main>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>