Nes palette components

Developer
Jota Teles
Size
3,850 Kb
Views
16,192
  1. Nes palette components Previews
  2. Nes palette components HTML Codes
  3. Nes palette components CSS Codes

How do I make an nes palette components?

What is a nes palette components? How do you make a nes palette components? This script and codes were developed by Jota Teles on 03 September 2022, Saturday.

Nes palette components Previews
IQ Test

Nes palette components - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Nes palette components</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="page-title">Exemplos de componentes usando nes-palette</h1>
<button class="btn btn--primary">Botão primário</button>
<button class="btn btn--success">Botão de sucesso</button>
<button class="btn btn--danger">Botão de perigo</button>
<p class="message message--primary">Mensagem normal</p>
<p class="message message--success">Oba, deu tudo certo</p>
<p class="message message--danger">Oh não!</p>
</body>
</html>

Nes palette components - Script Codes CSS Codes

/** * Retrieves a color value from the $nes-palette sass map * Got from https://github.com/minusfive/sass-material-colors/blob/master/sass/_sass-material-colors-function.scss * * @function * @param {string} color-name - quoted, lower-case, dasherized color * name (e.g. 'dark-green', 'orange') * @param {string} [color-variant='500'] - quoted, lowercase color variant (e.g. * '00', '10', '20', '30') */
body { padding: 16px; font-family: sans-serif; background-color: #f7f7f7;
}
.page-title { color: #7d7d7d; margin: 16px 8px; font-size: 28px; text-shadow: 1px 1px solid red;
}
.btn { border-radius: 3px; padding: 8px 16px; font-size: 14px; text-decoration: none; display: inline-block; margin: 0 8px; cursor: pointer; border-width: 1px; border-style: solid; color: #fff; box-shadow: inset 0 1px 0 #fcfcfc; outline: none;
}
.btn.btn--success { background-color: #59d855; border-color: #00a800;
}
.btn.btn--success:hover { background-color: #00a800;
}
.btn.btn--primary { background-color: #3bbcfc; border-color: #0079fa;
}
.btn.btn--primary:hover { background-color: #0079fa;
}
.btn.btn--danger { background-color: #f85998; border-color: #e60058;
}
.btn.btn--danger:hover { background-color: #e60058;
}
.message { display: block; padding: 16px; font-size: 14px; margin: 8px; border-width: 1px; border-style: solid;
}
.message.message--primary { background-color: #3bbcfc; border-color: #0079fa; color: #0079fa;
}
.message.message--success { background-color: #59d855; border-color: #00a800; color: #00a800;
}
.message.message--danger { background-color: #f85998; border-color: #e60058; color: #e60058;
}
Nes palette components - Script Codes
Nes palette components - Script Codes
Home Page Home
Developer Jota Teles
Username teles
Uploaded September 03, 2022
Rating 3
Size 3,850 Kb
Views 16,192
Do you need developer help for Nes palette components?

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!

Jota Teles (teles) Script Codes
Name
Link Builder Examples
Popover
VD Modal Sample
Parallel park - pure css
Angular link builder
Markpad
A Pen by Jota Teles
Teste do Staticman
ArrayMixer
Infinite chocolate bar
Create amazing Facebook ads 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!