71 lines
2.3 KiB
Plaintext
71 lines
2.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Neutral</title>
|
|
<link rel='stylesheet' href='/stylesheets/style.css' />
|
|
</head>
|
|
<body>
|
|
<h1>Neutral - Style Page</h1>
|
|
<p>Welcome to Neutral</p>
|
|
|
|
<p>Police : 'Roboto', sans-serif </p>
|
|
<style>
|
|
.box-color {
|
|
|
|
width: 5vw;
|
|
height: 5vw;
|
|
transition: 0.2s;
|
|
border: 1px solid;
|
|
}
|
|
|
|
.box-color:hover {
|
|
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.box-color:active {
|
|
|
|
transform: scale(1);
|
|
color: rgb(58, 255, 3);
|
|
}
|
|
|
|
|
|
button {
|
|
width: fit-content ;
|
|
}
|
|
|
|
.list-items {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2vw;
|
|
}
|
|
</style>
|
|
|
|
<div class="list-items">
|
|
<button class="btn red"><span>Error Button</span></button>
|
|
<button class="btn blue "><span>Info Button</span></button>
|
|
<button class="btn yellow"><span>Warning Button</span></button>
|
|
<button class="btn green"><span>Confirm Button</span></button>
|
|
<button class="btn"><span>Default Button</span></button>
|
|
<button class="btn min red"><span><i class="fa fa-x"></i></span></button>
|
|
<button class="btn min blue"><span><i class="fa fa-info"></i></span></button>
|
|
<button class="btn min"><span><i class="fa fa-def"></i></span></button>
|
|
<div onclick="copyToClipboard('#323031')" style='background-color: #323031;' class="box-color"><p style="text-align: center;">#323031</p></div>
|
|
<div onclick="copyToClipboard('#3D3B3C')" style='background-color: #3D3B3C;' class="box-color"><p style="text-align: center;">#3D3B3C</p></div>
|
|
<div onclick="copyToClipboard('#7F7979')" style='background-color: #7F7979;' class="box-color"><p style="text-align: center;">#7F7979</p></div>
|
|
<div onclick="copyToClipboard('#C1BDB3')" style='background-color: #C1BDB3;' class="box-color"><p style="text-align: center;">#C1BDB3</p></div>
|
|
<div onclick="copyToClipboard('#5f5b6b')" style='background-color: #5f5b6b;' class="box-color"><p style="text-align: center;">#5F5B6B</p></div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard(text) {
|
|
|
|
navigator.clipboard.writeText(text)
|
|
}
|
|
|
|
</script>
|
|
<script defer="" src="https://use.fontawesome.com/releases/v6.4.2/js/all.js" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|