diff --git a/IRIDIUM.png b/IRIDIUM.png new file mode 100644 index 0000000..3ce497d Binary files /dev/null and b/IRIDIUM.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf26332 --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + Iridum Gaming Comunity + + + +
+
+ +
+
+

Iridium-Gaming

+

Iridium Gaming ist eine Gelegenheits-PC-Gaming-Community für jedes Alter. + Wir heißen alle Willkommen, die eine entspannte Einstellung haben und hier sind, + um Spaß zu haben.

+ Entdecke mehr +
+ +
+ + \ No newline at end of file diff --git a/iridium_logo.png b/iridium_logo.png new file mode 100644 index 0000000..4e7efe2 Binary files /dev/null and b/iridium_logo.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..a90200c --- /dev/null +++ b/style.css @@ -0,0 +1,136 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body +{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #151515; +} +.card +{ + position: relative; + width: 350px; + height: 350px; + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; + transition: 0.5s; + transition-delay: 0.5s; +} +.card:hover +{ + width: 600px; + transition-delay: 0.5s; +} +.card .circle +{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; +} +.card .circle::before +{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 350px; + height: 350px; + border-radius: 50%; + background:#191919; + border: 8px solid var(--clr); + filter: drop-shadow(0 0 10px var(--clr)) drop-shadow(0 0 60px var(--clr)); + transition: 0.5s, background 0.5s; + transition-delay: 0.75s,1s; +} +.card:hover .circle::before +{ + transition-delay: 0.5s; + width: 100%; + height: 100%; + border-radius: 20px; + background: var(--clr); +} +.card .circle .logo +{ + position: relative; + width: 300px; + transition-delay: 0.5s; +} +.card:hover .circle .logo +{ + transform: scale(0); + transition-delay: 0s; +} +.card .product_img +{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0)rotate(315deg); + height: 300px; + transition: 0.5s ease-in-out; +} +.card:hover .product_img +{ + transition-delay: 0.75s; + top: 35%; + left: 72%; + height: 400px; + transform: translate(-50%, -50%) scale(1)rotate(15deg); +} +.card .content +{ + position: absolute; + width: 50%; + left: 20%; + padding: 20px 20px 20px 40px; + opacity: 0; + transition: 0.5s; + visibility: hidden; +} +.card:hover .content +{ + transition-delay: 0.75s; + opacity: 1; + visibility: visible; + left: 0; +} +.card .content h2 +{ + color: #fff; + text-transform: uppercase; + font-size: 1.5em; + line-height: 1em; +} +.card .content p +{ + color: #fff; +} +.card .content a +{ + position: relative; + color: #111; + background: #fff; + padding: 10px 20px; + border-radius: 10px; + display: inline-block; + text-decoration: none; + font-weight: 600; + margin-top: 10px; +} \ No newline at end of file