diff --git a/cssShowcase/CSS-proposal.docx b/cssShowcase/CSS-proposal.docx new file mode 100644 index 0000000..ce68692 Binary files /dev/null and b/cssShowcase/CSS-proposal.docx differ diff --git a/cssShowcase/img/art1.jpg b/cssShowcase/img/art1.jpg new file mode 100644 index 0000000..afba286 Binary files /dev/null and b/cssShowcase/img/art1.jpg differ diff --git a/cssShowcase/img/art10.jpg b/cssShowcase/img/art10.jpg new file mode 100644 index 0000000..bc4acb5 Binary files /dev/null and b/cssShowcase/img/art10.jpg differ diff --git a/cssShowcase/img/art11.JPG b/cssShowcase/img/art11.JPG new file mode 100644 index 0000000..e429873 Binary files /dev/null and b/cssShowcase/img/art11.JPG differ diff --git a/cssShowcase/img/art12.jpg b/cssShowcase/img/art12.jpg new file mode 100644 index 0000000..327b61b Binary files /dev/null and b/cssShowcase/img/art12.jpg differ diff --git a/cssShowcase/img/art13.jpg b/cssShowcase/img/art13.jpg new file mode 100644 index 0000000..604aa4d Binary files /dev/null and b/cssShowcase/img/art13.jpg differ diff --git a/cssShowcase/img/art2.jpg b/cssShowcase/img/art2.jpg new file mode 100644 index 0000000..44fb7f3 Binary files /dev/null and b/cssShowcase/img/art2.jpg differ diff --git a/cssShowcase/img/art3.jpg b/cssShowcase/img/art3.jpg new file mode 100644 index 0000000..742f78c Binary files /dev/null and b/cssShowcase/img/art3.jpg differ diff --git a/cssShowcase/img/art4.jpg b/cssShowcase/img/art4.jpg new file mode 100644 index 0000000..0f40ff9 Binary files /dev/null and b/cssShowcase/img/art4.jpg differ diff --git a/cssShowcase/img/art5.jpg b/cssShowcase/img/art5.jpg new file mode 100644 index 0000000..19c910c Binary files /dev/null and b/cssShowcase/img/art5.jpg differ diff --git a/cssShowcase/img/art6.jpg b/cssShowcase/img/art6.jpg new file mode 100644 index 0000000..631d509 Binary files /dev/null and b/cssShowcase/img/art6.jpg differ diff --git a/cssShowcase/img/art7.jpg b/cssShowcase/img/art7.jpg new file mode 100644 index 0000000..bcbde5a Binary files /dev/null and b/cssShowcase/img/art7.jpg differ diff --git a/cssShowcase/img/art8.jpg b/cssShowcase/img/art8.jpg new file mode 100644 index 0000000..62371a0 Binary files /dev/null and b/cssShowcase/img/art8.jpg differ diff --git a/cssShowcase/img/art9.jpg b/cssShowcase/img/art9.jpg new file mode 100644 index 0000000..753b665 Binary files /dev/null and b/cssShowcase/img/art9.jpg differ diff --git a/cssShowcase/index.html b/cssShowcase/index.html new file mode 100644 index 0000000..6a8fe76 --- /dev/null +++ b/cssShowcase/index.html @@ -0,0 +1,114 @@ + + + + + + + Tyler Burke + + + + + +
+

+ T + Y + L + E + R + + B + U + R + K + E + +

+
+ + +
+
+ +
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + + +
+ +
+ +
+ +
+ + +
+ +
+ + + +
+ +
+ + + + +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/cssShowcase/main.js b/cssShowcase/main.js new file mode 100644 index 0000000..3c451f2 --- /dev/null +++ b/cssShowcase/main.js @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/cssShowcase/style.css b/cssShowcase/style.css new file mode 100644 index 0000000..3d5bb63 --- /dev/null +++ b/cssShowcase/style.css @@ -0,0 +1,201 @@ +* { + box-sizing: border-box; +} +body { + overflow-x: hidden; + margin: 0; + padding: 0; + + +} + +/*title*/ +.title{ + display: flex; + justify-content: center; + background-color: #b5b5b5; + width: 100%; + height: auto; +} +p { + color: #fff; + font-family: Avenir Next, Helvetica Neue, Helvetica, Tahoma, sans-serif; + font-size: 1em; + font-weight: 700; + } + p span { + display: inline-block; + position: relative; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 500; + perspective: 500; + -webkit-font-smoothing: antialiased; + } + p span::before, + p span::after { + display: none; + position: absolute; + top: 0; + left: -1px; + -webkit-transform-origin: left top; + transform-origin: left top; + -webkit-transition: all ease-out 0.1s; + transition: all ease-out 0.1s; + content: attr(data-text); + } + p span::before { + z-index: 1; + color: rgba(0,0,0,0.2); + -webkit-transform: scale(1.1, 1) skew(0deg, 20deg); + transform: scale(1.1, 1) skew(0deg, 20deg); + } + p span::after { + z-index: 2; + color:#6b6b6b; + text-shadow: -1px 0 1px#6b6b6b, 1px 0 1px #6b6b6b); + -webkit-transform: rotateY(-40deg); + transform: rotateY(-40deg); + } + p span:hover::before { + -webkit-transform: scale(1.1, 1) skew(0deg, 5deg); + transform: scale(1.1, 1) skew(0deg, 5deg); + } + p span:hover::after { + -webkit-transform: rotateY(-10deg); + transform: rotateY(-10deg); + } + p span + span { + margin-left: 0.3em; + } + @media (min-width: 20em) { + p { + font-size: 2em; + } + p span::before, + p span::after { + display: block; + } + } + @media (min-width: 20em) { + p { + font-size: 2em; + } + } + @media (min-width: 30em) { + p { + font-size: 2em; + } + } + @media (min-width: 40em) { + p { + font-size: 4em; + } + } + @media (min-width: 60em) { + p { + font-size: 4em; + } + } + +/* header */ + + +.titlename { + display: flex; + align-items: center; + justify-content: center; + font-family: 'Karla', sans-serif; + font-size: 40px; + font-weight: bold; + line-height: 1.1 + +} + + +#nav{ + display: flex; + justify-content: center; + align-items: center; + font-size: 18px; + font-family:'Hind', sans-serif; + + +} + +li{ + padding-right: 10px; +} + +a{ + text-decoration: none; + color: #cccccc; +} + + +ul{ + list-style-type: none; + display: flex; + justify-content:space-between; + align-items: center; +} + +/*///* gallery */ + + + +.center { + display: flex; + justify-content: center; + align-items: center; + padding-left: 25px; + padding-right: 25px; + + +} +.artwork{ + + display: grid; + height: 100%; + grid-template-rows: repeat(2, 1fr); + grid-template-columns: repeat(6, 1fr); + padding: 0; + margin: 0; + grid-gap: 10px; + +} + + +.m { + + grid-row: span 3; + grid-column: span 3; +} +.l { + + grid-row: span 4; + grid-column: span 4; +} +.s{ + + grid-row: span 2; + grid-column: span 2; +} +img{ + object-fit: cover; + width: 100%; + height: 100%; + +} + + +@media(min-width: 700px){ + .center{ + padding-left: 250px; + padding-right: 250px; + } +} + + + +