diff --git a/.DS_Store b/.DS_Store index 3457064..7f3d6cf 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/homepage/index.html b/homepage/index.html index 94f4911..4c3a5ba 100644 --- a/homepage/index.html +++ b/homepage/index.html @@ -39,6 +39,7 @@

PigZzz handcrafts!

+ \ No newline at end of file diff --git a/labs/.DS_Store b/labs/.DS_Store index 418cdcc..f05f6d8 100644 Binary files a/labs/.DS_Store and b/labs/.DS_Store differ diff --git a/labs/lab6/assets/.DS_Store b/labs/lab6/assets/.DS_Store new file mode 100644 index 0000000..ee7c9d6 Binary files /dev/null and b/labs/lab6/assets/.DS_Store differ diff --git a/labs/lab6/assets/css/q1.css b/labs/lab6/assets/css/q1.css new file mode 100644 index 0000000..50ca740 --- /dev/null +++ b/labs/lab6/assets/css/q1.css @@ -0,0 +1,36 @@ +/* ADD ANY LINES OF CODE YOU DEEM NECESSARY FOR QUESTION 1*/ + +.button { + display: inline-block; + height: 50px; + width: 50px; + background: black; + margin: 12px; + cursor: pointer; + opacity: 0.7; +} +.button:hover { + transform: rotate(180deg); + opacity: 1; + border-radius: 50%; + transition: all 0.45s; +} +/* @keyframes rotation { + 0% {transform: rotate(180deg);opacity: 1;} + 100% {transform: scale(0.8);opacity: 1; border-radius: 50%;} +} */ +#row { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +body, html { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: 0px; + height: 100%; + width: 100%; + background: #f7f5f2; + position: relative; +} diff --git a/labs/lab6/assets/css/q2.css b/labs/lab6/assets/css/q2.css new file mode 100644 index 0000000..12546de --- /dev/null +++ b/labs/lab6/assets/css/q2.css @@ -0,0 +1,62 @@ +/* ADD ANY LINES OF CODE YOU DEEM NECESSARY FOR QUESTION 2*/ + +#ball { + display: block; + height: 150px; + width: 150px; + border-radius: 50%; + background: #fd6c2d; + z-index: 1; + transform: translateY(-200px); + animation: bounce 0.45s cubic-bezier(0.42, 0, 0.7, 0.5) infinite alternate; +} + +#shadow { + height: 50px; + width: 160px; + background: black; + opacity: 0.5; + border-radius: 50%; + animation: change 0.45s cubic-bezier(0.42, 0, 0.7, 0.5) infinite alternate; +} + +#ball, #shadow { + position: relative; + margin: 0 auto; + top: 50%; +} + +body, html { + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: 0px; + height: 100%; + width: 100%; + background: #f7f5f2; + position: relative; +} +@keyframes bounce { + 0% { + transform: translateY(-200px); + } + 50% { + transform: translateY(30px); + } + 100% { + transform: translateY(-200px); + } +} +@keyframes change { + 0% { + transform: scale(1); + opacity: 0.5; + } + 50% { + transform: scale(0.5); + opacity: 0.6; + } + 100% { + transform: scale(1); + opacity: 0.5; + } +} + diff --git a/labs/lab6/assets/css/style.css b/labs/lab6/assets/css/style.css new file mode 100644 index 0000000..438c26d --- /dev/null +++ b/labs/lab6/assets/css/style.css @@ -0,0 +1,44 @@ +body, html { /*the outer layer of the site and global style attributes*/ + font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + margin: 0px; + height: 100%; + width: 100%; + background: #f7f5f2; + position: relative; +} + +/* Utility Stylesheets */ + +a { + color: inherit; + text-decoration: none; +} + +.clear { + clear: both; +} + +.img-scaled { + width: 100%; +} + + +/* INDEX */ + +.question { + background: white; + padding: 18px; + font-size: 12px; + margin-bottom: 6px; + border-radius: 2px; + text-align: center; + font-weight: 700; + color: #4a4a4a; + cursor: pointer; +} +#index { + width: 240px; + position: absolute; + left: calc(50% - 120px); + top: calc(50% - 206px); +} \ No newline at end of file diff --git a/labs/lab6/assets/css/wdd.css b/labs/lab6/assets/css/wdd.css new file mode 100644 index 0000000..598fad2 --- /dev/null +++ b/labs/lab6/assets/css/wdd.css @@ -0,0 +1,200 @@ +body { + margin: 0px; + font-family: 'Karla'; + background: #f7f5f2; + padding: 60px; +} + +a { + color: inherit; + text-decoration: none; +} + +p:first-child { + font-style: italic; +} + +p:nth-child(2) { + opacity: 0.8; +} + +.img-scaled { + width: 100%; +} + +.img-scaled-wh { + width: 100%; + height: 100%: +} + +.clear { + clear: both; +} + +* { + outline: none; +} + +#data { + display: none; +} + +.tag { + color: #6392c0; +} + +.element { + color: #de6868; +} + +#container { + width: 720px; + margin: 0px auto; + background: white; + box-shadow: 0px 0px 5px #edeae5; + border-radius: 2px; + position: relative; + padding: 30px 0px; +} +#header { + background: #78c272; + padding: 15px; + color: white; + width: 270px; +} +#header-caption-logo { + width: 20px; + float: left; +} +#header-caption-name { + float: left; + margin-left: 5px; + font-size: 12px; + font-weight: 700; + line-height: 15px; +} +#header-caption { + margin-bottom: 6px; + opacity: 0.6; +} +#header-title { + font-size: 18px; + font-weight: 300; + float: left; +} +#header-due { + float: left; + font-size: 18px; + font-weight: 300; + margin-left: 10px; + padding-left: 10px; + border-left: 2px solid rgba(255, 255, 255, 0.15); +} +.section { + margin: 30px 0px; + padding: 0px 30px; +} +/*#submission-header, .info-title { + text-align: left; + color: #78c272; + font-size: 24px; + font-weight: 700; + */ margin-bottom: 15px; +} +/*#submission-content, .info-content { + padding: 15px; + background: rgba(120, 194, 114, 0.1); + border-radius: 2px; + color: #4c5765; +}*/ +.info-required { + font-size: 13px; + font-weight: 700; + opacity: 0.75; + margin-bottom: 10px; +} +.info-intro { + line-height: 24px; + font-size: 16px; + opacity: 0.75; +} +.info { + margin-bottom: 30px; +} +.info a { + font-weight: 700; + color: black; + opacity: 0.9; +} +.body-header { + font-size: 24px; + font-weight: 700; + color: #78c272; + margin-top: 36px; +} +.body p { + line-height: 24px; +} +.body img { + width: 100%; +} +.body a { + color: #78c272; +} +.body li { + line-height: 24px; + list-style: none; +} +.body { + color: #4c5765; +} +.body .caption { + opacity: 0.6; +} +#submission { + padding: 0px 30px; +} +#submission-content p, #submission-content li { + line-height: 24px; + opacity: 0.75; +} + +#announcement-heading { + text-align: right; + color: #de6868; + font-weight: 700; + font-size: 24px; + margin-bottom: 15px; +} +#announcement-content { + padding: 15px; + background: rgba(222, 104, 104, 0.1); + color: #4c5765; + font-size: 12px; + line-height: 24px; + border-radius: 2px; +} +.download { + background: #78c272; + color: white; + width: 240px; + text-align: center; + padding: 15px 0px; + border-radius: 2px; + font-size: 13px; + font-weight: 700; + margin: 30px auto; + cursor: pointer; +} +#announcement .link { + background: #de6868; + width: 320px; + font-size: 13px; + font-weight: 700; + color: white; + text-align: center; + padding: 15px 0px; + margin: 30px auto; + border-radius: 2px; + cursor: pointer; +} diff --git a/labs/lab6/assets/img/basketball.svg b/labs/lab6/assets/img/basketball.svg new file mode 100644 index 0000000..e76d7fc --- /dev/null +++ b/labs/lab6/assets/img/basketball.svg @@ -0,0 +1,17 @@ + + + + + + + basketball + + + + + + + + + + diff --git a/labs/lab6/index.html b/labs/lab6/index.html index bf6125b..abac9fb 100644 --- a/labs/lab6/index.html +++ b/labs/lab6/index.html @@ -1,6 +1,13 @@ - - - Lab 1 - + +Index + + + + +
+
Question 1
 +
Question 2
 +
+ \ No newline at end of file diff --git a/labs/lab6/question1.html b/labs/lab6/question1.html new file mode 100644 index 0000000..8252115 --- /dev/null +++ b/labs/lab6/question1.html @@ -0,0 +1,18 @@ + + +Question 1 + + + + +
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/labs/lab6/question2.html b/labs/lab6/question2.html new file mode 100644 index 0000000..aa5d424 --- /dev/null +++ b/labs/lab6/question2.html @@ -0,0 +1,12 @@ + + +Question 2 + + + + + +
+ + + \ No newline at end of file