Skip to content

Instantly share code, notes, and snippets.

@pochitax

pochitax/index.html

Created November 13, 2022 16:18
Show Gist options
  • Save pochitax/33471e0d9daa294e73e93f5a22f299cd to your computer and use it in GitHub Desktop.
Save pochitax/33471e0d9daa294e73e93f5a22f299cd to your computer and use it in GitHub Desktop.
Download ZIP
Estructura html responsive
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!-- Bootstrap vinculado desde el servidor -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.altura-destacado {
height: 400px;
}
.cuadrado {
width: 100%;
padding-bottom: 100%;
height: 0;
background-color: aqua;
}
</style>
</head>
<body>
<!-- estructura superior -->
<div class="container my-5">
<div class="row">
<div class="col-2">
<div class="bg-info p-4">
Logo
</div>
</div>
<div class="col-10">
<div class="bg-info p-4">
Menú principal
</div>
</div>
</div>
</div>
<!-- destacado de imagen -->
<section class="bg-info">
<div class="container">
<div class="row">
<div class="col-12 altura-destacado d-flex align-items-end">
<h1 class="mb-4">Destacado de imagen</h1>
</div>
</div>
</div>
</section>
<!-- sección de columnas -->
<section class="my-5">
<div class="container">
<div class="row d-flex flex-wrap">
<div class="col-lg-6 mb-4 order-lg-1">
<div class="cuadrado">
Imagen grande
</div>
</div>
<div class="col-lg-6 order-lg-0">
<div class="row">
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 mb-4">
<div class="cuadrado">
Contenido relacionado
</div>
</div>
<div class="col-md-6 mb-4 d-none d-lg-block">
<div class="row">
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
<div class="col-md-6 mb-4">
<div class="cuadrado">
Imagen
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- destacado de imagen -->
<section class="bg-info py-4">
<div class="container">
<div class="row">
<div class="col-12 d-flex align-items-end">
<h2 class="mb-4">Call to action</h2>
</div>
</div>
</div>
</section>
<!-- destacado de imagen -->
<section class="bg-secondary py-4">
<div class="container">
<div class="row">
<div class="col-12 d-flex align-items-end">
<h2 class="mb-4">Footer</h2>
</div>
</div>
</div>
</section>
<!-- BS JS desde el servidor -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment