<h1 style="font-size: 2.5em;">
Meet Logo Maker, the best Discord bot for designers.
Create professional logos for designers and personal use, all implemented on the Discord App.
</h1>

<style>

    #features .feature-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    #features .feature-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 16px;
        box-sizing: border-box;
        height: 100%;
        min-height: 200px; /* Set a minimum height to maintain equal height for all items */
    }

    #features .feature-item h3 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.125rem;
        margin-bottom: 8px; /* Adjust spacing between title and text */
    }

    #features .feature-item p {
        flex-grow: 1;
        font-size: 0.875rem;
        color: #6c757d;
    }

    @media (max-width: 768px) {
        #features .feature-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 576px) {
        #features .feature-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<section class="w-full py-12 md:py-24 lg:py-32" id="features">
    <div class="mx-auto feature-grid sm:max-w-4xl md:gap-12 lg:max-w-5xl">
        <div class="feature-item">
            <h3 class="text-lg font-bold flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pen-tool h-5 w-5 text-primary">
                    <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z"></path>
                    <path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18"></path>
                    <path d="m2.3 2.3 7.286 7.286"></path>
                    <circle cx="11" cy="11" r="2"></circle>
                </svg>
                Easy to Use
            </h3>
            <p>Create logos in just a few clicks with our easy-to-use interface.</p>
        </div>
        <div class="feature-item">
            <h3 class="text-lg font-bold flex items-center gap-2">
                <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
                    <circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
                    <circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
                    <circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
                    <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path>
                </svg>
                Customization
            </h3>
            <p>Customize your logo with a wide range of shapes, colors, and design elements to make it your own.</p>
        </div>
        <div class="feature-item">
            <h3 class="text-lg font-bold flex items-center gap-2">
                <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect width="18" height="7" x="3" y="3" rx="1"></rect>
                    <rect width="9" height="7" x="3" y="14" rx="1"></rect>
                    <rect width="5" height="7" x="16" y="14" rx="1"></rect>
                </svg>
                Shapes Library
            </h3>
            <p>Choose from our collection of shapes to use in your design.</p>
        </div>
        <div class="feature-item">
            <h3 class="text-lg font-bold flex items-center gap-2">
                <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" x2="12" y1="15" y2="3"></line>
                </svg>
                Export Options
            </h3>
            <p>Download your logo in a variety of file formats, including PNG, JPG, and GIF, for use across platforms.</p>
        </div>
        <div class="feature-item">
            <h3 class="text-lg font-bold flex items-center gap-2">
                <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m9.06 11.9 8.07-8.06a2.85 2.85 0 1 1 4.03 4.03l-8.06 8.08"></path>
                    <path d="M7.07 14.94c-1.66 0-3 1.35-3 3.02 0 1.33-2.5 1.52-2 2.02 1.08 1.1 2.49 2.02 4 2.02 2.2 0 4-1.8 4-4.04a3.01 3.01 0 0 0-3-3.02z"></path>
                </svg>
                Coloring Tools
            </h3>
            <p>Add colors to your logo, if it's a solid color, gradient, or transparent.</p>
        </div>
        <div class="feature-item">
            <h3 class="text-lg font-bold flex items-center gap-2">
                <svg class="h-5 w-5 text-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 3h3v18h-3"></path>
                    <path d="M8 21H5V3h3"></path>
                </svg>
                Branding
            </h3>
            <p>Write your brand on the logo in the most fitting way.</p>
        </div>
    </div>
</section>


#### Check out these step-by-step screenshots of Logo Maker in use:

### Step 1: Select a Shape

Choose from our collection of shapes to use in your design

<img src="https://logomaker.quackbots.xyz/_next/image?url=%2Fshapes.webp&w=640&q=75" alt="Step 1" width="400" style="border-radius: 1rem; margin-left: calc(0.3rem + 1vw);">




### Step 2: Add colors

Add colors to your logo, if it's a solid color, gradient or transparent.

<img src="https://logomaker.quackbots.xyz/_next/image?url=%2Fcolors.webp&w=640&q=75" alt="Step 2" width="400" style="border-radius: 1rem; margin-left: calc(0.3rem + 1vw);">

### Step 3: Download and Use

Export your logo in various file formats or as Discord emojis.

<img src="https://logomaker.quackbots.xyz/_next/image?url=%2Fexport.webp&w=640&q=75" alt="Step 3" width="400" style="border-radius: 1rem; margin-left: calc(0.3rem + 1vw);">


<section class="w-full py-12 md:py-24 lg:py-32" id="features">
    
    
<style>
    /* Style for the buttons container */
    .button-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 30px;
        flex-wrap: wrap; /* Allow wrapping of buttons if needed */
    }

    /* General button styles */
    .button-container a.btn {
        padding: 12px 24px;
        font-size: 1.125rem;
        font-weight: bold;
        color: #fff; /* Text color white */
        border: none;
        border-radius: 12px;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.3s ease;
        display: inline-block; /* Ensure buttons are displayed as blocks */
    }

    /* Specific styles for each button */
    .btn-invite-bot {
        background-color: #7055D3;
        animation: Rotate 2s ease-in-out infinite;
    }

    .btn-discord-server {
        background-color: #331B69;
    }

    .btn-website {
        background-color: #007bff;
    }

    .btn-quack-bots {
        background-color: #7C131E;
    }

    /* Hover effects for darker shades */
    .btn-invite-bot:hover,
    .btn-invite-bot:focus {
        background-color: #5c47ae; /* Darker shade on hover */
    }

    .btn-discord-server:hover,
    .btn-discord-server:focus {
        background-color: #291558; /* Darker shade on hover */
    }

    .btn-website:hover,
    .btn-website:focus {
        background-color: #0056b3;
    }

    .btn-quack-bots:hover,
    .btn-quack-bots:focus {
        background-color: #5a0e15; /* Darker shade on hover */
    }

    /* Rotate animation for Invite Bot button */
    @keyframes Rotate {
        0%, 100% {
            transform: rotate(0deg);
            transform-origin: 50% 100%;
            background: linear-gradient(to bottom, #7748ce 5%, #7748ce 100%);
        }
        10% {
            transform: rotate(2deg);
            background: linear-gradient(to bottom, #8c5ff7 5%, #8c5ff7 100%);
        }
        20%, 40%, 60% {
            transform: rotate(-4deg);
            background: linear-gradient(to bottom, #8c5ff7 5%, #8c5ff7 100%);
        }
        30%, 50%, 70% {
            transform: rotate(4deg);
            background: linear-gradient(to bottom, #8c5ff7 5%, #8c5ff7 100%);
        }
        80% {
            transform: rotate(-2deg);
            background: linear-gradient(to bottom, #8c5ff7 5%, #8c5ff7 100%);
        }
        90% {
            transform: rotate(2deg);
            background: linear-gradient(to bottom, #8c5ff7 5%, #8c5ff7 100%);
        }
    }

    /* Style for the additional section */
    .additional-section {
        text-align: center;
        margin-top: 30px;
    }

    .additional-section p {
        margin-bottom: 10px;
        font-size: 1.25rem; /* Increase the font size */
        font-weight: bold;
    }

    .additional-section a.btn {
        display: inline-block;
        margin-top: 10px;
        padding: 12px 24px;
        font-size: 1.125rem;
        font-weight: bold;
        color: #fff;
        background-color: #7C131E;
        border: none;
        border-radius: 12px;
        text-align: center;
        text-decoration: none;
        transition: background-color 0.3s ease;
    }

    .additional-section a.btn:hover,
    .additional-section a.btn:focus {
        background-color: #5a0e15; /* Darker shade on hover */
    }

    .additional-section img {
        max-width: 15%; /* Resize the image to 15% of its container width */
        height: auto;
        margin-top: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>


<div class="button-container">
    <a href="https://discord.com/oauth2/authorize?client_id=1237835484223242351" class="btn btn-invite-bot">Invite Bot</a>
    <a href="https://discord.gg/k4r8PfbFy5" class="btn btn-discord-server">Join Discord support server</a>
    <a href="https://logomaker.quackbots.xyz" class="btn btn-website">Website</a>
</div>


<div class="additional-section">
    <p>Made by the Quack Bots team</p>
    <a href="https://quackbots.xyz" class="btn">Quack Bots website</a>
    <img src="https://quackbots.xyz/_next/image?url=%2Flogo.webp&w=640&q=75" alt="Quack Bots Logo">
</div>

![logo maker banner](https://images-ext-1.discordapp.net/external/i2Yp5hmY5ZtuFSwie7oh6qxEIvNz9FK5wZADZg5-oFI/https/i.imgur.com/Too4zGh.gif)

© 2024 [Quack Bots](https://quackbots.xyz). All rights reserved.

<style>
/* Base styles for the images */
img[alt="Step 1"],
img[alt="Step 2"],
img[alt="Step 3"] {
  position: relative;
  display: inline-block;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.2);
  animation: heartbeat-box-shadow 6s infinite;
  transition: box-shadow 0.3s ease;
}

/* Hover and Focus Effects */
img[alt="Step 1"]:hover,
img[alt="Step 2"]:hover,
img[alt="Step 3"]:hover,
img[alt="Step 1"]:focus,
img[alt="Step 2"]:focus,
img[alt="Step 3"]:focus {
  animation: none;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.4), 0 0 45px rgba(212, 175, 55, 0.3);
}

/* Keyframes for heartbeat box-shadow animation */
@keyframes heartbeat-box-shadow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.2);
  }
  50% {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6), 0 0 25px rgba(212, 175, 55, 0.4), 0 0 35px rgba(212, 175, 55, 0.3);
  }
}

.chakra-link.chakra-button.css-vmk9es {
  position: relative;
  display: inline-block;
  /* Maintain original shape and color */
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.4), 0 0 45px rgba(212, 175, 55, 0.3);
  transition: box-shadow 0.3s ease;
}

/* Optional: Enhance the glow effect on hover and focus */
.chakra-link.chakra-button.css-vmk9es:hover,
.chakra-link.chakra-button.css-vmk9es:focus {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.8), 0 0 50px rgba(212, 175, 55, 0.6), 0 0 75px rgba(212, 175, 55, 0.5);
}

/* Define the heart-beat animation */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1); /* Scale up to 10% larger */
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.1); /* Scale up to 10% larger */
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1); /* Ensure it ends at the original size */
  }
}

