diff --git a/W3/index.htm b/W3/index.htm new file mode 100644 index 0000000..3ee81d3 --- /dev/null +++ b/W3/index.htm @@ -0,0 +1,403 @@ + + + + + + W3 Applications + + + + + + + +
+ WEBSITES + DEV + APPS + DESIGN + ≡ +
+
+ +
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur + quaerat pariatur molestiae aperiam expedita, nihil quia cum ipsum quo + officia libero, ipsa enim quod ex repudiandae sunt laboriosam quidem + repellendus! +

+
+ random +
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur + quaerat pariatur molestiae aperiam expedita, nihil quia cum ipsum quo + officia libero, ipsa enim quod ex repudiandae sunt laboriosam quidem + repellendus! +

+
+ random +
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur + quaerat pariatur molestiae aperiam expedita, nihil quia cum ipsum quo + officia libero, ipsa enim quod ex repudiandae sunt laboriosam quidem + repellendus! +

+
+ random +
+
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur + quaerat pariatur molestiae aperiam expedita, nihil quia cum ipsum quo + officia libero, ipsa enim quod ex repudiandae sunt laboriosam quidem + repellendus! +

+
+ random +
+ + + + + diff --git a/W3/styles.css b/W3/styles.css new file mode 100644 index 0000000..8afe374 --- /dev/null +++ b/W3/styles.css @@ -0,0 +1,317 @@ +html, +body { + height: 100%; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + display: flex; + justify-content: flex-start; + align-items: center; + min-height: 500vh; + position: relative; + margin: 0; + background: #000; + padding: 0; + overflow: auto; + flex-direction: column; + font-family: "Rubik", sans-serif; + color: #fff; + line-height: 1.5; + font-size: 1rem; + width: 100%; +} + +a { + color: #e43888; + text-decoration: none; +} + +.page { + height: 100vh; + width: 100%; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + font-size: 1.2rem; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: min-content auto; + row-gap: 2rem; +} +.page#page4 { + overflow: hidden; +} +.inner { + padding-left: 5vw; + padding-right: 5vw; + width: 100%; +} +.inner p { + width: 100%; + max-width: 80ch; + margin: 0 auto 2rem auto; + padding: 0; +} +.inner p:last-child { + margin-bottom: 0; +} +.page > .inner:first-child { + padding-top: 10vw; +} +.page > img { + width: 100%; + height: 100%; + object-fit: cover; + background-color: rgba(0, 0, 0, 0.5); +} + +.page[data-page="home"] { + justify-content: center; + display: flex; +} +.page[data-color="green"] { + background: #8dc54b; +} +.page[data-color="orange"] { + background: #ee7240; +} +.page[data-color="blue"] { + background: #5abfeb; +} +.page[data-color="pink"] { + background: #e43888; +} +.top-links { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: fit-content; + display: flex; + justify-content: space-evenly; + + justify-content: center; + gap: 1rem; + + /* rotate: -1deg; */ + background-color: #000; +} +.top-links a { + font-family: "Rubik", sans-serif; + font-optical-sizing: auto; + font-weight: 700; + line-height: 1; + font-size: clamp(20px, 5vw, 4rem); + color: #000; + text-decoration: none; + padding: 0 1rem; + transition: color 0s ease-out, margin-bottom 0.1s ease-out, + border-bottom 0.1s ease-out, width 0.5s ease-in-out; + margin-bottom: 1rem; + margin-top: 1rem; + transform: translateY(-200%); + animation: links 3s cubic-bezier(0, 1.1, 0, 0.93) 1s forwards; + overflow: hidden; +} +.top-links a span { + display: block; + transition: scale 0s ease-out 0; + transform-origin: center center; +} + +.top-links a.active { + color: #fff; +} +.top-links a.active span { + transform: translateY(0.25rem); +} +.top-links a.inactive span { + scale: 0.5; + transform-origin: center left; + transition: all 0.5s ease-out; +} +.top-links a:hover, +.top-links a.active { + margin-bottom: 0; + border-bottom: 1rem solid #72a03e; +} +.top-links a.active { + border-color: #8dc54b; +} +.top-links a.col1 { + background: #8dc54b; +} +.top-links a.col2 { + background: #ee7240; + animation-delay: 1.1s; +} +.top-links a.col2:hover { + border-color: #bd5f3a; +} +.top-links a.col2.active { + border-color: #ee7240; +} +.top-links a.col3 { + background: #5abfeb; + animation-delay: 1.2s; +} +.top-links a.col3:hover { + border-color: #4990af; +} +.top-links a.col3.active { + border-color: #5abfeb; +} +.top-links a.col4 { + background: #e43888; + animation-delay: 1.3s; +} +.top-links a.col4:hover { + border-color: #b6316f; +} +.top-links a.col4.active { + border-color: #e43888; +} +.top-links a.burger-button { + color: #fff; + border-bottom-color: transparent; + display: none; +} +.top-links a.burger-button:hover { + color: #fff; + border-bottom-color: transparent; +} + +.w3-logo { + width: 70%; + height: auto; + animation: logo-enlarge ease-out 3s forwards; + max-width: 700px; + padding: 5rem 0; +} + +.w3-logo.scrolling { + animation: logo-fade linear both; + animation-timeline: scroll(); +} +.outline-w, +.outline-3 { + animation: logo-outline 5s forwards; +} + +.footer { + color: #fff; + position: fixed; + bottom: 0; + left: 0; + padding: 1rem; + width: 100%; + text-align: center; + opacity: 1; + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(1rem); + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + flex-direction: column; + text-shadow: 2px 2px 0 #000; +} + +.footer-logo { + width: 30%; + max-width: 100px; + height: auto; + /* filter: drop-shadow(0 0 1rem rgb(0 0 0 / 0.4)); */ + scale: 0; + animation: footer-logo-fade linear both; + animation-timeline: scroll(); +} +.footer-logo img { + width: 100%; + height: auto; +} + +@keyframes logo-enlarge { + 0% { + transform: scale(0.9); + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: scale(1); + } +} +@keyframes glow-enlarge { + 0% { + transform: scale(0.9); + opacity: 0; + filter: none; + } + 50% { + opacity: 1; + filter: blur(3vw); + } + 100% { + transform: scale(1); + opacity: 0; + } +} + +@keyframes logo-outline { + 0% { + stroke-dasharray: 0, 450; + } + 50% { + stroke-dasharray: 450, 0; + } + 100% { + stroke: transparent; + } +} +@keyframes logo-fade { + 0% { + scale: 1; + opacity: 1; + } + 10% { + scale: 0; + opacity: 0; + } + 100% { + scale: 0; + opacity: 0; + } +} +@keyframes footer-logo-fade { + 0% { + scale: 0; + opacity: 0; + } + 10% { + scale: 1; + opacity: 1; + } + 100% { + scale: 1; + opacity: 1; + } +} + +@keyframes links { + 0% { + transform: translateY(-160%); + } + 100% { + transform: translateY(0%); + } +} diff --git a/W3/test.htm b/W3/test.htm new file mode 100644 index 0000000..6a8a052 --- /dev/null +++ b/W3/test.htm @@ -0,0 +1,35 @@ + + + + + + SVG Path Animation + + + + + + + W fill + + + + + + diff --git a/W3/texture.jpg b/W3/texture.jpg new file mode 100644 index 0000000..d343e84 Binary files /dev/null and b/W3/texture.jpg differ diff --git a/W3/w3-invert.svg b/W3/w3-invert.svg new file mode 100644 index 0000000..e2832f1 --- /dev/null +++ b/W3/w3-invert.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/W3/w3-outline.svg b/W3/w3-outline.svg new file mode 100644 index 0000000..97d5876 --- /dev/null +++ b/W3/w3-outline.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file