Roundout Ribbon

Size
2,907 Kb
Views
26,312

How do I make an roundout ribbon?

What is a roundout ribbon? How do you make a roundout ribbon? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.

Roundout Ribbon Previews

Roundout Ribbon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Roundout Ribbon</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fontastic.s3.amazonaws.com/opvWFHyoz4tnx7Gsnt6sMV/icons.css'>
<link rel='stylesheet prefetch' href='https://codepen.io/abensur/pen/CHFbg'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="ribbon-container"> <img src="https://placehold.it/1100/444/fff/&text=ROUNDOUT+RIBBON"/> <div class="ribbon"> <span class="ribbon__icon icon-photo" aria-hidden="true"></span> <div class="ribbon__roundout"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Roundout Ribbon - Script Codes CSS Codes

html { background: #fcfcfc; font-size: 12px;
}
@media only screen and (min-width: 640px) { html { font-size: 13px; }
}
@media only screen and (min-width: 800px) { html { font-size: 14px; }
}
.ribbon-container { position: relative; z-index: 1; width: 18.75rem; margin: 2rem auto;
}
.ribbon-container img { width: 100%; border-radius: 100%; z-index: 2;
}
.ribbon { position: absolute; top: 14.375rem; left: 7.1rem; background: #9b59b6; height: 4.6875rem; width: 4.6875rem; text-align: center; line-height: 5rem; border-radius: .25rem .25rem 0 0;
}
.ribbon__icon { font-size: 2rem; color: white;
}
.ribbon:before { position: absolute; content: ''; display: block; width: 5.76562rem; height: .125rem; padding: 0 0 0.7em; top: 3.85rem; left: -11.5%; z-index: -1; background: #713b87; border-radius: 0 0 0.313em 0.313em;
}
.ribbon__roundout:before, .ribbon__roundout:after { position: absolute; bottom: .125rem; width: .25rem; height: .25rem; content: " "; border-top-left-radius: .25rem; border-top-right-radius: .25rem;
}
.ribbon__roundout:before { left: -.3125rem; border-bottom-right-radius: .25rem; border-width: 0 1px 1px 0; box-shadow: 0.125rem 0.125rem 0 #9b59b6;
}
.ribbon__roundout:after { right: -.3125rem; border-bottom-left-radius: .25rem; border-width: 0 0 1px 1px; box-shadow: -0.125rem 0.125rem 0 #9b59b6;
}
Roundout Ribbon - Script Codes
Roundout Ribbon - Script Codes
Home Page Home
Developer Rafael Abensur
Username abensur
Uploaded September 12, 2022
Rating 3
Size 2,907 Kb
Views 26,312
Do you need developer help for Roundout Ribbon?

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!

Rafael Abensur (abensur) Script Codes
Create amazing love letters 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!