From 77c222396df3326f0295a5a4fc6ed44a438a2beb Mon Sep 17 00:00:00 2001 From: tyleo Date: Sun, 18 Feb 2024 22:24:34 +0100 Subject: [PATCH] first commit --- CSS Training/1/index.html | 19 ++++++++ CSS Training/1/style.css | 92 +++++++++++++++++++++++++++++++++++ Website Training/1/index.html | 19 ++++++++ Website Training/1/style.css | 63 ++++++++++++++++++++++++ 4 files changed, 193 insertions(+) create mode 100755 CSS Training/1/index.html create mode 100755 CSS Training/1/style.css create mode 100755 Website Training/1/index.html create mode 100755 Website Training/1/style.css diff --git a/CSS Training/1/index.html b/CSS Training/1/index.html new file mode 100755 index 0000000..745e7af --- /dev/null +++ b/CSS Training/1/index.html @@ -0,0 +1,19 @@ + + + + + + + Test CSS 1 + + + + + + \ No newline at end of file diff --git a/CSS Training/1/style.css b/CSS Training/1/style.css new file mode 100755 index 0000000..0a4d79f --- /dev/null +++ b/CSS Training/1/style.css @@ -0,0 +1,92 @@ +@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap'); +* +{ + font-family: Audiowide; +} +h1 +{ + color: white; +} +body +{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #434750; +} + +ul +{ + position: relative; + transform: skewY(-15deg); + /* transition: 0.5s; */ +} + +ul li +{ + position: relative; + list-style: none; + width: 200px; + background: #080809; + padding: 15px; + z-index: var(--i); + transition: 0.5s; +} +ul li:hover +{ + background: #0e0e0e; + transform: translateX(50px); +} +ul li::before +{ + content: ''; + position: absolute; + top: 0; + left: -40px; + width: 40px; + height: 100%; + background: #18191a; + transform-origin: right; + transform: skewY(45deg); + transition: 0.5s; +} +ul li:hover::before +{ + background: #1a1a1a; +} +ul li::after +{ + content: ''; + position: absolute; + top: -40px; + left: 0; + width: 100%; + height: 40px; + background: #141414; + transform-origin: bottom; + transform: skewX(45deg); + transition: 0.5s; +} +ul li:hover::after +{ + background: #1a1a1a; +} +ul li:last-child::after +{ + box-shadow: -100px 100px 20px rgba(0, 0, 0, 0.25); +} +ul li a +{ + text-decoration: none; + color: rgb(73, 73, 73); + display: block; + text-transform: uppercase; + letter-spacing: 0.05cm; + transition: 0.5s; +} +ul li:hover a +{ + color: #00A2FF; +} + diff --git a/Website Training/1/index.html b/Website Training/1/index.html new file mode 100755 index 0000000..1602f1f --- /dev/null +++ b/Website Training/1/index.html @@ -0,0 +1,19 @@ + + + + + + + Website Training 1 + + + + +

Welcome !

+

This website is done for training purpose.

+ + \ No newline at end of file diff --git a/Website Training/1/style.css b/Website Training/1/style.css new file mode 100755 index 0000000..e7049e0 --- /dev/null +++ b/Website Training/1/style.css @@ -0,0 +1,63 @@ +* { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +ul { + position: relative; + text-decoration: none; + display: inline; + padding: 8px; + background-color: cornflowerblue; + text-decoration: none; +} + +ul li { + list-style: none; + align-content: center; + text-align: center; + display: inline; +} + +ul li a { + text-decoration: none; + list-style: none; + align-content: center; + text-align: center; + display: inline; +} + +ul li a:hover { + position: relative; + text-decoration: none; + display: inline; + padding: 8px; + background-color: cornflowerblue; + text-decoration: none; +} + + + + + + + + + + + + + + + + + + + + + + + + + + +