Skip to content

Instantly share code, notes, and snippets.

@SebastianCastilloDev

SebastianCastilloDev/index.html

Created December 10, 2023 23:27
Show Gist options
  • Save SebastianCastilloDev/3e04600a19c2bc27530365e0712a5ec5 to your computer and use it in GitHub Desktop.
Save SebastianCastilloDev/3e04600a19c2bc27530365e0712a5ec5 to your computer and use it in GitHub Desktop.
Download ZIP
html
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diseñador freelancer</title>
<style>
</style>
</head>
<body>
<header>
<h1>Francisco Martinez</h1>
</header>
<nav>
<a href="#">Inicio</a>
<a href="#">Sobre mi</a>
<a href="#">Clientes</a>
<a href="#">Contacto</a>
</nav>
<img src="img/hero.jpg" alt="">
<section>
<h2>Diseño y desarrollo</h2>
<p>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="88" height="88"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffc107" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
<path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />
</svg>
</p>
<p>Santiago de Chile</p>
<a href="#">Contactos</a>
</section>
<main>
<h2>Mis servicios </h2>
<section>
<h3>Diseño web</h3>
<p>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" width="88"
height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffc107" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" />
<path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
<path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro rerum natus eligendi provident labore
cumque aut quasi obcaecati, possimus, in praesentium. Quasi quaerat molestiae perspiciatis eveniet.
Veniam possimus suscipit deserunt?</p>
</section>
<section>
<h3>Aplicaciones moviles</h3>
<p>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple" width="88"
height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffc107" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M9 7c-3 0 -4 3 -4 5.5c0 3 2 7.5 4 7.5c1.088 -.046 1.679 -.5 3 -.5c1.312 0 1.5 .5 3 .5s4 -3 4 -5c-.028 -.01 -2.472 -.403 -2.5 -3c-.019 -2.17 2.416 -2.954 2.5 -3c-1.023 -1.492 -2.951 -1.963 -3.5 -2c-1.433 -.111 -2.83 1 -3.5 1c-.68 0 -1.9 -1 -3 -1z" />
<path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-android" width="88"
height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffc107" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 10l0 6" />
<path d="M20 10l0 6" />
<path d="M7 9h10v8a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-8a5 5 0 0 1 10 0" />
<path d="M8 3l1 2" />
<path d="M16 3l-1 2" />
<path d="M9 18l0 3" />
<path d="M15 18l0 3" />
</svg>
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, ad!</p>
</section>
<section>
<h3>E-commerce</h3>
<p>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-credit-card" width="88"
height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffc107" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 5m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z" />
<path d="M3 10l18 0" />
<path d="M7 15l.01 0" />
<path d="M11 15l2 0" />
</svg>
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatum, autem!</p>
</section>
</main>
<section>
<h2>Contacto</h2>
<from>
<fieldset>
<legend>Para contactarnos debes completar todos los campos</legend>
<div>
<label>Nombre</label>
<input type="text" placeholder="Nombre">
</div>
<div>
<label>Telefono</label>
<input type="tel" placeholder="Tu numero">
</div>
<div>
<label>Correo</label>
<input type="email" placeholder="tu correo">
</div>
<div>
<label>Mensaje</label>
<textarea></textarea>
</div>
<div>
<input type="submit" value="Enviar">
</div>
</fieldset>
</from>
</section>
<footer>
<p>Derechos reservados Francisco Martinez</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment