-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
175 lines (150 loc) · 6.7 KB
/
Copy pathindex.html
File metadata and controls
175 lines (150 loc) · 6.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<title>Rio's Story</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"
integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css">
<link href="https:fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo">
<img src="img/kat-low-resolution-logo-color-on-transparent-background-2.png" alt="">
</div>
<button class="nav-toggle" aria-label="toggle navigation">
<span class="hamburger"></span>
</button>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item"><a href="#home" class="nav__link">Home</a></li>
<li class="nav__item"><a href="#about" class="nav__link">About me</a></li>
<li class="nav__item"><a href="#services" class="nav__link"> My Favourite</a></li>
<li class="nav__item"><a href="#projects" class="nav__link">My picture</a></li>
</ul>
</nav>
</header>
<!-- home -->
<section class="intro" id="home">
<h1 class="section__title section__title--intro">
Meow, I am <strong> Rio! </strong>
</h1>
<p class="section__subtitle section__subtitle--intro">My Story</p>
<!-- pic of me -->
<img src="img/rio19.jpeg" alt="picture of Rio" class="intro__img">
</section>
<!-- About me -->
<div class="section-bg">
<section class="about-me" id="about">
<h2 class="section__title section__title--about">ABOUT ME</h2>
<p class="section__subtitle section__subtitle--about">My Purr-fect Introduction</p>
<div class="about-me__body">
<p>
"I was born on June 10, 2022. I'm a purebred Maine Coon with black and white fur. My favorite HOOMAN are Katrina and Glydel. I have a brother named 'Scout' whom I both adore and sometimes have conflicts with."
</p>
<p>
I hate meeting new people and would hide every time I see them going near me, but don't worry I'm very nice...once I feel comfortable around a person I would let them pet me(not my belly tho).
</p>
</div>
<img src="img/rio.jpeg" alt="pio" class="about-me__img">
</section>
</div>
<!-- My services -->
<section class="my-services" id="services">
<h2 class="section__title section__title--services">My Favourite MEOW to do</h2>
<div class="services">
<div class="service">
<img src="img/rio15.jpeg" alt="Sleep" class="Sleep__img">
<div class="service-content">
<h3>Sleep</h3>
<p> I love to sleep so meow! that's my most favourite meow to do even at day and night.
I can sleep anywhere but where I usually go to is the washroom sink since i fit there nicely and it's very cool place to sleep into.</p>
</div>
</div>
<div class="service">
<img src="img/rio 2.jpeg" alt="Food" class="Food__img">
<div class="service-content">
<h3>Food</h3>
<p>I would always make sounds if I'm very hungry or when I see my owner putting food on my plate.
I usually eat dry food anytime during the day and wet food at 8 pm every night with my brother, which I would eat faster than him and eat his food after :)
</p>
</div>
</div>
<div class="service">
<img src="img/rio7.jpeg" alt="Pet" class="Pet">
<div class="service-content">
<h3>Touch</h3>
<p> I love it when my owner touch my head and chin when they see me or usually I go to them.
I would make a purr sounds and make my owner smile and hug me tight after which I hated the most... I usually try my best to escape.
</p>
</div>
</div>
<div class="service">
<img src="img/rio 10.jpeg" alt="Play" class="Play">
<div class="service-content">
<h3>Play</h3>
<p>My favourite meow to play is fishing wand...I love it when my owner play it with me and would chase it till i get tired.</p>
</div>
</div>
</div>
<a href="#projects" class="btn">My picture</a>
</section>
<!-- Projects -->
<section class="projects" id="projects">
<h2 class="section__title section__title--projects">My Picture</h2>
<p class="section__subtitle section__subtitle--projects"> My memories throughout the years</p>
<div class="portfolio">
<!-- portfolio item 1 -->
<a href="#" class="portfolio__item">
<img src="img/rio22.jpeg" alt="" class="portfolio__img">
</a>
<!-- portfolio item 2 -->
<a href="#" class="portfolio__item">
<img src="img/rio17.jpeg" alt="" class="portfolio__img">
</a>
<!-- portfolio item 3 -->
<a href="#" class="portfolio__item">
<img src="img/rio29.jpeg" alt="" class="portfolio__img">
</a>
<!-- portfolio item 4 -->
<a href="#" class="portfolio__item">
<img src="img/rio25.jpeg" alt="" class="portfolio__img">
</a>
<!-- portfolio item 5 -->
<a href="#" class="portfolio__item">
<img src="img/rio32.jpeg" alt="" class="portfolio__img">
</a>
<!-- portfolio item 6 -->
<a href="#" class="portfolio__item">
<img src="img/rio27.jpeg" alt="" class="portfolio__img">
</a>
</section>
<!-- Footer -->
<footer class="footer">
<a href="mailto:katrinaalejo103@gmail.com" class="footer__link">katrinaalejo103@gmail.com</a>
<ul class="social-list">
<li class="social-list__item">
<a class="social-list__link" href="https://google.com">
<i class="fab fa-google" style="color: #16e0bd;"></i>
</a>
</li>
<li class="social-list__item"><a class="social-list__link"
href="https://facebook.com">
<i class="fab fa-facebook" style="color: #16e0bd;"></i>
</a>
</li>
<li class="social-list__item"><a class="social-list__link"
href="https://www.instagram.com/scottriothecats/">
<i class="fab fa-instagram" style="color: #16e0bd;"></i>
</a>
</li>
</ul>
</footer>
<script src="js/index.js"></script>
</body>
</html>