Scribd
Upload
3 views3 pages

Ejercicio 1

The document contains HTML and CSS code for two exercises demonstrating responsive grid layouts. The first exercise features a multi-column layout that collapses into a single column on smaller screens, while the second exercise showcases a grid layout with different colored boxes for tweets, replies, search, and messages. Media queries are used in both exercises to adjust the layout based on screen size.

Uploaded by

yandrialexander472000
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Ejercicio 1

The document contains HTML and CSS code for two exercises demonstrating responsive grid layouts. The first exercise features a multi-column layout that collapses into a single column on smaller screens, while the second exercise showcases a grid layout with different colored boxes for tweets, replies, search, and messages. Media queries are used in both exercises to adjust the layout based on screen size.

Uploaded by

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

EJERCICIO 1

CÓDIGO HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<<link rel="stylesheet" href="texto.css">
<title>Document</title>
</head>
<body>
<h1>Responsive Grids | collapse to full width single column</h1>
<div class="container">
<div class="c1">Content Area 1</div>
<div class="2col">
<div class="c2">Content Area 2</div>
<div class="c3">Content Area 3</div>
</div>
<div class="3col">
<div class="c4">Content Area 4</div>
<div class="c5">Content Area 5</div>
<div class="c6">Content Area 6</div>
</div>
</div>

</body>
</html>

CÓDIGO CSS

html, body{
margin: 0; .c1{
padding: 0; display: inline-block;
font-family: 'Ubuntu'; padding: 120px 0;
} margin: 0px auto;
width: 100%;
h1{ text-align: center;
text-align: center; background-color: rgb(255, 184, 126);
padding: 20px 0; }
}
.c2{
.container{ display: inline-block;
max-width: 1200px; float: left;
margin: 30px auto; width: 50%;
padding: 0; text-align: center;
} padding: 120px 0;
margin: 0px;
div{ background-color: #8fbbd9;
margin: 0;
padding: 0; }
}
.c3{
display: inline-block;
float: left; /* Collapse to full width column */
width: 50%;
text-align: center; @media only screen and (max-width:
padding: 120px 0; 750px){
background-color: #7ed9a7; .c4{
} width: 100%;
}
.c4{ .c5{
display: inline-block; width: 100%;
float: left; }
width: 33.33%; .c6{
text-align: center; width: 100%;
padding: 120px 0; }
background-color: rgb(230, 150, 134); }
}
@media only screen and (max-width:
.c5{ 660px){
display: inline-block; .c2{
float: left; width: 100%;
width: 33.33%; }
text-align: center; .c3{
padding: 120px 0; width: 100%;
background-color: rgb(230, 203, 118); }
} }

.c6{
display: inline-block;
float: left;
width: 33.33%;
text-align: center;
padding: 120px 0;
background-color: rgb(173, 170, 230);
}
EJERCICIO 2

CÓDIGO HTML

<div class='app-layout'>
<div class='box tweets'>Tweets</div>
<div class='box replies'>Replies</div>
<div class='box search'>Search</div>
<div class='box messages'>Messages</div>
</div>

CÓDIGO CSS

body {
margin: 0;
font-family: Arial;
background-color: #f2f2f2;
}

.box {
color: #fff;
padding: 1em;
text-align: center;
background-color: #efefef;
}

.tweets { background-color: #A2DED0; }


.replies { background-color: #F4D03F; }
.search { background-color: #6C7A89; }
.messages { background-color: #59ABE3; }

/* Our Grid Code */


.app-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100vh;
}

/* try to resize the screen */


@media screen and (max-width: 1024px) {
.app-layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50vh 50vh;
}
}

You might also like