Add files via upload

first push
tjb17003 · Mar 6, 2020 · 0dc7934 · 0dc7934
1 parent 042befa
commit 0dc7934
Show file tree

Hide file tree

Showing 17 changed files with 318 additions and 0 deletions.
diff --git a/cssShowcase/CSS-proposal.docx b/cssShowcase/CSS-proposal.docx
diff --git a/cssShowcase/img/art1.jpg b/cssShowcase/img/art1.jpg
diff --git a/cssShowcase/img/art10.jpg b/cssShowcase/img/art10.jpg
diff --git a/cssShowcase/img/art11.JPG b/cssShowcase/img/art11.JPG
diff --git a/cssShowcase/img/art12.jpg b/cssShowcase/img/art12.jpg
diff --git a/cssShowcase/img/art13.jpg b/cssShowcase/img/art13.jpg
diff --git a/cssShowcase/img/art2.jpg b/cssShowcase/img/art2.jpg
diff --git a/cssShowcase/img/art3.jpg b/cssShowcase/img/art3.jpg
diff --git a/cssShowcase/img/art4.jpg b/cssShowcase/img/art4.jpg
diff --git a/cssShowcase/img/art5.jpg b/cssShowcase/img/art5.jpg
diff --git a/cssShowcase/img/art6.jpg b/cssShowcase/img/art6.jpg
diff --git a/cssShowcase/img/art7.jpg b/cssShowcase/img/art7.jpg
diff --git a/cssShowcase/img/art8.jpg b/cssShowcase/img/art8.jpg
diff --git a/cssShowcase/img/art9.jpg b/cssShowcase/img/art9.jpg
diff --git a/cssShowcase/index.html b/cssShowcase/index.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Tyler Burke</title>
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Hind:300&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Karla:700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="title">
+        <p aria-label="Tyler">
+            <span data-text="T">T</span>
+            <span data-text="Y">Y</span>
+            <span data-text="L">L</span>
+            <span data-text="E">E</span>
+            <span data-text="R">R</span>
+            <span data-text=" "> </span>
+            <span data-text="B">B</span>
+            <span data-text="U">U</span>
+            <span data-text="R">R</span>
+            <span data-text="K">K</span>
+            <span data-text="E">E</span>
+
+        </p>
+    </div>
+
+<nav id="nav">
+    <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</nav>
+<div class="center">
+    <div class ="artwork">
+
+            <div class="l">
+                <img src="../cssShowcase/img/art2.jpg" alt="">
+            </div>
+
+
+            <div class="s">
+                <img src="../cssShowcase/img/art1.jpg" alt="">
+            </div>
+
+
+
+            <div class="s">
+                <img src="../cssShowcase/img/art4.JPG" alt="">
+            </div>
+
+
+            <div class="m">
+                <img src="../cssShowcase/img/art3.jpg" alt="">
+            </div>
+
+
+
+            <div class="m">
+                <img src="../cssShowcase/img/art5.jpg" alt="">
+            </div>
+
+
+            <div class="s">
+                <img src="../cssShowcase/img/art6.jpg" alt="">
+            </div>
+
+
+
+            <div class="l">
+                <img src="../cssShowcase/img/art12.jpg" alt="">
+            </div>
+
+
+            <div class="s">
+                <img src="../cssShowcase/img/art8.jpg" alt="">
+            </div>
+
+
+
+            <div class="m">
+                <img src="../cssShowcase/img/art9.jpg" alt="">
+            </div>
+
+            <div class="m">
+                <img src="../cssShowcase/img/art10.jpg" alt="">
+            </div>
+
+
+            <div class="l">
+                <img src="../cssShowcase/img/art7.jpg" alt="">
+            </div>
+
+
+
+            <div class="s">
+                <img src="../cssShowcase/img/art11.JPG" alt="">
+            </div>
+
+
+
+
+            <div class="s">
+                <img src="../cssShowcase/img/art13.jpg" alt="">
+            </div>
+
+</div>
+</div>
+<script src="main.js"></script>
+</body>
+</html>
diff --git a/cssShowcase/main.js b/cssShowcase/main.js
@@ -0,0 +1,3 @@
+
+
+
diff --git a/cssShowcase/style.css 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;
+    }
+}
+
+
+
+