style-guide.md

Essential Stuff

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

Ionicon

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

---

Colors

--dark-jungle-green: hsl(188, 63%, 7%);
--prussian-blue: hsl(200, 69%, 14%);
--raisin-black-1: hsl(227, 29%, 13%);
--raisin-black-2: hsl(229, 17%, 19%);
--yellow-green: hsl(89, 72%, 45%);
--orange-soda: hsl(9, 100%, 62%);
--cultured-1: hsl(0, 0%, 93%);
--cultured-2: hsl(192, 24%, 96%);
--misty-rose: hsl(7, 56%, 91%);
--alice-blue: hsl(210, 100%, 97%);
--seashell: hsl(8, 100%, 97%);
--cadet: hsl(200, 15%, 43%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--opal: hsl(180, 20%, 62%);

Typography

--ff-nunito-sans: "Nunito Sans", sans-serif;
--ff-poppins: "Poppins", sans-serif;

--fs-1: 1.875rem;
--fs-2: 1.5rem;
--fs-3: 1.375rem;
--fs-4: 1.125rem;
--fs-5: 0.875rem;
--fs-6: 0.813rem;
--fs-7: 0.75rem;

--fw-500: 500;
--fw-600: 600;
--fw-700: 700;

Transition

--transition: 0.25s ease;

Spacing

--section-padding: 100px;

Shadow

--shadow-1: 0 5px 20px 0 hsla(219, 56%, 21%, 0.1);
--shadow-2: 0 16px 32px hsla(188, 63%, 7%, 0.1);