Skip to content

Instantly share code, notes, and snippets.

@JCervantesB

JCervantesB/index.html

Created March 18, 2025 21:46
Show Gist options
  • Save JCervantesB/ffccbd896f974e87a0744ce45a5c7d5f to your computer and use it in GitHub Desktop.
Save JCervantesB/ffccbd896f974e87a0744ce45a5c7d5f to your computer and use it in GitHub Desktop.
Download ZIP
Proyecto Freelancer Maresa
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width-device-width, initial-scale=1.0" />
<title>Diseñador Freelancer</title>
<link rel="preload" href="css/styles.css" as="style" />
<link rel="stylesheet" href="css/normalize.css" />
<link href="css/normalize.css" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Krub:wght@400;700&display=swap"
/>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<header>
<h1 class="titulo">Maresa Alcauter Gomez <span>Freelancer</span></h1>
</header>
<div class="nav-bg">
<nav class="navegacion-principal contenedor">
<a href="#">Inicio</a>
<a href="#">Sobre Mi</a>
<a href="#">Clientes</a>
<a href="#">Contactos</a>
</nav>
</div>
<section class="hero">
<div class="contenido-hero">
<h2>Diseño y Desarrollo Web <span> Freelancer</span></h2>
<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"/>
<circle cx="12" cy="11" r="3" />
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 0 1 -2.827 0l-4.244-4.243a8 8 0 1 1 11.314 0z" />
</svg>
<p>Bahia De Banderas, Nayarit</p>
<a class="boton" href="#">Contactar</a>
</div>
</section>
<main class="contenedor sombra">
<h2>Mis Servicios</h2>
<section class="servicios">
<div class="servicio">
<h3>Diseño Web</h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-palette" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M12 21a9 9 0 1 1 0 -18a9 8 0 0 1 9 8a4.5 4 0 0 1 -4.5 4h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" />
<circle cx="7.5" cy="10.5" r=".5" fill="currentColor" />
<circle cx="12" cy="7.5" r=".5" fill="currentColor" />
<circle cx="16.5" cy="10.5" r=".5" fill="currentColor" />
</svg>
</div>
<p>Ut congue ligula sapien, ac aliquet erat viverra a. Nulla rhoncus hendrerit fringilla. Mauris tempus sagittis libero, eget finibus sem aliquet eget.</p>
</div>
<div class="servicio">
<h3>Aplicaciones Móviles</h3>
<div class="iconos">
<!-- https://tablericons.com/ -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-android" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<line x1="4" y1="10" x2="4" y2="16" />
<line x1="20" y1="10" x2="20" y2="16" />
<path d="M7 9h10v8a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-8a5 5 0 0 1 10 0" />
<line x1="8" y1="3" x2="9" y2="5" />
<line x1="16" y1="3" x2="15" y2="5" />
<line x1="9" y1="18" x2="9" y2="21" />
<line x1="15" y1="18" x2="15" y2="21" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-apple" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<path d="M9 7c-3 0-4 3-4 5.5 0 3 2 7.5 4 7.5 1.088-.046 1.679-.5 3-.5 1.312 0 1.5.5 3 .5s4-3 4-5c-.028-.01-2.472-.403-2.5-3-.019-2.17 2.416-2.954 2.5-3-1.023-1.492-2.951-1.963-3.5-2-1.433-.111-2.83 1-3.5 1-.68 0-1.9-1-3-1z" />
<path d="M12 4a2 2 0 0 0 2 -2a2 2 0 0 0 -2 2" />
</svg>
</div>
<p>Ut congue ligula sapien, ac aliquet erat viverra a. Nulla rhoncus hendrerit fringilla. Mauris tempus sagittis libero, eget finibus sem aliquet eget.</p>
</div>
<div class="servicio">
<h3>E-Commerce </h3>
<div class="iconos">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-credit-card" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"/>
<rect x="3" y="5" width="18" height="14" rx="3" />
<line x1="3" y1="10" x2="21" y2="10" />
<line x1="7" y1="15" x2="7.01" y2="15" />
<line x1="11" y1="15" x2="13" y2="15" />
</svg>
</div>
<p>Ut congue ligula sapien, ac aliquet erat viverra a. Nulla rhoncus hendrerit fringilla. Mauris tempus sagittis libero, eget finibus sem aliquet eget.</p>
</div>
</section>
<section>
<h2>Contacto</h2>
<form>
<fieldset>
<legend>Contactanos llenando todos los campos</legend>
<div>
<label>Nombre</label>
<input type"text" placeholder="Tu Nombre">
</div>
<div>
<label>Telefono</label>
<input type"tel" placeholder="Tu Telefono">
</div>
<div>
<label>Email</label>
<input type"email" placeholder="Tu Email">
</div>
<div>
<label>Mensaje</label>
<textarea></textarea>
<input type="submit" value="Enviar" />
</div>
</fieldset>
</form>
</section>
</main>
<footer>
<p>Todos los derechos reservados Maresa Alcauter Gomez Freelancer</p>
</footer>
</body>
</html>
Raw
styles.css
:root {
--blanco: #f1f5f8;
--oscuro: #090909;
--primario: #ffc107;
--secundario: #0097a7;
--gris: #757575;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
font-size: 16px;
font-family: "krub, sans-serif";
background-image: linear-gradient(to top, #dfe9f3 0%, var(--blanco) 100%);
/* 1rem : 10px */
}
h1 {
font-size: 3.8rem;
}
h2 {
font-size: 2.8rem;
}
h3 {
font-size: 1.8rem;
}
h1,
h2,
h3 {
text-align: center;
}
.titulo span {
font-size: 2rem;
}
.contenedor {
max-width: 120rem;
margin: 0 auto;
}
.boton {
background-color: var(--secundario);
color: var(--blanco);
padding: 1rem 3rem;
margin-top: 3rem;
font-size: 20px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
border-radius: 0.5rem;
width: 80%;
text-align: center;
}
@media (min-width: 760px) {
.boton {
width: auto;
}
}
.sombra {
-webkit-box-shadow: 0px 5px 15px 0px rgba(112, 112, 112, 0.69);
-moz-box-shadow: 0px 5px 15px 0px rgba(112, 112, 112, 0.69);
box-shadow: 0px 5px 15px 0px rgba(112, 112, 112, 0.69);
background-color: var(--blanco);
padding: 2rem;
border-radius: 1rem;
}
.nav-bg {
background-color: var(--secundario);
}
.navegacion-principal {
display: flex;
flex-direction: column;
}
@media (min-width: 768px) {
.navegacion-principal {
flex-direction: row;
justify-content: space-between;
}
}
.navegacion-principal a {
display: block;
text-align: center;
color: var(--blanco);
text-decoration: none;
font-size: 2rem;
font-weight: 700;
padding: 1rem;
}
.navegacion-principal a:hover {
background-color: var(--primario);
color: var(--oscuro);
}
.hero {
background-image: url(../img/hero.jpg);
background-repeat: no-repeat;
background-size: cover;
height: 390px;
position: relative;
margin-bottom: 2rem;
}
.contenido-hero {
background-color: rgb(0 0 0 / 70%); /** Otra opción **/
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contenido-hero h2,
.contenido-hero p {
color: var(--blanco);
}
.servicios {
scroll-snap-align: start;
scroll-snap-stop: always;
}
@media (min-width: 768px) {
.servicios {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 1rem;
}
}
.servicio {
text-align: center;
}
.servicio {
display: flex;
flex-direction: column;
align-items: center;
}
.iconos {
display: flex;
height: 150px;
width: 150px;
justify-content: space-evenly;
align-items: center;
background-color: var(--primario);
border-radius: 50%;
}
.iconos i {
font-size: 2rem;
color: var(--oscuro);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment