diff --git a/cssShowcase/index.html b/cssShowcase/index.html index 6a8fe76..abd9e13 100644 --- a/cssShowcase/index.html +++ b/cssShowcase/index.html @@ -8,6 +8,7 @@ +
@@ -29,86 +30,126 @@ +
+
+

Hello,

+

Welcome to my page! I have chosen a few of my favored pieces to display my craft below. Currently I am attending the University of Connecticut as + a Digital Media and Design student. I am focused on a concentration of Web & Interactive Media Design.

+

I have a passion for art and creating detailed illustrations. For me conveying emotion and making an observer feel a certain way is the most rewarding + aspect of drawing. To do this I shape my artwork in a way that exposes a certain emotion leaving a lingering impression on a person. Such as picking a certain subject + matter and implementing hidden messages underneath the broader picture. Interpretation of these messages are totally individualized for the viewer. Art has the power to + transform, to educate, inspire and motivate others. It is a significant feature of my life and has altered the way I view this world.

+

Thank you for taking some time to read a little about me, enjoy some art!

+
+
+ +
+
+ +
-
- -
-
+ + +
-
+
+
+ +
- -
- -
+ -
+
+
+ +
-
+
-
- -
- + -
+
-
+
-
+
-
+
-
+
-
+
- -
+ +
+ + + + \ No newline at end of file diff --git a/cssShowcase/main.js b/cssShowcase/main.js index 3c451f2..c13cc72 100644 --- a/cssShowcase/main.js +++ b/cssShowcase/main.js @@ -1,3 +1,41 @@ - \ No newline at end of file + +var scroll = window.requestAnimationFrame || + function(callback) { + window.setTimeout(callback, 1000/60 + + )}; + +function isElementInViewport(el) { + if (typeof jQuery === "function" && el instanceof jQuery) { + el = el[0]; + } + var rect = el.getBoundingClientRect(); + return( + (rect.top <= 0 + && rect.bottom >= 0) + || + (rect.bottom >= (window.innerHeight || document + .documentElement.clientHeight) && + rect.top <= (window.innerHeight || document.documentElement.clientHeight)) + || + (rect.top >= (window.innerHeight || document + .documentElement.clientHeight)) + + ); +} +var elementToShow = document.querySelectorAll('.show-on-scroll'); + +function loop() { + elementToShow.forEach(function(element){ + if (isElementInViewport(element)) { + element.classList.add('is-visible'); + } else { + element.classList.remove('is-visible'); + } + }); + scroll(loop); +} + +loop() \ No newline at end of file diff --git a/cssShowcase/style.css b/cssShowcase/style.css index 3d5bb63..a3a0426 100644 --- a/cssShowcase/style.css +++ b/cssShowcase/style.css @@ -13,7 +13,7 @@ body { .title{ display: flex; justify-content: center; - background-color: #b5b5b5; + width: 100%; height: auto; } @@ -77,6 +77,7 @@ p { display: block; } } + @media (min-width: 20em) { p { font-size: 2em; @@ -89,7 +90,7 @@ p { } @media (min-width: 40em) { p { - font-size: 4em; + font-size: 3em; } } @media (min-width: 60em) { @@ -117,39 +118,197 @@ p { display: flex; justify-content: center; align-items: center; - font-size: 18px; font-family:'Hind', sans-serif; + +} + + + +ul { + display: flex; + justify-content: center; + + } + + ul li { + list-style: none; + } + ul li a { + position: relative; + display: block; + text-transform: uppercase; + margin: 20px 0; + padding: 10px 20px; + text-decoration: none; + color: #262626; + font-family: sans-serif; + font-size: 18px; + font-weight: 600; + transition: .5s; + z-index: 1; + } + ul li a:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-top: 2px solid #262626; + border-bottom: 2px solid #262626; + transform: scaleY(2); + opacity: 0; + transition: .3s; + } + ul li a:after { + content: ''; + position: absolute; + top: 2px; + left: 0; + width: 100%; + height: 100%; + background-color: #262626; + transform: scale(0); + opacity: 0; + transition: .3s; + z-index: -1; + } + ul li a:hover { + color: #fff; + } + ul li a:hover:before { + transform: scaleY(1); + opacity: 1; + } + ul li a:hover:after { + transform: scaleY(1); + opacity: 1; + } + +/* drop down */ + +ul.drop-menu li { + display: none; } -li{ +li > ul.drop-menu li{ + display:block; + +} +.drop-menu{ +display: block; +color: #ccc; +padding: 20px; +} + + +ul.drop-menu { + transform: perspective(1000px) rotatex(-90deg); + display: none; +} +ul.drop-menu.active { + transform: perspective(1000px) rotatex(0deg); + display: block; + padding: 0; + +} +#icons{ padding-right: 10px; + padding-left:10px ; + + +} +#icons i:hover{ + color:#fff; +} +i:hover{ + color: white ; } +.drop{ + padding: 5px; + font-size: 14px; + -a{ - text-decoration: none; - color: #cccccc; +} +a.btn.btn-2{ + margin: 5px; } +div.drop-menu2{ + + display: none; + +} +div.drop-menu2.active{ + + display: block; -ul{ - list-style-type: none; + +} +.drop-menu2{ + display: block; + font-size: 14px; + background-color:#ccc ; + +} + + +#aboutInfo{ display: flex; - justify-content:space-between; + justify-content: flex-start; align-items: center; -} + color:#262626; + background-color:#ccc ; + font-size: 28px; + margin: 25px; + font-family: 'Reenie Beanie', cursive; + font-weight: 400; +} + +/*li:hover > ul.drop-menu.menu2 +perspective: 1000px + li + opacity: 0 + transform-origin: top center + @for $i from 1 through 3 + &:nth-child(#{$i}) + animation: + name: menu2 + duration: 300ms + delay:(150ms * $i) - 300 + timing-function: ease-in-out + fill-mode: forwards + @keyframes menu2 + 0% + opacity: 0 + transform: rotateX(-90deg) + 100% + opacity: 1 + transform: rotateX(0deg)*/ + + + + + + -/*///* gallery */ +/*display*/ + +/*hover*/ + + .center { display: flex; justify-content: center; align-items: center; - padding-left: 25px; - padding-right: 25px; + padding-top: 14px; + padding-left: 30px; + padding-right: 30px; } @@ -170,17 +329,26 @@ ul{ grid-row: span 3; grid-column: span 3; + transition: .3s; + } + .l { grid-row: span 4; grid-column: span 4; + transition: .3s; } + + .s{ grid-row: span 2; - grid-column: span 2; + grid-column: span 2; + transition: .3s; } + + img{ object-fit: cover; width: 100%; @@ -189,10 +357,14 @@ img{ } -@media(min-width: 700px){ +@media(min-width: 80em){ .center{ - padding-left: 250px; - padding-right: 250px; + padding-left: 400px; + padding-right: 400px; + } + + #aboutInfo{ + font-size: 26px; } }