Skip to content

In Class Lab #1

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

In Class Lab #1

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2faf62f
Completed the display section of the challenges.
Sep 19, 2019
0fb5f41
Finished the Box Model section.
Sep 19, 2019
400f33e
Fixed display-05 and stopped at float-04 for a break.
Sep 19, 2019
9e8bd54
Finished the float section after my break.
Sep 19, 2019
8a2ffce
Finished up to position 2. Starting position 3.
Sep 19, 2019
d26df91
Took a while on Position 3, almost end of day save.
Sep 19, 2019
768be50
started position 4
Sep 19, 2019
4c2c8cd
Finished the position exercises.
Sep 19, 2019
dd18b2b
Attempted Layout section.
Sep 19, 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
251 changes: 249 additions & 2 deletions my-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,251 @@
/* Your Stylesheet */

#display-01 div {
display: inline;
border: thin solid blue;
margin: 0px 20px 0px 20px;
}
#display-02 span {
display: block;
border: thin solid red;
margin: 0px;
}
#display-03 div {
display: inline;
border: thin solid green;
padding: 5px;
background: green;
}
#display-04 div:first-of-type {
display: none;
}
#display-05 a {
background: grey;
padding: 10px 0px 10px 0px;
margin: 0 auto;
width: 50%;
display: block;
}
#boxmodel-01 div {
box-sizing: content-box;
margin: 0 auto;
width: 50%;
padding: 30px 30px 30px 30px;
border: thick solid black;
}
#boxmodel-02 div {
box-sizing: content-box;
width: 50%;
padding: 30px;
border: thick solid black;
margin: 0 auto;
}
#float-01 img {
float: left;
margin: 1em 10px 10px 0px;
}
#float-02 img {
float: right;
margin: 1em 0px 10px 10px;
}
#float-02 p {
text-align: justify;
}
#float-03 img {
float: left;
margin: 1em;
}
#float-03 .clear {
clear: both;
}
#float-04 img {
float: left;
margin: 1em;
}
#float-04 div {
background: lightblue;
content: "";
display: table;
clear: both;
}
#float-05 p:first-child {
box-sizing: border-box;
float: left;
width: 50%;
padding-right: 10px;
}
#float-05 p:last-child {
box-sizing: border-box;
float: right;
width: 50%;
padding-left: 10px;
border-left: thin solid black;
}
#float-06 div p:first-child {
box-sizing: border-box;
float: left;
width: 50%;
padding-right: 10px;
border-right: thin solid black;
}
#float-06 div p:last-child {
box-sizing: border-box;
float: right;
width: 50%;
padding-left: 10px;
}
#float-06 div::after {
content: "";
display: table;
clear: both;
}
#position-01 div {
width: 40px;
height: 40px;
background: red;
}
#position-01 div:nth-child(even) {
display: inline-block;
position: relative;
top: 0px;
bottom: 20px;
left: 40px;
}
#position-02 div {
border: thin solid black;
}
#position-02 span:nth-child(1){
position: absolute;
top: 0px;
left: 0px;
}
#position-02 span:nth-child(2) {
position: absolute;
top: 0px;
right: 0px;
}
#position-02 span:nth-child(3) {
position: absolute;
bottom: 0px;
right: 0px;
}
#position-02 span:nth-child(4) {
position: absolute;
bottom: 0px;
left: 0px;
}
#position-03 div {
position: relative;
border: thin solid black;
height: 100px;
}
#position-03 span:nth-child(1) {
position: absolute;
top: 0px;
left: 0px;
}
#position-03 span:nth-child(2) {
position: absolute;
top: 0;
right: 0;
}
#position-03 span:nth-child(3) {
position: absolute;
bottom: 0;
right: 0;
}
#position-03 span:nth-child(4) {
position: absolute;
bottom: 0;
left: 0;
}
section#position-04 {
position: static;
}
#position-04 div {
position: absolute;
top: 0;
}
#position-05 .outer-box:first-child {
position: relative;
background: lightgray;
width: 4rem;
height: 4rem;
top: 1rem;
left: 0;
}
#position-05 .outer-box:last-child {
position: relative;
background: lightgray;
width: 4rem;
height: 4rem;
top: -3rem;
left: 20rem;
}
#position-05 .inner-box {
position: relative;
background: darkgray;
width: 1rem;
height: 1rem;
top:1.5rem;
left:1.5rem;
}
#position-06 div {
position: absolute;
background: lavender;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#position-07 a {
position: fixed;
top: 92%;
left: 85%;
background-color: #ffee00;
padding: 10px;
}
#position-07 a:hover {
color: green;
}
section#layout {
background: lightgrey;
}
#layout nav {
position: absolute;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 97%;
background: lightblue;
}
#layout aside {
box-sizing: border-box;
float: right;
background: forestgreen;
color: white;
width: 50%;
margin: 5px -5rem 5px 5px;
padding: 5px;
border: solid black;
}
#layout a {
position: relative;
padding: 5px;
top: 25%;
left: 5%;
border: solid blue;
margin: 0 -3px;
}
#layout footer {
position: absolute;
margin: 0;
top: 97%;
left: 0;
right: 0;
bottom: 0;
background: crimson;
text-align: center;
}
/* All your edits should go here */