Sesión 6. BOOTSTRAP 4
En esta práctica he realizado mi propia página web incluyendo Menús desplegables, y carrusel de fotografías, donde he expuesto varios diseños y proyectos de varios diseñadores industriales. También he añadido el link a mi blog y a la página web de donde he sacado toda la información.
El código de HTML utilizado es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 - Rosario Escudero </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.fakeimg {
height: 200px;
background: #A3E4D7;
}
</style>
</head>
<body>
<body style="background-color:#D1F2EB;">
</body>
<div class="jumbotron text-center" style="margin-bottom:0">
<body style="background-color:#76D7C4;">
</body>
<h1 style="color: #148F77"> <i><u>Diseño de Productos - Rosario Escudero </u></i></h1>
<p ><b>Una muestra de los mejores productos de diseño.
<br></br>
La actualidad del diseño industrial que sirve como fuente diaria de inspiración para los creativos de todo el mundo.
<br></br>
Esto es un espacio dedicado a la investigación y difusión de todo lo relacionado con la actualidad en el mundo del Diseño Industrial.
<br></br>
Gracias por visitarnos.</b></p>
</div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Inicio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" datatarget="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://scm-rosarioeg2023.blogspot.com/">Mi blog ;)</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://ideasdi.com/diseno-de-productos/">Web de información</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="margin-top:30px">
<div class="row">
<div class="col-sm-4">
<h2>Diseño de Productos </h2>
<h4>Silla Mei: elegancia oriental moderna</h4>
<img src="silla.jpg" class="rounded" alt="Silla" width = 300>
<p>Silla Mei quiere transmitir elegancia oriental moderna que pueda entender el mundo, al tiempo que permite a los consumidores experimentar el valor emocional único y tranquilo durante la situación epidémica.</p>
<br></br>
<h4>Batidora de pie Ziyanda diseñada por Rafael Maia.</h4>
<img src="batir.jpg" class="rounded" alt="Batir" width = 300>
<p>Ziyanda se diseño buscando un equilibrio entre el concepto rústico detrás de los potjies y la propuesta moderna y atrevida de la marca.
La armoniosa fusión entre la madera, la pintura mate y el cromo le otorgan una identidad impactante al producto, así como un aspecto lujoso dada la alta calidad de los materiales utilizados en la construcción.</p>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<br></br>
<h4>El espejo de las maravillas diseñado por Fabio Mazzeo Architects</h4>
<img src="espejo.jpg" class="circle" alt="Espejo" width = 300>
<p>El efecto es magnético y casi desconcertante. Es un espejo de maravillas, algo sacado de Lewis Carroll, novela famosa y onírica, que te lleva a un «otro» mundo excéntrico y visualmente impresionante.</p>
<br></br>
<br></br>
<br></br>
<h4>Mesa Club 44: Agape reedita los diseños de Angelo Mangiarotti</h4>
<img src="mesa.jpg" class="circle" alt="Mesa" width = 300>
<p>La mesa Club 44 es una pieza moderna pero atemporal, una vívida evocación de la cultura del buen diseño encarnada por uno de los maestros de la arquitectura y el diseño italianos del siglo XX más intrigantes y polifacéticos. Hoy, se está poniendo en producción por primera vez.</p>
</div>
</div>
</div>
<h4 align="center"> <i>Biblioteca de imágenes de Productos:</i></h4>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
<li data-target="#demo" data-slide-to="4"></li>
<li data-target="#demo" data-slide-to="5"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner" align="center">
<div class="carousel-item active" align="center">
<img class="img-fluid" src="1.jpg" alt="diseño" width = 500>
</div>
<div class="carousel-item">
<img class="img-fluid"src="2.jpg" alt="diseño" width = 500>
</div>
<div class="carousel-item" align="center">
<img class="img-fluid"src="3.jpg" alt="diseño" width = 500>
</div>
<div class="carousel-item" align="center">
<img class="img-fluid"src="4.jpg" alt="diseño" width = 500>
</div>
<div class="carousel-item" align="center">
<img class="img-fluid"src="5.jpg" alt="diseño" width = 500>
</div>
<div class="carousel-item" align="center">
<img class="img-fluid"src="6.jpg" alt="diseño" width = 500>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
<h4 style="color: #148F77"><i>Sistemas de Comunicación Multimedia.</i><h4>
</div>
</body>
</html>
En el siguiente link podéis acceder a mi página web:
Comentarios
Publicar un comentario