diff --git a/Components/Footer.js b/Components/Footer.js new file mode 100644 index 0000000..8bc7a47 --- /dev/null +++ b/Components/Footer.js @@ -0,0 +1,19 @@ +const element = + + +ReactDOM.render( + element, + document.getElementById('react-footer') + ); + diff --git a/Components/cps/cps.html b/Components/cps/cps.html new file mode 100644 index 0000000..6b4bbd7 --- /dev/null +++ b/Components/cps/cps.html @@ -0,0 +1,190 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + InvalidLenni + + + + +

+
+ Timer:
+ Score:
+ Clicks/s: +
+
+ +
+ + + + + diff --git a/README.md b/README.md index 59aa799..c0cec21 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ ![Status](https://img.shields.io/website?down_color=red&down_message=Offline&style=for-the-badge&up_color=green&up_message=Online&url=https%3A%2F%2Finvalidlenni.de%2F) +![GitHub package.json version](https://img.shields.io/github/package-json/v/InvalidLenni/invalidlenni.github.io?logo=github&style=for-the-badge) # InvalidLenni.de This is the source code of [my website](https://invalidlenni.de/) diff --git a/assets/multiplex.png b/assets/multiplex.png new file mode 100644 index 0000000..af93e1b Binary files /dev/null and b/assets/multiplex.png differ diff --git a/assets/nitromc.de.png b/assets/nitromc.de.png new file mode 100644 index 0000000..02d6b15 Binary files /dev/null and b/assets/nitromc.de.png differ diff --git a/css/icons.css b/css/icons.css new file mode 100644 index 0000000..b2f7982 --- /dev/null +++ b/css/icons.css @@ -0,0 +1,167 @@ +.footer-social-icons { + width: 350px; + display: block; + margin: 0 auto; + align-items: center; +} +.social-icon { + color: #fff; +} +ul.social-icons { + margin-top: 10px; +} +.social-icons li { + vertical-align: top; + display: inline; + height: 100px; +} + + +/* Twitter Icon */ +.fa-twitter { + padding:10px 12px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: #322f30; +} +.fa-twitter:hover { + background-color: #00aced; +} + +/* Instagram Icon */ +.fa-instagram { + padding:10px 12px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: #322f30; +} +.fa-instagram:hover { + background-color: #00aced; +} + + +/* YouTube Icon */ + +.fa-youtube { + padding:10px 12px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: #322f30; +} +.fa-youtube:hover { + background-color: #00aced; +} + + +/* Github Icon */ + +.fa-github { + padding:10px 14px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: #322f30; +} + + +.fa-github:hover { + background-color: #5a32a3; +} + + +/* Discord Icon */ + +.fa-discord { + padding:10px 12px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: #322f30; +} +.fa-discord:hover { + background-color: #00aced; +} + +/* Dev.to Icon */ +.fa-dev { + padding:10px 12px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: #322f30; + } +.fa-dev:hover { + background-color: #00aced; +} + +/* Steam Icon */ +.fa-steam { + padding:10px 12px; + -o-transition:.5s; + -ms-transition:.5s; + -moz-transition:.5s; + -webkit-transition:.5s; + transition: .5s; + background-color: #322f30; + } +.fa-steam:hover { + background-color: #00aced; +} + + + +/* Add to Discord Button (in another way it's a icon lol)*/ + +.add_to_discord { + display: flex; + align-items: center; + background-color: blueviolet; + border-radius: 8px; + border: 0; + font-weight: 600; + font-size: 17px !important; + line-height: 21px !important; + color: #fff; + padding: 27px; + height: 58px; + outline: none; +} +.add_to_discord svg { + padding-right: 20px; + box-sizing: unset; +} +.add_to_discord:hover { + background-color: rgb(152, 67, 233); + text-decoration: none; + } + + + + + +.header-icon { + color: #fff; +} +ul.header-icons { + margin-top: 10px; +} +.header-icons li { + vertical-align: top; + display: inline; + height: 100px; +} \ No newline at end of file diff --git a/css/labels.css b/css/labels.css new file mode 100644 index 0000000..85bcba0 --- /dev/null +++ b/css/labels.css @@ -0,0 +1,10 @@ +.label { + color: white; + padding: 8px; + } + +.success {background-color: #04AA6D;} /* Green */ +.info {background-color: #2196F3;} /* Blue */ +.warning {background-color: #ff9800;} /* Orange */ +.danger {background-color: #f44336;} /* Red */ +.other {background-color: #e7e7e7; color: black;} /* Gray */ \ No newline at end of file diff --git a/css/main.css b/css/main.css index 9aa965e..e01b40b 100644 --- a/css/main.css +++ b/css/main.css @@ -1,10 +1,14 @@ body { - font-family: 'Poppins', sans-serif !important; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; - background-color: #131b21; + font-family: 'Poppins', sans-serif !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; + background-color: #131b21; + background-repeat: no-repeat; + background-position: center; + background-size: cover; } + .bgn { background-color: black; border: 1px solid #fff; @@ -45,11 +49,15 @@ line-height: 1.2; border: 1px solid #ffffff; } .card:hover { - border: 3px solid black; + box-shadow: 0 12px 16px 0 black,0 17px 50px 0 rgba(0,0,0,0.19); + } + .cardds{ margin-top: 30px !important; padding: 60px 50px !important; +margin-right: auto; +margin-left: auto; } .bgseconde { padding-bottom: 150px; @@ -63,7 +71,7 @@ padding: 60px 50px !important; line-height: 51px; } span { - font-weight: 700; + font-weight: 700; } .footer-social-icons { width: 350px; @@ -82,10 +90,7 @@ ul.social-icons { display: inline; height: 100px; } -.social-icons a { - color: #fff; - text-decoration: none; -} + .fa-facebook { padding:10px 14px; -o-transition:.5s; @@ -143,9 +148,6 @@ ul.social-icons { transition: .5s; background-color: #322f30; } -.light-mode { - background-color: white; -} .fa-github:hover { background-color: #5a32a3; } @@ -395,17 +397,6 @@ ul.social-icons { color: white; } - .welcome-header{ - color: white; - margin-left: 55px; - text-size-adjust: 100; - } - - .welcome-text{ - color: grey; - margin-left: 55px; - } - ::-webkit-scrollbar { width: 12.2px; } @@ -421,4 +412,6 @@ ul.social-icons { /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: rgb(84, 81, 81); - } \ No newline at end of file + } + + diff --git a/css/menu.css b/css/menu.css new file mode 100644 index 0000000..4514b0b --- /dev/null +++ b/css/menu.css @@ -0,0 +1,83 @@ + label{ + display:flex; + flex-direction:column; + width:70px; + cursor:pointer; + } + + label span{ + background: #fff; + border-radius:10px; + height:7px; + margin: 7px 0; + transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6); + + } + + + span:nth-of-type(1){ + width:50%; + + } + + span:nth-of-type(2){ + width:100%; + } + + + span:nth-of-type(3){ + width:75%; + + } + + + input[type="checkbox"]{ + display:none; + } + + + input[type="checkbox"]:checked ~ span:nth-of-type(1){ + transform-origin:bottom; + transform:rotatez(45deg) translate(8px,0px) + } + + + input[type="checkbox"]:checked ~ span:nth-of-type(2){ + + transform-origin:top; + transform:rotatez(-45deg) + } + + + input[type="checkbox"]:checked ~ span:nth-of-type(3){ + + transform-origin:bottom; + width:50%; + transform: translate(30px,-11px) rotatez(45deg); + + } + + + .dropdown { + position: relative; + display: inline-block; + } + + .dropdown-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + overflow: auto; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; + } + + .dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + } + + .dropdown a:hover {background-color: #ddd;} \ No newline at end of file diff --git a/index.html b/index.html index e94d26a..4e6a152 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ + @@ -54,10 +55,18 @@ Partners
+
  • + Contact +
    • +
  • My linkpage
    • +
  • + Birthday Timer + +

  • -

    I'm Lenni just a Student and Full-Stack, DevSecOps, Translator, Gamer, Streamer and Ethical Hacker from Germany.

    +

    About me

    @@ -186,7 +195,17 @@

    I'm Lenni just a Student and Full-Stack, DevSecOps,

    Owner

    -

    A bot their can show brawl stars stats from profiles and clubs.

    +

    A german minecraft server with a lots of minigames.

    +
    + + +
    +
    + Minecraft Server Icon from Multiplex InvalidGroup +
    +
    +

    Developer

    +

    My little organization

    @@ -225,14 +244,13 @@

    - NitroMC Icon NitroMC.de + NitroMC Icon Norik.Cloud
    -

    Moderator

    -

    NitroMC is a german minecraft hosting network.

    -     We're partnered with NitroMC.de +

    Staff

    +

    Norik.cloud is a free minecraft hoster..

    + We're partnered with NorikCloud
    - NitroMC Badge
    @@ -297,8 +315,6 @@

    - -
    @@ -356,7 +372,6 @@

    crossorigin="anonymous"> - @@ -366,7 +381,5 @@

    - - - + \ No newline at end of file diff --git a/pages/contact.php b/pages/contact.php new file mode 100644 index 0000000..c915339 --- /dev/null +++ b/pages/contact.php @@ -0,0 +1,147 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + InvalidLenni + + + + + +

    +
    +
    + +

    The Email was send

    + +
    +
    +
    +
    +
    + +
    +
    + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/links.html b/pages/links.html index 5547669..b534649 100644 --- a/pages/links.html +++ b/pages/links.html @@ -47,12 +47,16 @@
     Dev.to
    -  Blog +  Blog - + +
    +
    +
    +