Skip to content

Instantly share code, notes, and snippets.

@g4m3rm1k3

g4m3rm1k3/eyexzwx.markdown

Created March 12, 2022 20:09
Show Gist options
  • Save g4m3rm1k3/e48a45c7aaa4835fdcc412e3b0176106 to your computer and use it in GitHub Desktop.
Save g4m3rm1k3/e48a45c7aaa4835fdcc412e3b0176106 to your computer and use it in GitHub Desktop.
Download ZIP
eYexzwX
Raw
index.html
<!-- Example single danger button -->
<div class="container bg-secondary">
<div class="red-tag">
<div class="btn-group align-middle">
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
<!-- start copy here -->
<button type="button" class="btn fs-4 p-2 border-dark border-2 fw-bold align-middle" data-bs-toggle="dropdown" aria-expanded="false">
p<!--button name here -->
</button>
<ul class="dropdown-menu">
<li>
<p class="bg-info p-1">D - department</p>
</li>
<li>
<p class="bg-warning p-1">S - Swiss</p>
</li>
<li>
<p class="bg-success p-1">R - Reason
</li>
</ul>
<!-- end copy here -->
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Raw
style.css
.container {
min-height: 100vh;
display: flex; */
justify-content: center;
align-items: center;
overflow: hidden;
}
.red-tag {
padding: 1rem;
display: flex;
width: 400px;
background-image: url("https://media.istockphoto.com/photos/dark-red-construction-paper-textured-background-picture-id176842629?k=20&m=176842629&s=612x612&w=0&h=Yy5rtcMep2GmvfVm6-o8ntdLLOA2EgV0mwNzy-ocLdk=");
height: 200px;
position:relative;
}
.btn-group {
flex-grow: 0;
align-items: center;
}
.red-tag::after{
background-color: #6c757d;
align-self: normal;
content: "";
position:absolute;
left: 0;
top: 0;
margin-left: 400px;
width:400px;
height:400px;
transform:rotate(45deg);
}
.red-tag::before{
background-color: #6c757d;
align-self: normal;
content: "";
position:absolute;
left: 0;
bottom: 0;
margin-left: 400px;
width:400px;
height:400px;
transform:rotate(-45deg);
}
ul{
background-image: url("https://media.istockphoto.com/photos/dark-red-construction-paper-textured-background-picture-id176842629?k=20&m=176842629&s=612x612&w=0&h=Yy5rtcMep2GmvfVm6-o8ntdLLOA2EgV0mwNzy-ocLdk=");
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment