-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
213 lines (179 loc) · 7.29 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astro</title>
<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=Inter:wght@300;400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<header class="hero">
<nav class="nav container">
<div class="nav__logo">
<h1 class="nav__title">Alesis Nakano</h1>
</div>
<div class="nav__menu">
<ul class="nav__links">
<li class="nav__list">
<a href="#" class="nav__link">Features</a>
</li>
<li class="nav__list">
<a href="#" class="nav__link">Pricing</a>
</li>
<li class="nav__list">
<a href="#" class="nav__link">About</a>
</li>
<li class="nav__list">
<a href="#" class="nav__link">Blog</a>
</li>
<li class="nav__list">
<a href="#" class="nav__link">Contact</a>
</li>
</ul>
<div class="nav__buttons">
<a href="#" class="btn">Log in</a>
<a href="#" class="btn">Sign up</a>
</div>
</div>
<label for="menu" class="nav__label"></label>
<input type="checkbox" id="menu">
</nav>
<section class="hero__main container">
<figure class="hero__figure">
<img src="./img/hero-astro.png" alt="Ilustracion astro" class="hero__img" />
</figure>
<article class="hero__content">
<h2 class="hero__title">Marketing website done with Astro</h2>
<p class="hero__paragraph">
Astroship is a starter template for startups, marketing websites &
landing pages. Built with Astro.build and TailwindCSS. You can
quickly create any website with this starter.
</p>
<div class="hero__buttons">
<a href="#" class="btn">
<img src="./img/download-icon.svg" class="hero__icon" />
Download for free
</a>
<a href="#" class="btn">
<img src="./img/github.svg" class="hero__icon" />
Github Repo
</a>
</div>
</article>
</section>
</header>
<main class="container">
<section class="about">
<h2 class="about__title">Everything you need to start a website</h2>
<p class="about__paragraph">
Astro comes batteries included. It takes the best parts of
state-of-the-art tools and adds its own innovations.
</p>
<section class="cards">
<article class="cards__article">
<figure class="cards__figure">
<img src="./img/briefcase.svg" class="cards__img" />
</figure>
<div class="cards__text">
<h3 class="cards__title">Bring Your Own Framework</h3>
<p class="cards__paragraph">
Build your site using React, Svelte, Vue, Preact, web
components, or just plain ol' HTML + JavaScript.
</p>
</div>
</article>
<article class="cards__article">
<figure class="cards__figure">
<img src="./img/windows.svg" class="cards__img" />
</figure>
<div class="cards__text">
<h3 class="cards__title">100% Static HTML, No JS</h3>
<p class="cards__paragraph">
Astro renders your entire page to static HTML, removing all
JavaScript from your final build by default.
</p>
</div>
</article>
<article class="cards__article">
<figure class="cards__figure">
<img src="./img/data.svg" class="cards__img" />
</figure>
<div class="cards__text">
<h3 class="cards__title">On-Demand Components</h3>
<p class="cards__paragraph">
Need some JS? Astro can automatically hydrate interactive
components when they become visible on the page.
</p>
</div>
</article>
<article class="cards__article">
<figure class="cards__figure">
<img src="./img/ghost.svg" class="cards__img" />
</figure>
<div class="cards__text">
<h3 class="cards__title">Broad Integration</h3>
<p class="cards__paragraph">
Astro supports TypeScript, Scoped CSS, CSS Modules, Sass,
Tailwind, Markdown, MDX, and any other npm packages.
</p>
</div>
</article>
<article class="cards__article">
<figure class="cards__figure">
<img src="./img/search.svg" class="cards__img" />
</figure>
<div class="cards__text">
<h3 class="cards__title">SEO Enabled</h3>
<p class="cards__paragraph">
Automatic sitemaps, RSS feeds, pagination and collections take
the pain out of SEO and syndication. It just works!
</p>
</div>
</article>
<article class="cards__article">
<figure class="cards__figure">
<img src="./img/avatar.svg" class="cards__img" />
</figure>
<div class="cards__text">
<h3 class="cards__title">Community</h3>
<p class="cards__paragraph">
Astro is an open source project powered by hundreds of
contributors making thousands of individual contributions.
</p>
</div>
</article>
</section>
<section class="technology">
<h3 class="technology__title">Works with your technologies</h3>
<div class="technology__container">
<img alt="icon-react" src="./img/react.svg" class="technology__img" />
<img alt="icon-tailwind" src="./img/tailwind.svg" class="technology__img" />
<img alt="icon-vscode" src="./img/vscode.svg" class="technology__img" />
<img alt="icon-css" src="./img/css.svg" class="technology__img" />
<img alt="icon-linux" src="./img/linux.svg" class="technology__img" />
</div>
</section>
<section class="cta">
<h2 class="cta__title">Build faster websites.</h2>
<p class="cta__paragraph">
Pull content from anywhere and serve it fast with Astro's next-gen
island architecture.
</p>
<a href="#" class="cta__btn">Get Started</a>
</section>
</section>
</main>
<footer class="footer">
<p class="footer__title">
Copyright © 2023 Alesis. All rights reserved.
</p>
</footer>
</body>
</html>