style-guide.md

#GAURAV TRIPATHI

Html import links

Google font

<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=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
  rel="stylesheet">

Ionicon

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

---

Colors

--maximum-blue-green: hsl(184, 50%, 60%);
--selective-yellow: hsl(42, 98%, 55%);
--eerie-black_70: hsla(240, 1%, 14%, 0.7);
--granite-gray: hsl(0, 0%, 40%);
--spanish-gray: hsl(0, 0%, 57%);
--oxford-blue: hsl(243, 95%, 8%);
--eerie-black: hsl(214, 10%, 14%);
--xiketic: hsl(240, 100%, 6%);
--white-1: hsl(0, 0%, 100%);
--white-2: hsl(0, 0%, 98%);
--white_10: hsla(0, 0%, 100%, 0.1);
--jet: hsl(225, 4%, 21%);

Typography

--ff-work-sans: 'Work Sans', sans-serif;
--ff-jost: 'Jost', sans-serif;

--fs-1: 3.2rem;
--fs-2: 2.4rem;
--fs-3: 2.2rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.4rem;
--fs-7: 1.3rem;
--fs-8: 1rem;

--fw-400: 400;
--fw-500: 500;
--fw-700: 700;

Spacing

--section-padding: 60px;

Border Radius

--radius-circle: 50%;
--radius-pill: 200px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
--cubic-anim: cubic-bezier(0.455, 0.030, 0.515, 0.955);