/* Apply the animation to the element */
.css-1vcqbmk {
  animation: heartbeat 1.5s ease-in-out infinite; /* Adjust the duration and easing function as needed */
  position: relative;
  left: -10px; /* Adjust the value as needed to move the button more to the left */
}


/* Define the typing animation */
@keyframes typing {
  from { 
    width: 0; 
  }
  to { 
    width: 100%; 
  }
}

/* Define the cursor blink animation */
@keyframes blink {
  from, to { 
    border-color: transparent; 
  }
  50% { 
    border-color: black; 
  }
}

/* Define an animation to remove the cursor */
@keyframes cursor-remove {
  from { 
    border-right: 3px solid black; 
  }
  to { 
    border-right: none; 
  }
}

/* Apply the animations to the element */
.chakra-text.css-1n892f8 {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid black; /* Adjust the cursor width and color */
  animation: typing 2s steps(40, end) 1s 1 normal forwards, 
             blink 0.75s step-end infinite, 
             cursor-remove 0s 3s forwards; /* Remove cursor after typing animation ends */
  width: 0; /* Start with no width to create the typing effect */
}


@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.chakra-text.css-rd8i1m {
  background: linear-gradient(270deg, #ff6ec4, #7873f5, #42e695, #3bb2b8);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient 8s ease infinite;
}



.chakra-stack.css-5i1e9t {
  position: relative;
  display: inline-block; /* Ensure the element is treated as an inline-block for proper sizing */
  padding: 10px; /* Adjust padding as needed */
  border-radius: 4px; /* Optional: Adjust for rounded corners */
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(0, 255, 0, 0.8), 0 0 15px rgba(0, 0, 255, 0.8); /* Multicolor glow effect */
  animation: multicolor-glow 3s infinite alternate; /* Apply the animation */
}

/* Keyframes for multicolor glowing effect */
@keyframes multicolor-glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.8), 0 0 10px rgba(0, 255, 0, 0.8), 0 0 15px rgba(0, 0, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.6), 0 0 10px rgba(0, 255, 0, 0.6), 0 0 15px rgba(0, 0, 255, 0.6);
  }
}

@keyframes float {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(10px);
  }
}

.floating-div {
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}



</style>

Logo Maker

Create stunning logos with Logo Maker!
Make logos, avatars, emojis and more!
Use interactive buttons and presets.

Logo maker, Higher or Lower, Frog Bot and Skull.

Logo Maker に投票

私たちをサポートしませんか？