Skip to content

first commit #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

first commit #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<div class="container">
<div class="one" style="padding-left:15px;">Header</strong>
<br>
<p>Lorem impsum dolo</p>
</div>

<div class="row-desktop">
<div class="two" style="padding-left:15px;"> Hero
<br>
<p>Lorem fistrum ad hasta luego Lucas se calle ustée aliqua eiusmod duis no te digo trigo por no llamarte Rodrigor enim sit amet enim. Torpedo qué dise usteer veniam minim et ese pedazo de pupita amatomaa eiusmod ullamco consequat. Ullamco benemeritaar no puedor caballo blanco caballo negroorl te voy a borrar el cerito dolore laboris nostrud veniam pecador al ataquerl. Por la gloria de mi madre al ataquerl magna mamaar voluptate ad pupita va usté muy cargadoo. Al ataquerl consequat ad papaar papaar. Condemor amatomaa benemeritaar quis ut consequat condemor esse.</p>
</div>
<div class="row-tablet">
<div class="three" style="padding-left:15px;"> content
<br>
<br>
<p>veniam pecador ullamco magna amatomaa tiene musho peligro ut va usté muy cargadoo. Officia elit ese hombree irure no puedor benemeritaar consequat papaar papaar condemor. Incididunt consectetur consequat la caidita hasta luego Lucas fistro tiene musho peligro adipisicing ese hombree veniam. Velit ese que llega aute labore mamaar labore. Caballo blanco caballo negroorl me cago en tus muelas aliqua minim sit amet sexuarl velit qui aute. Commodo aliqua ad papaar papaar te voy a borrar el cerito a peich et. Te va a hasé pupitaa ut elit aliquip por la gloria de mi madre ese que llega consequat laboris ut. Jarl papaar papaar dolor laboris ex dolor officia mamaar.</p>
<br>
<br>
<p> Consequat sit amet sit amet aute llevame al sircoo te va a hasé pupitaa enim pupita amatomaa caballo blanco caballo negroorl. Qué dise usteer ut ad benemeritaar elit esse fistro. Te voy a borrar el cerito ese hombree me cago en tus muelas exercitation nisi fistro a wan. Adipisicing sit amet ese que llega aliquip hasta luego Lucas enim enim amatomaa. Condemor enim aute dolor diodeno a gramenawer cillum a wan</p>
</div>

<div class="four" style="padding-left:15px;"> Sidebar
<br>
<p>Lorem fistrum ad hasta luego Lucas se calle ustée aliqua eiusmod duis no te digo trigo por no llamarte Rodrigor enim sit amet enim. Torpedo qué dise usteer veniam minim et ese pedazo de pupita amatomaa eiusmod ullamco consequat. Ullamco benemeritaar no puedor caballo blanco caballo negroorl te voy a borrar el cerito dolore laboris nostrud veniam pecador al ataquerl. Por la gloria de mi madre al ataquerl magna mamaar voluptate ad pupita va usté muy cargadoo. Al ataquerl consequat ad papaar papaar. Condemor amatomaa benemeritaar quis ut consequat condemor esse.</p>
</div>
</div>
</div>
<div class="five" style="padding-left:15px;"> Footer<br>
<p>
fistrum ad hasta luego Lucas se calle ustée aliqua eiusmod duis no.
</p>
</div>
</div>
</html>
120 changes: 120 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
*{

max-width: 100%;

}

.container div{
color:aliceblue;

/* border-right: white;*/
border-left: white;

/*margin:auto;
font-size-adjust: 0.5;

max-width: 100%;*/
}
.one{
background-color:aqua;
padding: 30px 30px 20px;
font-family: arial;
font-size: 15px;
color:aqua;
text-align: justify;
}


.two{
background-color:rgb(255, 60, 0);
padding: 30px 30px 20px;
font-family: arial;
font-size: 15px;
color:aqua;

text-align: justify;
}
.three{
background-color:green;
padding: 30px 30px 20px;
font-family: arial;
font-size: 15px;
color:aqua;
text-align: justify;



}
.four{
background-color:rgb(79, 0, 128);
padding: 30px 30px 20px;
font-family: arial;
font-size: 15px;
color:aqua;
text-align: justify;
}
.five{
background-color:grey;
padding: 30px 30px 20px;
font-family: arial;
font-size: 15px;
color:aqua;
text-align: justify;

}

@media screen and (max-width: 400px) {

.one, .five {
display: block;
width: 100%;
padding-bottom: 30px;
}
.two, .four, .three {
display: block;
width: 100%;
padding-bottom: 30px;
}
}

@media screen and (min-width: 401px) and (max-width: 1000px) {

.one, .two, .five {
display: block;
width: 100%;
/*padding-bottom: 30px;*/
}
.row-tablet {

display: flex;
width: 100%;
margin:auto;
/* flex-flow: column;*/

}

}
@media screen and (min-width: 1001px) and (max-width: 3000px) {

.one, .five {
display: block;
width: 100%;

}
.two {
display: flex;
justify-content: center;
width: 76%;
margin: auto;
}
.row-tablet{

display: flex;
justify-content:center;
width: 80%;
padding-left: 100px;
padding-right: 100px;
margin: auto;
}

}