Skip to content

Html-Layouts-2 Assignment #34

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
rbbynnslv wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Html-Layouts-2 Assignment #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3924a3a
Html-Layouts-2 Assignment
May 19, 2019
087cadd
Update user.json
rbbynnslv Jun 5, 2019
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
102 changes: 102 additions & 0 deletions first/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
body {
padding: 0;
font-family: sans-serif;
height: 100%;
}

.size {
width: 100%;
}

.container {
overflow: auto;
}

.center {
margin: 0 auto;
}

.full-height {
height: 100%;
}

.container-one {
background-color: red;
width: 350px;
height: 200px;
display: inline-block;
margin: 30px 40px 30px 90px;
}

.container-two {
background-color: cornflowerblue;
width: 350px;
height: 200px;
display: inline-block;
margin: 30px 40px 30px 0px;
}

.container-three {
background-color: dimgray;
width: 350px;
height: 200px;
display: inline-block;
margin: 30px 90px 30px 0px;
}

.container-four {
background-color: cornflowerblue;
width: 700px;
height: 500px;
display: inline-block;
margin: 30px 90px 30px 0px;
}

.container-five {
background-color: red;
width: 400px;
height: 500px;
float: left;
display: inline-block;
margin: 30px 0px 30px 90px;
}

.container-six {
background-color: cornflowerblue;
width: 700px;
height: 150px;
display: inline-block;
float: left;
margin: 0px 0px 30px 90px;
}

.container-seven {
background-color: red;
width: 50px;
height: 150px;
display: inline-block;
float: left;
}

.container-eight {
background-color: dimgray;
width: 300px;
height: 150px;
display: inline-block;
float: left;
}

.container-nine {
background-color: red;
width: 50px;
height: 150px;
display: inline-block;
float: left;
margin: 0px 90px 0px 0px;
}

.text {
margin: 0px 90px;
padding: 20px;
font-size: 25px;
}
28 changes: 28 additions & 0 deletions first/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css" />
<title> First </title>
</head>
<body class="size">
<div class="container center">
<div class="container-one"></div>
<div class="container-two"></div>
<div class="container-three"></div>
</div>

<p class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
</p>
<p class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

<div class="container-four"></div>
<div class="container-five"></div>
<div class="container-six"></div>
<div class="container-seven"></div>
<div class="container-eight"></div>
<div class="container-nine"></div>
</body>
</html>
73 changes: 73 additions & 0 deletions second/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
body {
margin: 0;
font-family: sans-serif;
background-color: gray;
}

.box-one {
background-color: white;
width: 1000px;
height: 250px;
margin: 30px 200px;
}

.box-two {
background-color: white;
width: 1000px;
height: 680px;
margin: 0px 200px;
}

.red {
background-color: red;
margin: 30px 50px;
}

.blue {
background-color: blue;
}

.btn {
width: 150px;
height: 50px;
color: white;
font: bold;
font-size: 24px;
border: none;
}

.par {
font-size: 25px;
line-height: 28px;
margin: 5px 50px;
}

.pic img {
width: 90%;
height: 400px;
margin: 0 auto;
}

.fixed-bottom {
position: fixed;
bottom: 0;
box-sizing: border-box;
width: 100%;
height: 75px;
}

.footer-link {
text-decoration: none;
color: white;
font-size: 22px;
margin-left: 40px;
}

footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
background-color: #4a4a4a;
padding: 0 20%;
}
27 changes: 27 additions & 0 deletions second/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css" />
<title> Second </title>
</head>
<body>
<main>
<div class="box-one">
<p class="par"><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<button class="red btn"><center>Click<center></button>
<button class="blue btn"><center>Click</center></button>
</div>

<div class="box-two">
<div class="pic"><br><br><br>
<center><img width="500px" height="300px" src="https://picsum.photos/500/300"/></center>
</div>
<p class="par"><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</main>
<footer class="fixed-bottom">
<a class="footer-link" href="">Apple</a>
<a class="footer-link" href="">Google</a>
</footer>
</body>
</html>
70 changes: 70 additions & 0 deletions third/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
body {
font-family: sans-serif;
margin: 0;
}

main {
box-sizing: border-box;
height: 100%;
padding: 40px;
}

main h1 {
margin-top: 32px;
margin-bottom: 0;
font-size: 48px;
color: gray;
float: left;
}

}
.img-one {
box-sizing: border-box;
width: 50%;
margin: 24px 0 0 0;
padding-left: 8px;
display: flex;
align-items: center;
justify-content: center;
}

.img-one img {
width: 100%;
}

.header {
background-color: gray;
height: 75px;
padding: 24px 40px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}

.header .nav-link {
color: white;
font-size: 24px;
text-decoration: none;
margin-right: 40px;
}

.text {
padding: 12px;
box-sizing: border-box;
max-width: 50%;
}

.text p {
font-size: 18px;
}

.pull-right {
float: right;
clear: right;
}

.pull-left {
float: left;
clear: left;
39 changes: 39 additions & 0 deletions third/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" type="text/css" />
<title> Third </title>
</head>
<body>
<div class="header">
<a class="nav-link" href="#">Apple</a>
<a class="nav-link" href="#">Google</a>
</div>

<main><h1>Type something</h1>
<div class="img-one pull-right">
<img class="img" src="https://source.unsplash.com/random/500x400" />
</div>

<div class="text pull-left">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>

<div class="text pull-right">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div></main>

</body>
</html>
4 changes: 2 additions & 2 deletions user.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"name": "",
"email": ""
"name": "Robby Ann Eslava",
"email": "robbyann.eslava@boom.camp"
}