diff --git a/css-showcase-midterm.html b/css-showcase-midterm.html
index c38368e..eea35fc 100644
--- a/css-showcase-midterm.html
+++ b/css-showcase-midterm.html
@@ -25,69 +25,41 @@
-
+
+
-
- I Think
-
+
+ I Think
+
- Is Awesome!
-
-
-
- Jamison Cote
-
-
-
+
+ Is Awesome!
+
+
+
-
-
-
+
diff --git a/css/css-showcase-midterm.css b/css/css-showcase-midterm.css
index 04f9c31..e86499e 100644
--- a/css/css-showcase-midterm.css
+++ b/css/css-showcase-midterm.css
@@ -49,96 +49,6 @@
margin: 1em 0;
padding: 0;
}
-
- /* loader animation */
- $color: #fd7000;
-$size: 12px;
-$time: 1;
-
-main {
- width: 100vw;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
- background: #090707;
-}
-
-.dank-ass-loader {
- display: flex;
- flex-direction: column;
- align-items: center;
-
- .row {
- display: flex;
- }
-}
-
-.arrow {
- width: 0;
- height: 0;
- margin: 0 (-$size / 2);
- border-left: $size solid transparent;
- border-right: $size solid transparent;
- border-bottom: ($size * 1.8) solid $color;
- animation: blink $time + s infinite;
- filter: drop-shadow(0 0 ($size * 1.5) $color);
-
- &.down {
- transform: rotate(180deg);
- }
-
- @for $i from 1 through 18 {
- &.outer-#{$i} {
- animation-delay: -($time / 18) * $i + s;
- }
- }
-
- @for $i from 1 through 6 {
- &.inner-#{$i} {
- animation-delay: -($time / 6) * $i + s;
- }
- }
-}
-
-@keyframes blink {
- 0% { opacity: 0.1; }
- 30% { opacity: 1; }
- 100% { opacity: 0.1; }
-}
-
- * Remove the gap between audio, canvas, iframes,
- * images, videos and the bottom of their containers:
- * https://github.com/h5bp/html5-boilerplate/issues/440
- */
-
- audio,
- canvas,
- iframe,
- img,
- svg,
- video {
- vertical-align: middle;
- }
-
- /*
- * Remove default fieldset styles.
- */
-
- fieldset {
- border: 0;
- margin: 0;
- padding: 0;
- }
-
- /*
- * Allow only vertical resizing of textareas.
- */
-
- textarea {
- resize: vertical;
- }
-
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
@@ -258,37 +168,98 @@ html {
* {
box-sizing: border-box;
}
- /* text animation */
+
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {
margin:0px;
+ padding: 0;
font-family:'Roboto';
- text-align:center;
+ text-align: center;
background-color: black;
}
+header {
+ margin: auto;
+ width: 300px;
+}
+.wrapper {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 500px;
+}
+.txt {
+ color: #ffffff;
+ background:#000000;
+ font-size:50px;
+ font-weight: bold;
+ font-family: Arial;
+ text-transform: uppercase;
+ margin-top: 200px;
+}
+.txt::before {
+ content: 'CSS Animations by Jamison Cote';
+ position: absolute;
+ mix-blend-mode: difference;
+ filter: blur(3px);
+ font-size: 50px;
+ margin-top: 200px;
+}
+.neon-wrapper {
+ position: absolute;
+ transform: translate(-50%, -50%);
+ display: inline-flex;
+ filter: brightness(300%);
+ overflow: hidden;
+}
+.gradient{
+ background: linear-gradient(114.5793141156962deg, rgba(6, 227, 250,1) 4.927083333333334%,rgba(229, 151, 64,1) 97.84374999999999%);
+ position: absolute;
+ top: 0;
+ left:0;
+ width: 100%;
+ height:100%;
+ mix-blend-mode: multiply;
+}
+.dodge {
+ background: radial-gradient(circle,white,black 35%) center / 25% 25%;
+ position: absolute;
+ top:-100%;
+ left:-100%;
+ right:0;
+ bottom:0;
+ mix-blend-mode: color-dodge;
+ animation: dodge-area 3s linear infinite;
+}
+@keyframes dodge-area {
+ to {
+ transform: translate(50%,50%);
+ }
+}
+.section1 {
+ background-color: darkred;
+}
+ /* text animation */
#container {
color:#999;
text-transform: uppercase;
font-size:36px;
- font-weight:bold;
- padding-top:200px;
- position: absolute;
- width:100%;
- bottom:45%;
+ font-weight:bold;
display:block;
+ margin: auto;
+ width: 300px;
}
#flip {
- height:50px;
+ height: 60px;
overflow:hidden;
}
#flip > div > div {
color:#fff;
padding:4px 12px;
- height:45px;
+ height: 45px;
margin-bottom:45px;
display:inline-block;
}
@@ -326,59 +297,8 @@ p {
color:#999;
margin-top:200px;
}
-/* neon text animation */
-body {
- background: #000000;
- margin: 0;
- padding: 0;
-}
-.txt {
- color: #ffffff;
- background:#000000;
- font-size:100px;
- font-weight: bold;
- font-family: Arial;
- text-transform: uppercase;
-}
-.txt::before {
- content: 'Jamison Cote';
- position: absolute;
- mix-blend-mode: difference;
- filter: blur(3px);
- font-size: 100px;
-}
-.neon-wrapper {
- position: absolute;
- top: 80%;
- left: 50%;
- transform: translate(-50%, -50%);
- display:inline-flex;
- filter: brightness(300%);
- overflow: hidden;
-}
-.gradient{
- background: linear-gradient(114.5793141156962deg, #ff33cc 4.927083333333334%,#66ff33 97.84374999999999%);
- position: absolute;
- top: 0;
- left:0;
- width: 100%;
- height:100%;
- mix-blend-mode: multiply;
-}
-.dodge {
- background: radial-gradient(circle,white,black 35%) center / 25% 25%;
- position: absolute;
- top:-100%;
- left:-100%;
- right:0;
- bottom:0;
- mix-blend-mode: color-dodge;
- animation: dodge-area 3s linear infinite;
-}
-@keyframes dodge-area {
- to {
- transform: translate(50%,50%);
- }
+.section2 {
+ background-color: black;
}
/* flame animation */
.red {
diff --git a/css/marissa-mayer.css b/css/marissa-mayer.css
new file mode 100644
index 0000000..7a35cc0
--- /dev/null
+++ b/css/marissa-mayer.css
@@ -0,0 +1,403 @@
+/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
+
+/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
+/*
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+/* ==========================================================================
+ Base styles: opinionated defaults
+ ========================================================================== */
+
+ html {
+ color: #222;
+ font-size: 1em;
+ line-height: 1.4;
+ }
+
+ /*
+ * Remove text-shadow in selection highlight:
+ * https://twitter.com/miketaylr/status/12228805301
+ *
+ * Vendor-prefixed and regular ::selection selectors cannot be combined:
+ * https://stackoverflow.com/a/16982510/7133471
+ *
+ * Customize the background color to match your design.
+ */
+
+ ::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ ::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+ }
+
+ /*
+ * A better looking default horizontal rule
+ */
+
+ hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+ }
+
+ /*
+ * Remove the gap between audio, canvas, iframes,
+ * images, videos and the bottom of their containers:
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ */
+
+ audio,
+ canvas,
+ iframe,
+ img,
+ svg,
+ video {
+ vertical-align: middle;
+ }
+
+ /*
+ * Remove default fieldset styles.
+ */
+
+ fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+ }
+
+ /*
+ * Allow only vertical resizing of textareas.
+ */
+
+ textarea {
+ resize: vertical;
+ }
+
+ /* ==========================================================================
+ Browser Upgrade Prompt
+ ========================================================================== */
+
+ .browserupgrade {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
+ }
+
+ /* ==========================================================================
+ Author's custom styles
+ ========================================================================== */
+ * {
+ box-sizing: border-box;
+ }
+ header {
+ position: absolute;
+ top:12px;
+ right:30px;
+ }
+
+ header a:link, a:visited, a:active {
+ color: #2a2a2a;
+ font-family: arial, sans-serif;
+ font-size:12px;
+ text-decoration:none;
+ margin-right:5px;
+ margin-left:5px;
+ position:relative;
+ top:-10px;
+ }
+
+ header a:hover {
+ text-decoration:underline;
+ }
+
+ #products {
+ margin-right:8px;
+ margin-left:8px;
+ }
+
+ #bell {
+ margin-right:10px;
+ margin-left:8px;
+ }
+
+ #share {
+ margin-right:10px;
+ margin-left:10px;
+ }
+
+ #marissa {
+ border-radius:80%;
+ width: 80px;
+ }
+
+ div {
+ display:block;
+ margin: auto;
+ text-align:center;
+ padding-top: 14%;
+ }
+
+ div img {
+ width: 270px;
+ height: 95px;
+ margin:5px;
+ }
+
+ .search {
+ width: 570px;
+ height: 28px;
+ border-top: 1px solid #bdbdbd;
+ border-bottom: 1px solid #d3d3d3;
+ border-right: 1px solid #d3d3d3;
+ border-left: 1px solid #d3d3d3;
+ padding-right: 30px;
+ font: 16px arial, sans-serif;
+ text-indent:5px;
+ background: url('data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5BAEAAAcALAAAAAAcACYAAAO9eLpMIMYIQJi9DcYtKv6KtnHgB4yoAZSXKAyDy1rjoAzjzOQLrx8+4OanCAZnxiExGSEKmz3lj2lwUq3SZ3WZPbKuXGgxu9t4tLYDTkpIRQILF0x2G4lWipM7gj/oJQUkcXsCDCIFATULBCIcZ2tvB3QLDxETFnR/BgU/gRt9jX0gnpYMkJZpFzEoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs');
+ background-repeat:no-repeat;
+ background-position:548px 4px;
+ background-size:14px 19px;
+ }
+
+ .button {
+ border: 1px solid #d3d3d3;
+ background: #f3f3f3;
+ color:#696969;
+ margin-left:4px;
+ margin-right:4px;
+ margin-top: 15px;
+ font-family: arial, sans-serif;
+ font-size: 11px;
+ font-weight: bold;
+ padding: 7px;
+ border-radius:2px;
+ }
+
+ .button:hover {
+ color: #2a2a2a;
+ border: 1px solid #bdbdbd;
+ }
+
+ .search:hover {
+ border:1px solid #aaaaaa;
+ }
+
+ footer {
+ position: absolute;
+ bottom:0px;
+ left:0px;
+ right:0px;
+ background:#f3f3f3;
+ padding-top:22px;
+ border-top: 1px solid #e9e9e9;
+ }
+
+ footer a:link, a:visited, a:active {
+ color: #696969;
+ font-family: arial, sans-serif;
+ font-size:12px;
+ text-decoration:none;
+ }
+
+ footer a:hover {
+ text-decoration:underline;
+ }
+
+ .leftlinks {
+ position: relative;
+ bottom:12px;
+ left:18px;
+ padding-right:15px;
+ padding-left:15px;
+ }
+
+ .rightlinks {
+ position: relative;
+ bottom:9px;
+ float:right;
+ right:18px;
+ padding-right:15px;
+ padding-left:15px;
+ }
+
+ input[type="search"]::-webkit-search-decoration,
+ input[type="search"]::-webkit-search-cancel-button,
+ input[type="search"]::-webkit-search-results-button,
+ input[type="search"]::-webkit-search-results-decoration { display: none; }
+ input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
+ input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
+ /* ==========================================================================
+ Helper classes
+ ========================================================================== */
+
+ /*
+ * Hide visually and from screen readers
+ */
+
+ .hidden {
+ display: none !important;
+ }
+
+ /*
+ * Hide only visually, but have it available for screen readers:
+ * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+ *
+ * 1. For long content, line feeds are not interpreted as spaces and small width
+ * causes content to wrap 1 word per line:
+ * https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
+ */
+
+ .sr-only {
+ border: 0;
+ clip: rect(0, 0, 0, 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+ /* 1 */
+ }
+
+ /*
+ * Extends the .sr-only class to allow the element
+ * to be focusable when navigated to via the keyboard:
+ * https://www.drupal.org/node/897638
+ */
+
+ .sr-only.focusable:active,
+ .sr-only.focusable:focus {
+ clip: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ position: static;
+ white-space: inherit;
+ width: auto;
+ }
+
+ /*
+ * Hide visually and from screen readers, but maintain layout
+ */
+
+ .invisible {
+ visibility: hidden;
+ }
+
+ /*
+ * Clearfix: contain floats
+ *
+ * For modern browsers
+ * 1. The space content is one way to avoid an Opera bug when the
+ * `contenteditable` attribute is included anywhere else in the document.
+ * Otherwise it causes space to appear at the top and bottom of elements
+ * that receive the `clearfix` class.
+ * 2. The use of `table` rather than `block` is only necessary if using
+ * `:before` to contain the top-margins of child elements.
+ */
+
+ .clearfix:before,
+ .clearfix:after {
+ content: " ";
+ /* 1 */
+ display: table;
+ /* 2 */
+ }
+
+ .clearfix:after {
+ clear: both;
+ }
+
+ /* ==========================================================================
+ EXAMPLE Media Queries for Responsive Design.
+ These examples override the primary ('mobile first') styles.
+ Modify as content requires.
+ ========================================================================== */
+
+ @media only screen and (min-width: 35em) {
+ /* Style adjustments for viewports that meet the condition */
+ }
+
+ @media print,
+ (-webkit-min-device-pixel-ratio: 1.25),
+ (min-resolution: 1.25dppx),
+ (min-resolution: 120dpi) {
+ /* Style adjustments for high resolution devices */
+ }
+
+ /* ==========================================================================
+ Print styles.
+ Inlined to avoid the additional HTTP request:
+ https://www.phpied.com/delay-loading-your-print-css/
+ ========================================================================== */
+
+ @media print {
+ *,
+ *:before,
+ *:after {
+ background: transparent !important;
+ color: #000 !important;
+ /* Black prints faster */
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+ /*
+ * Don't show links that are fragment identifiers,
+ * or use the `javascript:` pseudo protocol
+ */
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: "";
+ }
+ pre {
+ white-space: pre-wrap !important;
+ }
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+ /*
+ * Printing Tables:
+ * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
+ */
+ thead {
+ display: table-header-group;
+ }
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+ }
\ No newline at end of file
diff --git a/css/week4-layout2.css b/css/week4-layout2.css
index 96d77db..110b1fc 100644
--- a/css/week4-layout2.css
+++ b/css/week4-layout2.css
@@ -97,21 +97,20 @@
/* ==========================================================================
Author's custom styles
========================================================================== */
+ body {
+ margin: 0;
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
img {
width: 50px;
}
h1 {
margin: 0.67em 0 0 0;
}
- div {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- align-content: center;
- width: 100vw;
- height: 100vw;
- }
button {
background-color: #34b7e3;
border-radius: 5px;
diff --git a/img/Me.PNG b/img/Me.PNG
deleted file mode 100644
index 6331f5f..0000000
Binary files a/img/Me.PNG and /dev/null differ
diff --git a/img/inbox-solid.svg b/img/inbox-solid.svg
new file mode 100644
index 0000000..88a6908
--- /dev/null
+++ b/img/inbox-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/logo_navbar_u70.png b/img/logo_navbar_u70.png
deleted file mode 100644
index 0de02de..0000000
Binary files a/img/logo_navbar_u70.png and /dev/null differ
diff --git a/img/logo_navbar_u701.png b/img/logo_navbar_u701.png
deleted file mode 100644
index f43e86c..0000000
Binary files a/img/logo_navbar_u701.png and /dev/null differ
diff --git a/img/marissamayer.jpg b/img/marissamayer.jpg
new file mode 100644
index 0000000..3c685b9
Binary files /dev/null and b/img/marissamayer.jpg differ
diff --git a/img/me.JPG b/img/me.JPG
deleted file mode 100644
index 3febd4f..0000000
Binary files a/img/me.JPG and /dev/null differ
diff --git a/tile-wide.png b/img/tile-wide.png
similarity index 100%
rename from tile-wide.png
rename to img/tile-wide.png
diff --git a/tile.png b/img/tile.png
similarity index 100%
rename from tile.png
rename to img/tile.png
diff --git a/img/u2_state0.jpg b/img/u2_state0.jpg
deleted file mode 100644
index b852b15..0000000
Binary files a/img/u2_state0.jpg and /dev/null differ
diff --git a/marissa-mayer.html b/marissa-mayer.html
new file mode 100644
index 0000000..41f78a4
--- /dev/null
+++ b/marissa-mayer.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+ Marissa Mayer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/week4-layout2.html b/week4-layout2.html
index 097ab08..2cabf8b 100644
--- a/week4-layout2.html
+++ b/week4-layout2.html
@@ -23,12 +23,11 @@
-
Welcome to the app!
Thanks for signing up. Let's take a look around.
-
+