Terieyenike

 <button id="hamburger" class="hamburger"></button>
    <nav id="main__nav" class="main__nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Service</a>
        <a href="#">Work with me</a>
    </nav>

Terieyenike

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --darkbg: #222222;

Terieyenike

const nav = document.getElementById('main__nav')
const hamburger = document.getElementById('hamburger')

nav.addEventListener('click', handleNav)
hamburger.addEventListener('click', handleNav)

function handleNav() {
  if(!nav.classList.contains('main__nav--active')){
    nav.classList.add('main__nav--active');
    hamburger.classList.add('hamburger--active')

Terieyenike

<template>
  <div class="lg:flex lg:items-center px-8 py-8 max-w-md m-auto md:max-w-2xl lg:m-0 lg-p-0 w-full lg:max-w-5xl">

    <div class="lg:w-2/4">
      <h1 class="text-gray-900 text-lg mb-2 font-bold uppercase md:text-3xl lg:text-2xl">Image Banner Generator</h1>

      <form>
        <template v-if="banners.length > 0" class="mb-6">
          <label className="mb-2 md:text-2xl lg:text-base">

Terieyenike

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Terieyenike

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Mulish:700&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg-colour: #f0f7f4;

Terieyenike

import React from "react";
import { useDrag, useDrop } from "react-dnd";

import galleryList from "./data.js";

const Card = ({ src, title, id, index, moveImage }) => {
  const ref = React.useRef(null);

  const [, drop] = useDrop({
    accept: "image",

Terieyenike

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;

Terieyenike

@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville|Mulish:700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Reset margins */
body,

Terieyenike

.img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2rem;