Skip to content

Completed Assignment #8

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
Williamconnelly wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Completed Assignment #8

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
14 changes: 13 additions & 1 deletion layout1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,18 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>I love art!</h1>
<div class="wrapper">
<div class="gray box1">
<div class="gray box5"></div>
<div class="yellow box6"></div>
<div class="gray box7"></div>
<div class="blue box8"></div>
<div class="gray box9"></div>
</div>
<div class="black box2">
<div class="gray box3"></div>
<div class="orange box4"></div>
</div>
</div>
</body>
</html>
99 changes: 97 additions & 2 deletions layout1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,98 @@
h1 {
color: rebeccapurple;
.wrapper {
display: grid;
height: 90vh;
width: 600px;
margin: auto;
margin-top: 5%;
grid-template-columns: 400px 100px;
grid-template-rows: 580px;
grid-template-areas: "gray1 black1";
}

.gray {
background-color: #dde0df;
}

.yellow {
background-color: #e4e795;
}

.black {
background-color: #2a2a28;
}

.blue {
background-color: #22469b;
}

.orange {
background-color: #d34718;
}

.box1 {
grid-area: gray1;
border: 1px solid black;
border-right: 5px solid black;
display: grid;
grid-template-rows: 60px 200px 180px;
grid-template-columns: 30px 185px 180px;
grid-template-areas: "gray3 gray3 yellow1"
"gray5 gray4 gray4"
"blue1 gray4 gray4";
}

.box5 {
grid-area: gray3;
border: 1px solid black;
border-bottom: 10px solid black;
border-right: 10px solid black;
}

.box6 {
grid-area: yellow1;
border: 1px solid black;
border-bottom: 10px solid black;
}

.box7 {
grid-area: gray4;
border: 1px solid black;
border-bottom: 10px solid black;
}

.box8 {
grid-area: blue1;
border: 1px solid black;
border-bottom: 10px solid black;
border-right: 10px solid black;
border-top: 10px solid black;
}

.box9 {
grid-area: gray5;
border: 1px solid black;
border-right: 10px solid black;
}

.box2 {
grid-area: black1;
border: 1px solid black;
border-left: 5px solid black;
display: grid;
align-content: end;
grid-template-rows: 440px 25px;
grid-template-areas: "gray2"
"orange1";
}

.box3 {
grid-area: gray2;
border: 1px solid black;
border-top: 10px solid black;
}

.box4 {
grid-area: orange1;
border: 1px solid black;
border-top: 10px solid black;
}
16 changes: 15 additions & 1 deletion layout2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,20 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>I love art!</h1>
<div class="wrapper">
<div class="black box1">
<div class="lightgray box3"></div>
<div class="black box4"></div>
<div class="yellow box5"></div>
<div class="gray box6"></div>
</div>
<div class="red box2">
<div class="gray box7"></div>
<div class="gray box8"></div>
<div class="lightgray box9"></div>
<div class="lightgray box10"></div>
<div class="blue box11"></div>
</div>
</div>
</body>
</html>
122 changes: 120 additions & 2 deletions layout2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,121 @@
h1 {
color: rebeccapurple;
.wrapper {
display: grid;
height: 90vh;
width: 600px;
margin: auto;
margin-top: 5%;
grid-template-columns: 100px 275px;
grid-template-rows: 600px;
grid-template-areas: "black1 red1";
}

.black {
background-color: #040205;
}

.red {
background-color: #e10206;
}

.lightgray {
background-color: #eceeeb;
}

.gray {
background-color: #cdccd4;
}

.yellow {
background-color: #fbfa53;
}

.blue {
background-color: #060854;
}

.box1 {
border: 1px solid black;
grid-area: black1;
border-right: 7px solid black;
display: grid;
align-content: end;
grid-template-columns: 30px 70px;
grid-template-rows: 290px 40px 220px;
grid-template-areas: "gray2 gray2"
"black2 gray3"
"yellow1 gray3";
}

.box2 {
border: 1px solid black;
grid-area: red1;
display: grid;
align-content: end;
grid-template-columns: 195px 70px 9px;
grid-template-rows: 120px 140px 120px;
grid-template-areas: "gray4 gray4 gray6"
"gray5 gray5 gray6"
"gray7 blue1 blue1";

}

.box3 {
border: 1px solid black;
grid-area: gray2;
border-right: 7px solid black;
}

.box4 {
border: 1px solid black;
grid-area: black2;
border-right: 7px solid black;
border-top: 7px solid black;
}

.box5 {
border: 1px solid black;
grid-area: yellow1;
border-right: 7px solid black;
}

.box6 {
border: 1px solid black;
grid-area: gray3;
border-right: 7px solid black;
border-top: 7px solid black;
}

.box7 {
border: 1px solid black;
grid-area: gray4;
border-right: 7px solid black;
border-top: 7px solid black;
}

.box8 {
border: 1px solid black;
grid-area: gray5;
border-right: 7px solid black;
border-top: 7px solid black;
}

.box9 {
border: 1px solid black;
grid-area: gray6;
border-top: 7px solid black;
}

.box10 {
border: 1px solid black;
grid-area: gray7;
border-bottom: 7px solid black;
border-top: 7px solid black;
border-right: 7px solid black;
}

.box11 {
border: 1px solid black;
grid-area: blue1;
border-bottom: 7px solid black;
border-top: 7px solid black;
}
16 changes: 14 additions & 2 deletions layout3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,18 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>I love art!</h1>
<div class="wrapper">
<div class="red box1">
<div class="gray box3"></div>
<div class="yellow box4"></div>
<div class="gray box5"></div>
</div>
<div class="gray box2">
<div class="gray box6"></div>
<div class="blue box7"></div>
<div class="gray box8"></div>
<div class="gray box"></div>
</div>
</div>
</body>
</html>
</html>
93 changes: 91 additions & 2 deletions layout3/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,92 @@
h1 {
color: rebeccapurple;
.wrapper {
display: grid;
height: 90vh;
width: 600px;
margin: auto;
margin-top: 5%;
grid-template-columns: 270px 320px;
grid-template-rows: 550px;
grid-template-areas: "red1 gray1";
}

.red {
background-color: #e70405;
}

.gray {
background-color: #e3e3e1;
}

.yellow {
background-color: #f4c205;
}

.blue {
background-color: #160b52;
}

.box1 {
grid-area: red1;
border: 1px solid black;
border-right: 7px solid black;
display: grid;
grid-template-columns: 50px 220px;
grid-template-rows: 140px 190px;
align-content: end;
grid-template-areas: "gray2 gray2"
"yellow1 gray3";
}

.box2 {
grid-area: gray1;
border: 1px solid black;
display: grid;
grid-template-columns: 170px 149px;
grid-template-rows: 140px 170px 20px;
align-content: end;
grid-template-areas: "gray4 gray4"
"blue1 gray5"
"gray6 gray5";
}

.box3 {
grid-area: gray2;
border-right: 7px solid black;
border-top: 7px solid black;
border-bottom: 7px solid black;
}

.box4 {
grid-area: yellow1;
border: 1px solid black;
border-right: 7px solid black;
}

.box5 {
grid-area: gray3;
border: 1px solid black;
border-right: 7px solid black;
}

.box6 {
grid-area: gray4;
border: 1px solid black;
border-top: 7px solid black;
border-bottom: 7px solid black;
}

.box7 {
grid-area: blue1;
border: 1px solid black;
border-bottom: 7px solid black;
}

.box8 {
grid-area: gray5;
border: 1px solid black;
border-left: 7px solid black;
}

.box9 {
grid-area: gray6;
}
Loading