Scribd
Upload
4 views6 pages

Doctype Htm2

The document is an HTML structure for a website featuring a navigation bar and sections for services and products. It includes links to various categories such as 'Arcades', 'Collectibles', and 'Consoles', along with a hero section promoting the company. The layout is styled with Bootstrap and custom CSS for a visually appealing design.

Uploaded by

pedro nicolas Bartolini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views6 pages

Doctype Htm2

The document is an HTML structure for a website featuring a navigation bar and sections for services and products. It includes links to various categories such as 'Arcades', 'Collectibles', and 'Consoles', along with a hero section promoting the company. The layout is styled with Bootstrap and custom CSS for a visually appealing design.

Uploaded by

pedro nicolas Bartolini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

doctype html> <a class="nav-link" href="#">Servicios</a>


<html lang="es"> </li>
<li class="nav-item dropdown">
<head> <a class="nav-link dropdown-toggle" href="#"
<!-- Required meta tags --> id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-
<meta charset="utf-8"> expanded="false">
<meta name="viewport" content="width=device-width, initial-scale=1"> Productos
</a>
<!-- Bootstrap CSS --> <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<link rel="stylesheet" href="css/bootstrap.css"> <li><a class="dropdown-item" href="#">Arcade</a></li>
<!--<link rel="stylesheet" href="remixicons/fonts/remixicon.css">--> <li><a class="dropdown-item" href="#">Coleccionables</a></li>
<link rel="stylesheet" href="css/style.css"> <li><a class="dropdown-item" href="#">Consolas</a></li>
</ul>
<title>NAVBAR / HERO / QUIENES SOMOS</title> </li>
</head> <li class="nav-item px-3">
<a class="nav-link" href="#">Porfolio</a>
<body> </li>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> <li class="nav-item px-3">
<div class="container"> <a class="nav-link" href="#">Clientes</a>
<a class="navbar-brand" href="#"> </li>
<img src="img/logo1.png" alt="" height="30px" width="100%"> <li class="nav-item px-3">
</a> <a class="nav-link" href="#">Contacto</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" </li>
data-bs-target="#navbarSupportedContent" aria- </ul>
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle <!--<form class="d-flex">
navigation"> <input class="form-control me-2" type="search" placeholder="Search"
<span class="navbar-toggler-icon"></span> aria-label="Search">
</button> <button class="btn btn-outline-success" type="submit">Search</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"> </form>-->
<ul class="navbar-nav ms-auto mb-2 mb-lg-0"> </div>
<!--<li class="nav-item"> </div>
<a class="nav-link active" aria-current="page" href="#">Home</a> </nav>
</li>-->
<li class="nav-item px-3"> <!-- HERO / HOME -->
<a class="nav-link" href="#">Nosotros</a> <main class="hero">
</li> <div class="container">
<li class="nav-item px-3"> <div class="row">
<div class="col-12 col-md-6 col-lg-8"> <p>Lorem ipsum.</p>
<h1 class="display-3"> </div>
Rescata a tu niñx interior </div>
</h1> <div class="row">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <div class="col-12 col-md-6 col-lg-3">
Exercitationem vitae tempora recusandae error amet, blanditiis corrupti <img src="/img/reparar.jpg" alt="" width="100%">
necessitatibus ullam provident dolorem.</p> <h4>Reparación</h4>
</div> <p>Lorem!</p>
</div> </div>
</div>
</main> <div class="col-12 col-md-6 col-lg-3">
<img src="/img/cotizacion.jpg" alt="" width="100%">
<!-- NUESTRA EMPRESA --> <h4>Cotizaciones</h4>
<section class="empresa"> <p>Lorem ipsum dolor!</p>
<div class="container-fluid" style="background-color: #09031f ;"> </div>
<div class="col-12 col-md-6 col-lg-3">
<div class="container text-center" style="background-color: #1B1F34;"> <img src="/img/venta.jpg" alt="" width="100%">
<div class="row">
<div class="col 12"> <h4>Aquiler y Venta</h4>
<h1 class="display-4">Nuestra Empresa_</h1> <p>Lorem Quos!</p>
<p>Lorem ipsum dolor.</p> </div>
<p>Lorem ipsum dolor.</p> <div class="col-12 col-md-6 col-lg-3">
<h3 class="display-6">Insert Coin_</h3> <img src="/img/fabricacion.jpg" alt="" width="100%">
</div>
</div> <h4 class="h4">Fabricación</h4>
</div> <p>Lorem ipsum!</p>
</div> </div>
</section> </div>
</div>
<!-- SERVICIOS --> </div>
<section class="servicios"> </section>
<div class="container-fluid" style="background-color: #09031f ;">
<!-- PRODUCTOS -->
<div class="container text-center" style="background-color: #1B1F34;"> <section class="productos">
<div class="row"> <div class="container-fluid" style="background-color: #09031f ;">
<div class="col 12"> <div class="container text-center" style="background-color: #1B1F34;">
<h1 class="display-4">Servicios</h1> <div class="row">
<div class="col 12"> @import url('https://fonts.googleapis.com/css2?
<h1 class="display-4">Mira lo que tenemos para vos</h1> family=Noto+Sans:wght@200;300;400;500;700&family=Roboto+Mono:wght@20
<p> </p> 0;400;500;900&display=swap');
</div> @import url('https://fonts.googleapis.com/css2?
</div> family=Zilla+Slab:wght@700&display=swap');
<div class="row">
<div class="col-12 col-md-6 col-lg-4"> :root {
<img src="/img/classic.jpg" alt="" width="100%"> --bg1: #151828;
<h4>Arcades</h4> --bg2: #1B1F34;
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam --body: #959DCC;
fugit at laudantium quibusdam porro. Quos!</p> --brand: #00ff4c;
</div> --white: #fff;
<div class="col-12 col-md-6 col-lg-4"> }
<img src="/img/retro.jpg" alt="" width="100%">
<h4>Coleccionables</h4> body {
<p>Lorem. Quos!</p> font-family: 'Noto Sans''Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
</div> color: var(--body);
<div class="col-12 col-md-6 col-lg-4"> line-height: 1.8;
<img src="/img/consola.jpg" alt="" width="100%"> background-color: var(--bg1);

<h4 class="h4">Consolas</h4> }
<p>Lorem ipsum dolor!</p>
</div> h1,h2,h3,h4,h5,h6 {
</div> font-family: 'Zilla Slab', serif;
</div> color: var(--white);
</div> }
</section>
/* -- NAVbar --*/

.navbar {
font-family: 'Roboto Mono', monospace;
min-height: 75px;
background: linear-gradient(rgba(27,31,52,1), rgba(27,31,52,0.1))
}

.navbar nav {
text-align: right;
margin-right: 20px; text-align: center;
margin-top: 10px;
} }

.nav-link { .dropdown-item:hover {
color: var(--brand) !important; color: var(--brand) !important;
font-weight: 400; font-weight: 700;
font-size: 18px; font-size: 18px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 10px;
} background-color: var(--bg2);
}
.nav-link:hover {
font-weight: 700; /* -- HERO --*/
/*border-bottom: 1px solid var(--brand);*/
} .hero {
background: linear-gradient(90deg, rgba(27,31,52,0.73), rgba(27,31,52,0.73)),
.navbar-toggler:focus { url(../img/cover_1.jpg);
text-decoration: none; min-height: 85vh;
outline: 0; background-position: top center;
box-shadow: 0 0 0 0.0rem; background-size: cover;
} display: flex;
align-items: center;
#navbar i {
font-size: 30px; }
}
.hero h1 {
.dropdown-menu { font-weight: 700;
background: linear-gradient(rgba(27,31,52,0.1), rgba(27,31,52,1)); text-transform: uppercase;
border: 0px; color: var(--brand)
margin-top: 0px !important; }
}
/* -- NUESTRA EMPRESA --*/
.dropdown-item {
color: var(--brand) !important; .empresa {
font-weight: 400; background-color: var(--bg2);
font-size: 18px; margin-top: 15px;
} .servicios h1 {
font-weight: 700;
.empresa h1 { text-transform: uppercase;
font-weight: 700; padding-bottom: 1rem;
text-transform: uppercase; padding-top: 4rem;
padding-top: 3rem; color: var(--brand)
padding-bottom: 1rem; }
color: var(--brand)
} .servicios h4 {
font-weight: 700;
.empresa h3 { text-transform: uppercase;
font-weight: 700; padding-bottom: 0.5rem;
text-transform: uppercase; padding-top: 2rem;
padding-top: 3rem; color: var(--brand)
padding-bottom: 10rem; }
color: var(--brand)
} .servicios p {
font-size: 1.2rem;
.empresa p { padding-bottom: 15px;
font-size: 1.2rem; padding-left: 10%;
padding-top: 1rem; padding-right: 10%;
padding-bottom: 15px; }
padding-left: 10%;
padding-right: 10%; /*-- PRODUCTOS --*/
}
.productos {
/*-- SERVICIOS --*/ background-color: var(--bg2);
}
.servicios {
background-color: var(--bg2); .productos img {
margin-top: 25px; padding-top: 2rem;
} }

.servicios img{ .productos h1 {


padding-top: 2rem; font-weight: 700;
} text-transform: uppercase;
padding-bottom: 1rem;
padding-top: 8rem;
color: var(--brand)
}

.productos h4 {
font-weight: 700;
text-transform: uppercase;
padding-bottom: 0.5rem;
padding-top: 2rem;
color: var(--brand)
}

.productos p {
font-size: 1.2rem;
padding-bottom: 15px;
padding-left: 10%;
padding-right: 10%;
}

You might also like