Skip to content

layout 2 pretty close #10

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

layout 2 pretty close #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17a695c
layout 2 pretty close
Jun 1, 2018
0fa3c8a
followed along in class and fixed layout 4
Jun 1, 2018
e3f9256
layout 3
Jun 1, 2018
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
20 changes: 19 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,24 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>I love art!</h1>
<div class="whole">
<div class="left">
<div class="lefttop">
<div class="lefttoplefttop"></div>
<div class="lefttoprighttop"></div>
<div class="leftsidetop"></div>
<div class="leftsidebot"></div>
<div class="lefttopcenter"></div>
</div>
<div class="leftbottom">
</div>
<div class="right">
<div class="topright"></div>
<div class="midright"></div>
<div class="botright"></div>
</div>
</div>
</div>

</body>
</html>
3 changes: 0 additions & 3 deletions layout1/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +0,0 @@
h1 {
color: rebeccapurple;
}
20 changes: 19 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,24 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>I love art!</h1>
<div class="topleft">
<div class="toptopleft">
</div>
</div>
<div class='topright'>
<div class="toptopright"></div>
<div class="toprightbottomleft"></div>
<div class="toprightbottomright"></div>
</div>
<div class="bl">
<div class="topleftbottom"></div>
<div class="bottomleftleft"></div>
<div class="bottomleftright"></div>
</div>
<div class="br">
<div class="botbotrightright"></div>
<div class="botbotrightleft"></div>
<div class="bottomtopright"></div>
</div>
</body>
</html>
106 changes: 104 additions & 2 deletions layout2/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,105 @@
h1 {
color: rebeccapurple;
body {
display: grid;
min-height: 100vh;
max-width: 450px;
grid-template-columns: 100px 1fr;
grid-template-rows: 500px 1fr;
grid-template-areas: "topleft topright"
"bl br";

}

.topleft {
grid-area: topleft;
background-color: wheat;
border: 2px solid black;
display: grid;
grid-template-rows: 50px 1fr;
grid-template-areas: "toptopleft"
"topleft";
}

.topright {
grid-area: topright;
background-color: red;
display: grid;
grid-template-rows: 300px 1fr;
grid-template-columns: 1fr 4px;
grid-template-areas: "toptopright toptopright"
"toprightbottomleft toprightbottomright";
}

.bl {
grid-area: bl;
background-color: gray;
border-top: 2px solid black;
border-right: 2px solid black;
border-left: 2px solid black;
display: grid;
grid-template-rows: 50px 1fr;
grid-template-columns: 25px 1fr;
grid-template-areas: "topleftbottom bottomleftright"
"bottomleftleft bottomleftright";
}

.br {
grid-area: br;
background-color: grey;
border: 2px solid black;
display: grid;
grid-template-columns: 1fr 5px;
grid-template-areas: "botbotrightleft botbotrightright";
}

.toptopleft {
grid-area: toptopleft;
background-color: black;
border: 2px solid black;
}

.topleftbottom {
grid-area: topleftbottom;
background-color: black;
border: 2px solid black;
}

.bottomleftleft {
grid-area: bottomleftleft;
background-color: yellow;
border-right: 2px solid black;
}

.bottomleftright {
grid-area: bottomleftright;
background-color: lightgray;
}

.botbotrightright {
grid-area: botbotrightright;
background-color: lightgray;
border-left: 2px solid black;
}

.botbotrightleft {
grid-area: botbotrightleft;
background-color: lightgray;
border: 2px solid black;
}

.toptopright {
grid-area: toptopright;
background-color: red;
border-bottom: 2px solid black;
border-left: 2px solid black;
}

.toprightbottomleft {
grid-area: toprightbottomleft;
background-color: grey;
}

.toprightbottomright {
grid-area: toprightbottomleft;
background-color: lightgray;
border-left: 2px solid black;
}
12 changes: 11 additions & 1 deletion layout3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,16 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>I love art!</h1>
<div class="whole">
<div class="topleft"></div>
<div class="topright"></div>
<div class="midleft"></div>
<div class="midright"></div>
<div class="bottomlefty"></div>
<div class="bottomleftw"></div>
<div class="bottomrightb"></div>
<div class="bottomrightg"></div>
<div class="bottombottomright"></div>
</div>
</body>
</html>
56 changes: 54 additions & 2 deletions layout3/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,55 @@
h1 {
color: rebeccapurple;

.whole {
min-height: 75vh;
display: grid;
width: 35em;
grid-gap: .5em;
background-color: black;
grid-template-columns: 5em .4fr .6fr 5em;
grid-template-rows: .5fr .5fr 10em 1.5em;
grid-template-areas: "topleft topleft topright topright"
"midleft midleft midright midright"
"bottomlefty bottomleftw bottomrightb bottomrightg"
"bottomlefty bottomleftw bottombottomright bottomrightg";
}




.topleft {
grid-area: topleft;
background-color: red;
}
.topright{
grid-area: topright;
background-color: lightgrey;
}
.midleft {
grid-area: midleft;
background-color: lightgray;
}
.midright {
grid-area: midright;
background-color: lightgrey;
}
.bottomlefty {
grid-area: bottomlefty;
background-color: yellow;
}
.bottomleftw {
grid-area: bottomleftw;
background-color: lightgrey;
}

.bottomrightb {
grid-area: bottomrightb;
background-color: blue;
}
.bottomrightg {
grid-area: bottomrightg;
background-color: lightgray;
}
.bottombottomright {
grid-area: bottombottomright;
background-color: lightgrey;
}
10 changes: 9 additions & 1 deletion layout4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,14 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>I love art!</h1>
<div class="whole">
<div class="topleft"></div>
<div class="midleft"></div>
<div class="right"></div>
<div class="botleft"></div>
<div class="midbot"></div>
<div class="botrighttop"></div>
<div class="botrightbot"></div>
</div>
</body>
</html>
77 changes: 75 additions & 2 deletions layout4/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,76 @@
h1 {
color: rebeccapurple;
.whole {
/*margin: auto;*/
min-height: 75vh;
display: grid;
width: 50%;
grid-gap: 1em;
background-color: black;
grid-template-columns: 7em 1fr 5em;
grid-template-rows: 13em 13em .5fr .5fr;
grid-template-areas: "topleft righ righ"
"midleft righ righ"
"botleft midbot botrighttop"
"botleft midbot botrightbot";
}

/*.top{
grid-area: tp;
max-width: 400px;
display: grid;
grid-template-rows: 300px 1fr;
grid-template-columns: 100px 1fr;
grid-template-areas: "topleft righ"
"midleft righ";
}
*/
.topleft {
grid-area: topleft;
background-color: cornsilk;
/* display: grid;
grid-template-rows: 300px 1fr;
grid-template-columns: 100px 1fr;
grid-template-areas: "topleft righ"
"midleft righ";*/


}
.midleft {
grid-area: midleft;
background-color: cornsilk;



}
.right {
grid-area: righ;
background-color: red;
}
/*.bottom {
grid-area: bot;
display: grid;
max-width: 400px;
grid-template-columns: 100px 1fr;
grid-template-areas: "botleft midbot";*/

.botleft {
grid-area: botleft;
background-color: blue;
}
.midbot {
grid-area: midbot;
background-color: cornsilk;
/* display: grid;
grid-template-rows: 300px .5fr;
grid-template-columns: 1fr 20px;
grid-template-areas: "midbot botrighttop"
"midbot botrightbot"*/
}
.botrighttop {
grid-area:botrighttop;
background-color: cornsilk;
}
.botrightbot {
grid-area: botrightbot;
background-color: yellow;
}