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 @@ - +
+ +
+
+ CSS Animations by Jamison Cote + + +
+
+
+
-
- I Think -
+
+ I Think +
Web Design
UConn
Connecticut
-
- 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 + + + + + + + + + + + + + + + + + + + + + +
+ About + Store + Gmail + Images + +
+
+ +

+
+ + +
+
+ + + + + + + + + + + + + + + \ 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.

-
+