-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
78 lines (77 loc) · 4.73 KB
/
about.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="contactKey" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title> About me </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jaldi:wght@400;700&family=KoHo:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Patrick+Hand&family=Patrick+Hand+SC&family=Rambla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body class="aboutPage">
<header>
<nav class="navbar">
<div class="logo"><a class="logo" href="index.html"><span class="key-logo"><img src="images/key1.png" alt="key-with-crown"></span>Key Creations</a></div>
<ul class="links">
<li><a href="index.html" class="navlinks">Home</a></li>
<li><a href="art.html" class="navlinks">Art</a></li>
<li><a href="poetry.html" class="navlinks">Poetry</a></li>
<li><a href="#" class="navlinks">About</a></li>
<li><a href="contact.html" class="navlinks">Contact</a></li>
</ul>
<div class="toggle_btn">
<i class="fa-solid fa-bars-staggered"></i>
</div>
</nav>
<ul class="dropDownMenu">
<li><a href="index.html" class="navlinks">Home</a></li>
<li><a href="art.html" class="navlinks">Art</a></li>
<li><a href="poetry.html" class="navlinks">Poetry</a></li>
<li><a href="contact.html" class="actionButton">Contact</a></li>
</ul>
</header>
<main>
<div class="contentBox">
<h1 class="pageHeading rambla-regular">About Me</h1>
<div class="container">
<div class="portrait-frame">
<img class="portrait" src="images/about/selfportrait.jpg" alt="Self-portait-photo">
</div>
<div class="infoColumn">
<div class="bio">
<p>Allow me to introduce myself formally. My name is Ke’Mari, but I commonly go by Key—I’ll pause for your “Aha!” moment—and I am a multimedia artist and designer
with an aptitude for creative writing. I’ve been a prodigy of the creative arts and technology since childhood. From writing short stories and drawing comic books
in grade school to building my first website at age 12 to getting my first DSLR camera and learning graphic design at 16, every step has developed me
into the artist and writer I am today. My main drive is to reveal the divine beauty hidden in our sometimes vapid world with a bit of imagination and
appreciation. If you wish to discover how to unlock this potential in your work-life, reach out to me, and I’ll offer you the key.</p>
</div>
<div class="actionButtonBox">
<a href="contact.html" class="actionButton">Let's go!</a>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="credits">
<ul class="resources">
<li><p class="footer-title">credits:</p></li>
<li><a href="https://www.istockphoto.com/">iStock</a></li>
<li><a href="https://www.flaticon.com/free-icons/" title="social icons">Flaticon</a></li>
<li><a href="https://swiperjs.com/">Swiper API</a></li>
</ul>
</div>
<div class="footerLinks">
<ul class="socials">
<li><a href="#"><img src="images/socials/github.png" alt="github-logo"></a></li>
<li><a href="#"><img src="images/socials/linkedin.png" alt="linkedin-logo"></a></li>
<li><a href="#"><img src="images/socials/instagram.png" alt="instagram-logo"></a></li>
</ul>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>