Skip to content

Instantly share code, notes, and snippets.

View Suzangithub's full-sized avatar

Suzangithub

4 followers · 3 following
View GitHub Profile
@Suzangithub
Suzangithub / Legend wraps radio button
Created October 16, 2018 08:00
Applied Accessibility: Wrap Radio Buttons in a fieldset Element for Better Accessibility
<body>
<header>
<h1>Deep Thoughts with Master Camper Cat</h1>
</header>
<section>
<form>
<p>Sign up to receive Camper Cat's blog posts by email here!</p>
<label for="email">Email:</label>
<input type="text" id="email" name="email">
@Suzangithub
Suzangithub / Audio content
Created October 16, 2018 06:45
Applied Accessibility: Improve Accessibility of Audio Content with the audio Element
<body>
<header>
<h1>Real Coding Ninjas</h1>
</header>
<main>
<p>A sound clip of Zersiax's screen reader in action.
<audio id="meowClip" controls>
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg" />
</audio>
</p>
@Suzangithub
Suzangithub / Animation Balls
Created October 16, 2018 04:40
Applied Visual Design: Make Motion More Natural Using a Bezier Curve
<style>
.balls {
border-radius: 50%;
position: fixed;
width: 50px;
height: 50px;
top: 60%;
animation-name: jump;
animation-duration: 2s;
animation-iteration-count: infinite;
@Suzangithub
Suzangithub / Animation stars
Created October 16, 2018 04:10
Applied Visual Design: Animate Multiple Elements at Variable Rates
<style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
}
.star-1 {
@Suzangithub
Suzangithub / Heartbeat Visual
Created October 16, 2018 03:39
Applied Visual Design: Make a CSS Heartbeat using an Infinite Animation Count
<style>
.back {
position: fixed;
padding: 0;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
@Suzangithub
Suzangithub / Applied Visual Design: Create Movement Using CSS Animation
Created October 15, 2018 08:31
Applied Visual Design: Create Movement Using CSS Animation
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
position: relative;
}
@Suzangithub
Suzangithub / Animation rainbow
Created October 15, 2018 08:09
Applied Visual Design: Learn How the CSS @Keyframes and animation Properties Work
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
@Suzangithub
Suzangithub / Applied Visual Design: Create a More Complex Shape Using CSS and HTML
Created October 15, 2018 07:55
Applied Visual Design: Create a More Complex Shape Using CSS and HTML
<style>
.heart {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: pink;
height: 50px;
@Suzangithub
Suzangithub / Applied Visual Design: Create a Gradual CSS Linear Gradient
Created October 15, 2018 04:08
Applied Visual Design: Create a Gradual CSS Linear Gradient
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}
@Suzangithub
Suzangithub / Applied Visual Design: Create a Gradual CSS Linear Gradient
Created October 15, 2018 04:08
Applied Visual Design: Create a Gradual CSS Linear Gradient
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
}