-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (94 loc) · 5.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rayoo</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/nav.css">
</head>
<body>
<section class="top-bar">
<nav class="navbar navbar-expand-md navbar-dark sticky-top">
<a href="./index.html" class="navbar-brand"><h2><span class="link">Ray<span class="yellow">oo</span></h2></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="toggleMobileMenu">
<ul class="navbar-nav ms-auto text-center">
<li><a href="#" class="nav-link active">home</a></li>
<li><a href="./about.html" class="nav-link">about</a></li>
<li><a href="./work.html" class="nav-link">work</a></li>
</ul>
</div>
</nav>
</section>
<section>
<div class="top-container">
<img class="top-cloud" src="./img/sun.png" alt="cloud and sun">
<h1>Hey</h1>
<h2> <span class="yellow">I'm</span> Ryan </h2>
<h3>a <span class="yellow">designer</span> and <span class="yellow">developer</span></h3>
<img class="bottom-cloud" src="./img/cloud.png" alt="">
</div>
</section>
<section>
<div class="middle-container">
<div class="profile">
<img class="me" src="./img/me.png" alt="My profile photo">
<h2> <strong>ABOUT ME</strong> </h2>
<p class="intro">I'm <span class="yellow">Ryan</span> a software developer and UI/UX designer. I love nature, pizza and art.</p>
<p class="intro">I am passionate about beautiful interfaces and intuitevely implemented UX.</p>
</div>
<hr>
<div class="skills">
<h2>My Skills.</h2>
<div class="skill-row">
<img class="skill2" src="./img/sass.png" alt="">
<h3>SASS</h3>
<p class="desription">Using SASS to write faster and more efficient CSS.</p>
</div>
<div class="skill-row">
<img class="skill1" src="./img/adobe-xd-logo.png" alt="">
<h3>Figma/XD</h3>
<p class="desription">Using Figma/XD to create beautiful and realistic mockups.</p>
</div>
<div class="skill-row">
<img class="skill2" src="./img/boot.png" alt="">
<h3>Bootstrap</h3>
<p class="desription">Using bootstrap to create nice simple web designs.</p>
</div>
</div>
<hr>
<div class="contact">
<h2>Interested in working together? Let's have a talk.</h2>
<h3>Get In Touch</h3>
<p class="contact-msg">Tell me your ideas to create your dream website.</p>
<button class="btn">
<a href="mailto:ryanomoro37@gmail.com" >CONTACT ME</a>
</button>
</div>
<a href="#"> <span class="back-to-top"><svg xmlns="http://www.w3.org/2000/svg" width="51.854" height="75.387" viewBox="0 0 51.854 75.387">
<g id="back-svgrepo-com_1_" data-name="back-svgrepo-com (1)" transform="translate(51.854) rotate(90)">
<path id="Arrow_Left" d="M.694,87.69h0l23.488,23.538a2.376,2.376,0,0,0,4.059-1.729V97.776c.009,0,.019,0,.028,0H73.032a2.363,2.363,0,0,0,2.356-2.356V76.578a2.363,2.363,0,0,0-2.356-2.356H28.27c-.009,0-.019,0-.028,0V62.515a2.384,2.384,0,0,0-4.04-1.748L.7,84.324A2.386,2.386,0,0,0,.694,87.69ZM23.518,68.184V78.936h4.724v0c.009,0,.019,0,.028,0H70.676V93.071H28.27c-.009,0-.019,0-.028,0v0H23.518v10.762L5.731,86.008Z" transform="translate(0 -60.088)" fill="#fff"/>
</g>
</svg>
</span><span class="back-to-top-hover"><svg xmlns="http://www.w3.org/2000/svg" width="59.622" height="86.681" viewBox="0 0 59.622 86.681">
<g id="back-svgrepo-com_1_" data-name="back-svgrepo-com (1)" transform="translate(59.622 0) rotate(90)">
<path id="Arrow_Left" d="M.8,91.826h0l27.007,27.064a2.732,2.732,0,0,0,4.667-1.988V103.422c.011,0,.022.005.032.005H83.972a2.717,2.717,0,0,0,2.709-2.709V79.048a2.717,2.717,0,0,0-2.709-2.709H32.5c-.011,0-.022.005-.032.005V62.879a2.741,2.741,0,0,0-4.646-2.01L.8,87.954A2.743,2.743,0,0,0,.8,91.826ZM27.041,69.4V81.759h5.431v-.005c.011,0,.022.005.032.005H81.264V98.012H32.5c-.011,0-.022.005-.032.005v-.005H27.041v12.374L6.59,89.891Z" transform="translate(0 -60.088)" fill="#fff281"/>
</g>
</svg>
</span> BACK TO TOP</a>
</div>
</section>
<div class="bottom-container">
<a class="footer-link" href="https://www.linkedin.com/in/ryan-ochieng-03a0b9236">LinkedIn</a>
<a class="footer-link" href="https://www.twitter.com/_ray00_?t=PqUIwiX5WwQW4YmKTrmQYg&s=01">Twitter</a>
<a class="footer-link" href="https://www.instagram.com/swipe_code/">Instagram</a>
<a class="footer-link" href="https://www.behance.net/omororyan7967">Behance</a>
<p class="copyright">© Ryan Ochieng.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>