Skip to content

week 3 submissions in submission folder #2

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

week 3 submissions in submission folder #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
69303f0
updated toy problem images
gradmaximus Jun 26, 2019
5180b5d
merging with upstream
pdavenport Jun 29, 2019
5cc49d5
final submissions for branch week3
pdavenport Jun 30, 2019
d389d2d
added files to submission folder
pdavenport Jul 1, 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
5 changes: 4 additions & 1 deletion 01_Core/week02/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
Instructions for this week:
# Instructions for this week:

1. Watch videos assigned in https://thecurve.redventures.com/pages/72/ita-front-end
2. Read the Toy Problems in this directory
3. Submit your solutions in the submissions directory by Monday of next week at noon.

## Resources
How to create a pull request: https://help.github.com/en/desktop/contributing-to-projects/creating-a-pull-request
3 changes: 3 additions & 0 deletions 01_Core/week03/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ Install Sass - https://sass-lang.com/install
* Grid Game: https://cssgridgarden.com/
* Google Fonts: https://fonts.google.com/
* Transitions and Transforms: https://thoughtbot.com/blog/transitions-and-transforms
* CSS Reference: https://cssreference.io/
* CSS Flexbox Cheatsheet: https://devhints.io/css-flexbox
* HTML and CSS is Hard (but it doesn't have to be): https://internetingishard.com/html-and-css/


## Key Vocabulary:
Expand Down
1 change: 1 addition & 0 deletions 01_Core/week03/submissions/README.MD
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Add this week's toy problem solutions to this directory.
0 ...eek03/toyProblems/exercise2/exercise1.png → ...eek03/submissions/exercise1/exercise1.png
View file
Open in desktop
File renamed without changes
32 changes: 32 additions & 0 deletions 01_Core/week03/submissions/exercise1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CSS Exercise 1</title>
<meta name="description" content="ITA CSS Layout Exercise">
<meta name="author" content="Mark Kroh">

<style>
.body {height: 100%;}
.container {margin:auto; width: 240px;}
.interior {width: 100px; height: 100px;}
.div1 {background-color: red; position: absolute; margin-top: 70px; margin-bottom: -150px; margin-left: 70px;}
.div2 {background-color: blue; margin: 10px; float: left;}
.div3 {background-color: blue; margin: 10px; float: right;}
.div4 {background-color: blue; margin: 10px; float: left;}
.div5 {background-color: blue; margin: 10px; float: right;}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
<div class="container">
<div class="interior div1"></div>
<div class="interior div2"></div>
<div class="interior div3"></div>
<div class="interior div4"></div>
<div class="interior div5"></div>
</div>
</body>
</html>
Binary file added 01_Core/week03/submissions/exercise2/exercise 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 32 additions & 0 deletions 01_Core/week03/submissions/exercise2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CSS Exercise 2</title>
<meta name="description" content="ITA CSS Layout Exercise">
<meta name="author" content="Mark Kroh">

<style>
.body {height: 100%;}
.container {margin:auto; width: 240px;}
.interior {width: 100px; height: 100px;}
.div1 {background-color: red; position: absolute; margin-top: 70px; margin-bottom: -150px; margin-left: 70px; transform: rotate(45deg);}
.div2 {background-color: blue; margin: 10px; float: left;}
.div3 {background-color: blue; margin: 10px; float: right;}
.div4 {background-color: blue; margin: 10px; float: left;}
.div5 {background-color: blue; margin: 10px; float: right;}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
<div class="container">
<div class="interior div1"></div>
<div class="interior div2"></div>
<div class="interior div3"></div>
<div class="interior div4"></div>
<div class="interior div5"></div>
</div>
</body>
</html>
Binary file added 01_Core/week03/submissions/exercise3/exercise 3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 72 additions & 0 deletions 01_Core/week03/submissions/exercise3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CSS Exercise 3</title>
<meta name="description" content="ITA CSS Layout Exercise">
<meta name="author" content="Mark Kroh">

<style>
.body {height: 100%;}
.container {margin:auto; width: 240px; height: 240px; background-color: blue;}
/* begin star div */
.div5 {
margin-top: 116px;
margin-left: 110px;
position: absolute;
display: block;
color: black;
width: 0px;
height: 0px;
border-right: 10px solid transparent;
border-bottom: 7px solid black;
border-left: 10px solid transparent;
transform: rotate(35deg);
}
.div5:before {
border-bottom: 8px solid black;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -4.5px;
left: -6px;
display: block;
content: '';
transform: rotate(-35deg);
}
.div5:after {
position: absolute;
display: block;
color: green;
top: .3px;
left: -10.5px;
width: 0px;
height: 0px;
border-right: 10px solid transparent;
border-bottom: 7px solid black;
border-left: 10px solid transparent;
transform: rotate(-70deg);
content: '';
}
/* end star div */
.div4 {background-color: white; width: 30px; height: 30px; border-radius: 50%; margin: 105px; position:absolute;}
.div3 {background-color: red; width: 100px; height: 100px; position: absolute; margin-top: 70px; margin-bottom: -150px; margin-left: 70px; transform: rotate(45deg); position:absolute;}
.div2 {background-color: white; width: 100%; height: 20px; margin-top: 110px; margin-bottom: 110px; position: absolute;}
.div1 {background-color: white; width: 20px; height: 100%; margin-left: 110px; margin-right: 110px; position: absolute;}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
<div class="container">
<div class="interior div1"></div>
<div class="interior div2"></div>
<div class="interior div3"></div>
<div class="interior div4"></div>
<div class="interior div5"></div>
</div>
</body>
</html>
Binary file added 01_Core/week03/submissions/exercise4/exercise 4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions 01_Core/week03/submissions/exercise4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CSS Exercise 4</title>
<meta name="description" content="ITA CSS Layout Exercise">
<meta name="author" content="Mark Kroh">

<style>
.interior {width: 100px; height: 100px; position: absolute; }
.div1 {background-color: red; float: left;}
.div2 {background-color: orange; margin: 50px; border: 5px solid white; box-sizing:content-box;}
.div3 {background-color: yellow; margin: 100px; border: 5px solid white; box-sizing:content-box;}
.div4 {background-color: blue; margin: 150px; border: 5px solid white; box-sizing:content-box;}
.div5 {background-color: rgb(225,135,234); margin: 200px; border: 5px solid white; box-sizing:content-box;}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
<div class="container">
<div class="interior div1"></div>
<div class="interior div2"></div>
<div class="interior div3"></div>
<div class="interior div4"></div>
<div class="interior div5"></div>
</div>
</body>
</html>
Binary file added 01_Core/week03/submissions/exercise5/exercise 5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions 01_Core/week03/submissions/exercise5/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CSS Exercise 5</title>
<meta name="description" content="ITA CSS Layout Exercise">
<meta name="author" content="Mark Kroh">

<style>
.container {margin:auto; width: 370px;}
.interior {width: 100px; height: 100px;}
.div1 {background-color: red; margin: 5px; display: inline-block;}
.div2 {background-color: orange; margin: 5px; display: inline-block;}
.div3 {background-color: yellow; margin: 5px; display: inline-block;}
.div4 {background-color: blue; margin: -60px 5px 5px 55px; position: absolute; border: 5px solid white;}
.div5 {background-color: rgb(225,135,234); margin: -60px 5px 5px 175px; position: absolute; border: 5px solid white;}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
<div class="container">
<div class="interior div1"></div>
<div class="interior div2"></div>
<div class="interior div3"></div>
<div class="interior div4"></div>
<div class="interior div5"></div>
</div>
</body>
</html>
Binary file added 01_Core/week03/submissions/exercise6/exercise 6.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions 01_Core/week03/submissions/exercise6/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CSS Exercise 6</title>
<meta name="description" content="ITA CSS Layout Exercise">
<meta name="author" content="Mark Kroh">

<style>
.container {width: 500px; height: 500px; margin: auto; margin-top: -8px;}
.interior {width:100px; height: 100px; border: 5px solid rgb(255,255,255);}
.div1 {background-color:red; margin: 6px 0 0 88px; position: absolute;}
.div2 {background-color: orange; margin: 8px 0 0 237px; transform: rotate(72deg);position: absolute;}
.div3 {background-color: yellow; margin: 106px 0 0 187px; transform: rotate(54deg);position: absolute;}
.div4 {background-color: blue; margin: 56px 0 0 102px; transform: rotate(36deg); position: absolute;}
.div5 {background-color: rgb(255,135,234); margin: 41px 0 0 22px; transform: rotate(18deg); position: absolute;}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
<div class="container">
<div class="interior div1"></div>
<div class="interior div2"></div>
<div class="interior div3"></div>
<div class="interior div4"></div>
<div class="interior div5"></div>
</div>
</body>
</html>
Binary file added 01_Core/week03/submissions/exercise7/exercise 7.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions 01_Core/week03/submissions/exercise7/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title>CSS Exercise 7</title>
<meta name="description" content="ITA CSS Layout Exercise">
<meta name="author" content="Mark Kroh">

<style>
.container {margin: 20px;}
.interior {width: 340px; height: 100px; margin-bottom: 20px;}
.div1{background: linear-gradient(to right, rgb(255,0,0,.25) 0px, rgb(255,0,0,.25) 100px,white 100px, white 120px, rgb(255,0,0,.5) 120px, rgb(255,0,0,.5) 220px, white 220px, white 240px, red 240px, red 340px);}
.div2{background: linear-gradient(to right, rgb(255,165,0,.25) 0px, rgb(255,165,0,.25) 100px,white 100px, white 120px, rgb(255,165,0,.5) 120px, rgb(255,165,0,.5) 220px, white 220px, white 240px, orange 240px, orange 340px);}
.div3{background: linear-gradient(to right, rgb(255,255,0,.25) 0px, rgb(255,255,0,.25) 100px,white 100px, white 120px, rgb(255,255,0,.5) 120px, rgb(255,255,0,.5) 220px, white 220px, white 240px, yellow 240px, yellow 340px);}
.div4{background: linear-gradient(to right, rgb(0,0,255,.25) 0px, rgb(0,0,255,.25) 100px,white 100px, white 120px, rgb(0,0,255,.5) 120px, rgb(0,0,255,.5) 220px, white 220px, white 240px, blue 240px, blue 340px);}
.div5{background: linear-gradient(to right, rgb(255,135,234,.25) 0px, rgb(255,135,234,.25) 100px,white 100px, white 120px, rgb(255,135,234,.5) 120px, rgb(255,135,234,.5) 220px, white 220px, white 240px, rgb(255,135,234) 240px, rgb(255,135,234) 340px);}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
<div class="container">
<div class="interior div1"></div>
<div class="interior div2"></div>
<div class="interior div3"></div>
<div class="interior div4"></div>
<div class="interior div5"></div>
</div>
</body>
</html>
9 changes: 8 additions & 1 deletion 01_Core/week03/toyProblems/exercise1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@
<meta name="author" content="Mark Kroh">

<style>

.body {height: 100%;}
.container {margin:auto; width: 240px;}
.interior {width: 100px; height: 100px;}
.div1 {background-color: red; position: absolute; margin-top: 70px; margin-bottom: -150px; margin-left: 70px;}
.div2 {background-color: blue; margin: 10px; float: left;}
.div3 {background-color: blue; margin: 10px; float: right;}
.div4 {background-color: blue; margin: 10px; float: left;}
.div5 {background-color: blue; margin: 10px; float: right;}
</style>
</head>
<body>
Expand Down
Binary file added 01_Core/week03/toyProblems/exercise2/exercise 2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion 01_Core/week03/toyProblems/exercise2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@
<meta name="author" content="Mark Kroh">

<style>

.body {height: 100%;}
.container {margin:auto; width: 240px;}
.interior {width: 100px; height: 100px;}
.div1 {background-color: red; position: absolute; margin-top: 70px; margin-bottom: -150px; margin-left: 70px; transform: rotate(45deg);}
.div2 {background-color: blue; margin: 10px; float: left;}
.div3 {background-color: blue; margin: 10px; float: right;}
.div4 {background-color: blue; margin: 10px; float: left;}
.div5 {background-color: blue; margin: 10px; float: right;}
</style>
</head>
<body>
Expand Down
Binary file added 01_Core/week03/toyProblems/exercise3/exercise 3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed 01_Core/week03/toyProblems/exercise3/exercise1.png
View file
Open in desktop
Binary file not shown.
51 changes: 49 additions & 2 deletions 01_Core/week03/toyProblems/exercise3/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,55 @@
<meta name="author" content="Mark Kroh">

<style>

</style>
.body {height: 100%;}
.container {margin:auto; width: 240px; height: 240px; background-color: blue;}
/* begin star div */
.div5 {
margin-top: 116px;
margin-left: 110px;
position: absolute;
display: block;
color: black;
width: 0px;
height: 0px;
border-right: 10px solid transparent;
border-bottom: 7px solid black;
border-left: 10px solid transparent;
transform: rotate(35deg);
}
.div5:before {
border-bottom: 8px solid black;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -4.5px;
left: -6px;
display: block;
content: '';
transform: rotate(-35deg);
}
.div5:after {
position: absolute;
display: block;
color: green;
top: .3px;
left: -10.5px;
width: 0px;
height: 0px;
border-right: 10px solid transparent;
border-bottom: 7px solid black;
border-left: 10px solid transparent;
transform: rotate(-70deg);
content: '';
}
/* end star div */
.div4 {background-color: white; width: 30px; height: 30px; border-radius: 50%; margin: 105px; position:absolute;}
.div3 {background-color: red; width: 100px; height: 100px; position: absolute; margin-top: 70px; margin-bottom: -150px; margin-left: 70px; transform: rotate(45deg); position:absolute;}
.div2 {background-color: white; width: 100%; height: 20px; margin-top: 110px; margin-bottom: 110px; position: absolute;}
.div1 {background-color: white; width: 20px; height: 100%; margin-left: 110px; margin-right: 110px; position: absolute;}
</style>
</head>
<body>
<!-- Do not touch the HTML please -->
Expand Down
Binary file added 01_Core/week03/toyProblems/exercise4/exercise 4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed 01_Core/week03/toyProblems/exercise4/exercise1.png
View file
Open in desktop
Binary file not shown.
7 changes: 6 additions & 1 deletion 01_Core/week03/toyProblems/exercise4/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,12 @@
<meta name="author" content="Mark Kroh">

<style>

.interior {width: 100px; height: 100px; position: absolute; }
.div1 {background-color: red; float: left;}
.div2 {background-color: orange; margin: 50px; border: 5px solid white; box-sizing:content-box;}
.div3 {background-color: yellow; margin: 100px; border: 5px solid white; box-sizing:content-box;}
.div4 {background-color: blue; margin: 150px; border: 5px solid white; box-sizing:content-box;}
.div5 {background-color: rgb(225,135,234); margin: 200px; border: 5px solid white; box-sizing:content-box;}
</style>
</head>
<body>
Expand Down
Binary file added 01_Core/week03/toyProblems/exercise5/exercise 5.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed 01_Core/week03/toyProblems/exercise5/exercise1.png
View file
Open in desktop
Binary file not shown.
Loading