Feedback-color Demo

Developer
Gray Gilmore
Size
3,964 Kb
Views
12,144
  1. Feedback-color Demo Previews
  2. Feedback-color Demo HTML Codes
  3. Feedback-color Demo CSS Codes
  4. Feedback-color Demo JS Codes

How do I make an feedback-color demo?

This is a simple demo of Pixel Union's feedback-color Sass function: https://www.npmjs.com/package/feedback-color. What is a feedback-color demo? How do you make a feedback-color demo? This script and codes were developed by Gray Gilmore on 08 November 2022, Tuesday.

Feedback-color Demo Previews
IQ Test

Feedback-color Demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>feedback-color Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='theme-brown'> <p>This theme is brown.</p> <button class='success'>Save</button> <button class='warning'>Cancel</button> <button class='error'>Delete</button>
</div>
<div class='theme-blue'> <p>This theme is blue.</p> <button class='success'>Save</button> <button class='warning'>Cancel</button> <button class='error'>Delete</button>
</div>
<div class='theme-grey'> <p>This theme is grey.</p> <button class='success'>Save</button> <button class='warning'>Cancel</button> <button class='error'>Delete</button>
</div>
<div class='theme-green'> <p>This theme is green.</p> <button class='success'>Save</button> <button class='warning'>Cancel</button> <button class='error'>Delete</button>
</div> <script src="js/index.js"></script>
</body>
</html>

Feedback-color Demo - Script Codes CSS Codes

/*
**
** Set up map that contains our bounds
*/
/*
**
** Function returning a range with an end value that will always be
** higher than the start value, so that we can modulate on a linear range.
*/
/*
**
** Function to figure out if our value falls between our bounds
*/
/*
**
** Translate a number on a scale to its point between two values on a different scale
*/
/*
**
** Main function
*/
div { padding: 3rem; color: white;
}
button { border: none; color: white; padding: 0.5rem 1rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; line-height: 1;
}
.theme-brown { background-color: brown;
}
.theme-brown .success { background-color: #9cbf31;
}
.theme-brown .warning { background-color: #f4b22f;
}
.theme-brown .error { background-color: #e62323;
}
.theme-blue { background-color: blue;
}
.theme-blue .success { background-color: #2dd244;
}
.theme-blue .warning { background-color: #ffdb26;
}
.theme-blue .error { background-color: #f20d0d;
}
.theme-grey { background-color: grey;
}
.theme-grey .success { background-color: #99b34d;
}
.theme-grey .warning { background-color: #e4ae41;
}
.theme-grey .error { background-color: #d32d2d;
}
.theme-green { background-color: green;
}
.theme-green .success { background-color: #29c329;
}
.theme-green .warning { background-color: #ffc720;
}
.theme-green .error { background-color: #f31338;
}

Feedback-color Demo - Script Codes JS Codes

(function() {
}).call(this);
Feedback-color Demo - Script Codes
Feedback-color Demo - Script Codes
Home Page Home
Developer Gray Gilmore
Username graygilmore
Uploaded November 08, 2022
Rating 3
Size 3,964 Kb
Views 12,144
Do you need developer help for Feedback-color Demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gray Gilmore (graygilmore) Script Codes
Name
Event Watching
Fade in Background Image
Cross Fade Images with CSS
Full Page Backgrounds, iOS Fail
Fizz-Buzz Test, Sass Style
Forms
Vertical Alignment with Inline Block
Vertical Alignment with Line Height
Webkit Backface Visibility Border Bug
Search functionality
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!