Start with a clean black-white user interface to deliver your product quickly.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
:root {
--primary: #000000;
--secondary: #ffffff;
--radius: 60px;
--border: 2px;
}
* {box-sizing: border-box; overflow-x: hidden;}
img {vertical-align: middle;}
body {
margin: 0px;
font-family: "Poppins", sans-serif;
font-size: 16px;
font-style: normal;
line-height: 1.6;
}
/* Basic Elements */
h1, h2, h3, h4, h5, h6 {
margin: 0px;
line-height: 1;
overflow: hidden;
}
a, p, span, hr {
margin: 0px;
}
a {text-decoration: none;}
/* Fonts */
.font-size-12 {font-size: 12px;}
.font-size-14 {font-size: 14px;}
.font-size-16 {font-size: 16px;}
.font-size-18 {font-size: 18px;}
.font-size-20 {font-size: 20px;}
.font-size-22 {font-size: 22px;}
.font-size-22 {font-size: 22px;}
.font-size-24 {font-size: 24px;}
.font-size-28 {font-size: 28px;}
.font-size-32 {font-size: 32px;}
.font-size-36 {font-size: 36px;}
.font-size-48 {font-size: 48px;}
.font-size-96 {font-size: 96px;}
.font-size-128 {font-size: 128px;}
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.semibold {font-weight: 600;}
.bold {font-weight: 700;}
/* Colors */
.color-primary {color: var(--primary);}
.color-secondary {color: var(--secondary);}
.background-primary {background-color: var(--primary);}
.background-secondary {background-color: var(--secondary);}
/* Layout */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-none { display: none; }
.justify-center { justify-content: center; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.radius {border-radius: var(--radius);}
.container {
margin: auto;
max-width: 1200px;
padding: 0px 60px;
}
.large-container {
margin: auto;
max-width: 1200px;
padding: 0px;
}
/* Spacing */
.space-2 {width: 100%; height: 2px;}
.space-4 {width: 100%; height: 4px;}
.space-6 {width: 100%; height: 6px;}
.space-8 {width: 100%; height: 8px;}
.space-10 {width: 100%; height: 10px;}
.space-12 {width: 100%; height: 12px;}
.space-16 {width: 100%; height: 16px;}
.space-24 {width: 100%; height: 24px;}
.space-32 {width: 100%; height: 32px;}
.space-48 {width: 100%; height: 48px;}
.space-64 {width: 100%; height: 64px;}
.space-96 {width: 100%; height: 96px;}
.space-128 {width: 100%; height: 128px;}
.space-256 {width: 100%; height: 256px;}
/* Button */
.button {
margin: auto;
display: inline-flex;
width: auto;
height: auto;
padding: 12px 20px;
justify-content: center;
align-items: center;
border: none;
font-family: var(--family-sans);
line-height: 1;
cursor: pointer;
gap: 8px;
transition: 0.3s ease;
opacity: 1;
}
.button:hover {
opacity: 0.8;
}
/* Your Custom Css */
Frontend.Express © 2024