Skip to content
Permalink
2d3962b37a
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

dmd-web-two/css-showcase/css-showcase.html

Go to file
 
 
Cannot retrieve contributors at this time
116 lines (91 sloc) 3.48 KB
Raw Blame
<!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>