Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Add files via upload
- Loading branch information
Showing
5 changed files
with
696 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <link rel="stylesheet" type="text/css" href="css/main.css"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet"> | ||
| <title>css showcase</title> | ||
| </head> | ||
|
|
||
|
|
||
|
|
||
| <body> | ||
|
|
||
| <div class="container-one"> | ||
|
|
||
| <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340"> | ||
| <circle cx="170" cy="170" r="160" stroke="#c6cccc"/> | ||
| <circle cx="170" cy="170" r="135" stroke="#ffa6c6"/> | ||
| <circle cx="170" cy="170" r="110" stroke="#c6cccc"/> | ||
| <circle cx="170" cy="170" r="85" stroke="#ffa6c6"/> | ||
| </svg> | ||
|
|
||
| <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340"> | ||
| <circle cx="170" cy="170" r="160" stroke="#00ad79"/> | ||
| <circle cx="170" cy="170" r="130" stroke="#c2ffe4"/> | ||
| <circle cx="170" cy="170" r="100" stroke="#00ad79"/> | ||
| <circle cx="170" cy="170" r="45" stroke="#c2ffe4"/> | ||
| </svg> | ||
|
|
||
| <svg class="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 340"> | ||
| <circle cx="170" cy="170" r="160" stroke="#ffbf00"/> | ||
| <circle cx="170" cy="170" r="120" stroke="#fffcc2"/> | ||
| <circle cx="170" cy="170" r="80" stroke="#ffbf00"/> | ||
| <circle cx="170" cy="170" r="40" stroke="#fffcc2"/> | ||
| </svg> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="first-text"> | ||
| <p class="loader-text">When working with CSS animations, the main property to keep in mind is @keyframes! This is what sets up the motion for your animation.</p> | ||
| </div> | ||
|
|
||
| <!--<style> | ||
| .container-two{ | ||
| --color-background: black; | ||
| --axis-x: 1px; | ||
| --axis-y: 1rem; | ||
| --delay: 10; | ||
| --color-black: #000; | ||
| --color-white: #fff; | ||
| --color-orange: #e86a1c; | ||
| --color-red: #e80023; | ||
| --color-violet: #8c00ab; | ||
| --color-blue: #0081f2; | ||
| --color-green: #007a2d; | ||
| --color-yellow: #ffbf00; | ||
| --color-foreground: var(--color-white); | ||
| --font-name: Arial; | ||
| } | ||
| html, | ||
| </style>--> | ||
|
|
||
| <div class="container-two"> | ||
| <ul class="c-rainbow"> | ||
| <li class="c-rainbow__layer c-rainbow__layer--white">lol sorry brian</li> | ||
| <li class="c-rainbow__layer c-rainbow__layer--orange">lol sorry brian</li> | ||
| <li class="c-rainbow__layer c-rainbow__layer--red">lol sorry brian</li> | ||
| <li class="c-rainbow__layer c-rainbow__layer--violet">lol sorry brian</li> | ||
| <li class="c-rainbow__layer c-rainbow__layer--blue">lol sorry brian</li> | ||
| <li class="c-rainbow__layer c-rainbow__layer--green">lol sorry brian</li> | ||
| <li class="c-rainbow__layer c-rainbow__layer--yellow">lol sorry brian</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="second-text"> | ||
| <p class="more-text">Another important property used to create my CSS animations was z-index, which essentially assigns layer orders to the content of the animation.</p> | ||
| </div> | ||
|
|
||
| <div class="container-four"> | ||
| <h1>WAVES</h1> | ||
| <div> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="container-three"> | ||
| <ul class="bubbles"> | ||
| <p class="bubble-text">CSS Animations are also useful when you want to create backgrounds with more movement!</p> | ||
| <li></li> | ||
| <li></li> | ||
| <li></li> | ||
| <li></li> | ||
| <li></li> | ||
| <li></li> | ||
| </ul> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="container-five"> | ||
| <video src="img/particles.mp4" muted="" autoplay=""></video> | ||
| <h2><span>u</span>hhh i do<span>n't</span> feel so good<h2> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <div class="container-six"> | ||
| <h2 class="glowing">glow baby!</h2> | ||
| <p class="glowing-small">CSS Animations are great to use because they can add a greater sense of dynamism to your web page. They are a cool way to enhance your content and give users a more interesting experience.</p> | ||
| </div> | ||
|
|
||
| </body> | ||
|
|
||
|
|
||
| </html> |
Oops, something went wrong.