orzubalsky / creative-computing-2018

0 stars 1 forks source link

Site for checking errors in code #90

Open Mwedd9 opened 5 years ago

Mwedd9 commented 5 years ago

Hi whats that site Or mentioned for checking errors, I can't figure out the problem with my animation code. I'll link it as well, thank you! `* { box-sizing: border-box; }

html { margin: 0; padding: 0; }

body { margin: 0; padding: 0; min-width: 100vw; min-height: 100vh; }

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: auto; width: auto; }

.content { height: 100%; width: 100%; padding: 20px; }

.shape { background: blue;, width: 200px; height: 200px; }

.circle { border-radius:100px; }

a { color: blue; text-decoration: none; } a { color: blue; text-decoration: none; } a:hover { color: red; }

.content { height: 100%; min-height: 100vh; width: 100%; padding: 20px; background: #efefef; transition: all 4s;

@keyframes spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(60deg);

} 100% { transform: rotate(360deg);

} @keyframes squiggle{ 0% { background: red; transform: scale (1.0); } 25% { background: red; transform: scale (1.3);

} 90% { transoform: scale( 1.7) rotateZ(44deg); } 100% { background: blue; transform: scale (1.5) rotateZ(45deg);

}

.variation-1 { animation-name: squiggle; animation-duration: 5s; animation-iteration-count: infinite; animation-direction: all; }

.variation-2 { animation-name: spin; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: normal; }

.variation-3 { animation-name: spin; animation-duration: 3s; animation-iteration-count: 1; animation-direction: reverse ; }

`

rachael-tomaszewski commented 5 years ago

Hey Mary!

I'm not sure which one Or mentioned, but this is the one I use!

https://codebeautify.org/cssvalidate

misteakes commented 5 years ago

Hey Mary,

I just looked at your code really quickly, but I noticed in your .shape you have an extra comma in your background color. Not sure how much that helps but luckily, Rachael linked the site she uses! :-)

Hope you figure it out!

Misty

orzubalsky commented 5 years ago

The HTML and CSS validators are linked from the resources page on the class blog, but the one @rachael-tomaszewski posted looks good as well!

I noticed you're missing a few closing curly braces }. It's missing from: