El documento presenta el código HTML y CSS correspondiente a la semana 1 del curso de Programación Web II. Se genera el código para insertar imágenes responsive utilizando viewport y se añade un borde debajo de la imagen. También se aplican estilos CSS para dar formato a los textos con diferentes colores y tamaños de fuente. El documento incluye el código HTML y CSS final.
0 calificaciones0% encontró este documento útil (0 votos)
16 vistas10 páginas
El documento presenta el código HTML y CSS correspondiente a la semana 1 del curso de Programación Web II. Se genera el código para insertar imágenes responsive utilizando viewport y se añade un borde debajo de la imagen. También se aplican estilos CSS para dar formato a los textos con diferentes colores y tamaños de fuente. El documento incluye el código HTML y CSS final.
El documento presenta el código HTML y CSS correspondiente a la semana 1 del curso de Programación Web II. Se genera el código para insertar imágenes responsive utilizando viewport y se añade un borde debajo de la imagen. También se aplican estilos CSS para dar formato a los textos con diferentes colores y tamaños de fuente. El documento incluye el código HTML y CSS final.
El documento presenta el código HTML y CSS correspondiente a la semana 1 del curso de Programación Web II. Se genera el código para insertar imágenes responsive utilizando viewport y se añade un borde debajo de la imagen. También se aplican estilos CSS para dar formato a los textos con diferentes colores y tamaños de fuente. El documento incluye el código HTML y CSS final.
<source media="(max-width: 640px) and (max-height: 640px)" srcset="img/imagen1.jpg">
<source media="(max-width: 768px) and (max-height: 720px)" srcset="img/imagen2.jpg">
<img src="img/imagen1.jpg">
</picture>
</div>
<div class="borde">
<br>
<br>
</div>
</div>
<br> <h2>Lorem ipsum dolor sit amet</h2>
<p>Nulla pretium. Sed tempus nunc vitae neque. <span class="stl1">Suspendisse gravida</span>, mentus a scelerisque sollicirudin, lacus velit ultricies nist, nonummy tempus neque diam quis felis. <Span class="stl2">Etiam sagittis tortor</Span> sed arcu sagittis tristique.</p>
<h3>Aliquam tincidunt, sem eget volutpat porta</h3>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <span class="stl3"> Aenean turpis metus, <em> aliguan non </em>, tristique in</span>, pretium varius, sapien. Proin vitae nisi. Suspendisse <span class="stl4"> odio ar dui. In in elit </span> sed metus pretium elementum.</p>
</div>
</body>
</html>
Codigo CSS:
.borde {
border-color: blue;
border-width: 2px;
border-style: solid;
img{
width: 100%;
padding: 1%;
h2{
color:rgba(20, 180, 170, 0.8);
h3{
color: blue;
em{
color: blue; }
p{
font-weight: 550;
font-family: Times New Roman;
font-size: 17px;
.stl1{
color: red;
font-size: 18px
.stl2{
color:rgb(246, 167, 10) ;
.stl3{
color: red;
text-decoration: underline red;
.stl4{
color: blueviolet;
} REFERENCIAS BIBLIOGRÁFICAS
IACC. (2020). Diseño HTML adaptable (Responsive), Bootstrap. Programación Web II. Semana 1
