saudi-riyal-symbol
Version:
This library contains a custom icon font that provides a Saudi Riyal (SAR) symbol for use in web applications. The font is designed for seamless integration and supports multiple formats for cross-browser compatibility.
174 lines (147 loc) • 5.88 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saudi Riyal Symbol - Showcase</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Shippori+Antique+B1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/dist/saudi-riyal-symbol.css">
<style>
body , html {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: grid;
place-content: center;
place-items: center;
width : 100%;
min-height: 100vh;
background-color: #445D48;
padding: 50px 0;
}
span {
font-family: "Shippori Antique B1", serif ;
}
.color-white {
color: #fff;
}
.size-xlarg {
font-size: 150px;
}
.size-larg {
font-size: 120px;
}
.size-medium {
font-size: 70px;
}
.size-normal {
font-size: 40px;
}
.size-small {
font-size: 20px;
}
.size-xsmall {
font-size: 15px;
}
.font-card {
background-color: rgba(0, 0, 0, 0.03);
border: 0px solid rgba(255, 255, 255, 0.114);
padding: 15px;
border-radius: 20px;
height: 200px;
aspect-ratio: 1/1;
display: grid;
place-content: center;
place-items: center;
margin: 10px;
cursor: pointer;
}
.font-card:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.font-card:hover *{
cursor: pointer;
color: #D2EBCD ;
}
</style>
</head>
<body class="" >
<div class="col-sm-10 mx-auto">
<div class="d-flex py-5 align-items-center align-items-xl-end align-items-lg-end flex-column flex-xl-row flex-lg-row">
<div class="font-card">
<sr class="color-white size-xlarg"/>
</div>
<div class="font-card">
<sr class="color-white size-larg"/>
</div>
<div class="font-card">
<sr class="color-white size-medium "/>
</div>
<div class="font-card">
<sr class="color-white size-normal "/>
</div>
<div class="font-card">
<sr class="color-white size-small"/>
</div>
<div class="font-card ">
<sr class="color-white size-xsmall"/>
</div>
</div>
<div class="d-flex flex-wrap py- align-items-center align-items-xl-end align-items-lg-end flex-column flex-xl-row flex-lg-row">
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">0.5</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">1.5</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">2</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">5.00</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">5.75</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">50</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">490</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">4,000</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">50,000</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">250,000</span>
</div>
<div class="font-card align-items-center">
<sr class="color-white size-xsmall"/>
<span class="fs-4 ms-2 fw-bold text-white">1,500,000</span>
</div>
<div class="font-card align-items-center d-flex">
<i class="sr color-white size-xsmall"></i>
<span class="fs-5 ms-2 fw-bold text-white">12,500,000</span>
</div>
</div>
</div>
</body>
</html>