Graphic Designing website
video link:https://www.youtube.com/watch?v=E3f5JFDJWXQ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="shortcut icon" href="android-chrome-512x512.png" type="image/x-icon">
<title>Dizzle Graphics</title>
</head>
<body>
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<img src="logo.png" alt="logo" width="100px">
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-gray-900">Home</a>
<a class="mr-5 hover:text-gray-900">About</a>
<a class="mr-5 hover:text-gray-900">Portfolio</a>
<a class="mr-5 hover:text-gray-900">Contact us</a>
</nav>
<button class="inline-flex items-center bg-gray-100 border-0 py-1 px-3 focus:outline-none hover:bg-gray-200 rounded text-base mt-4 md:mt-0">Order Now!
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Dizzle Graphic Creative Agency
<br class="hidden lg:inline-block">
</h1>
<p class="mb-8 leading-relaxed">There's no limit to what you can get designed Dizzle Graphic Creative Agency. Whether you're looking for a spectacular new logo or some stunning flyers, the talented global community of designers at Dizzle Graphic Creative Agency can make it happen. Dizzle Graphic Creative Agency prides itself on it's high quality designers who deliver only the best graphic design services. Find the right design service for you below and get design you'll love today!</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Sign up for free</button>
<button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Your email address</button>
</div>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<video src="graphics (1).mp4" controls loop autoplay width="100%"></video>
</div>
</div>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Our design services</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Our custom design starts at a low price with options to meet any budget. On average, projects start to receive designs within a few hours.</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="logo-design.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-green-500 mb-1">logo-design</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Order Now!</h1>
<p class="leading-relaxed">Get The Best Logo Design For Your Business. Use The #1 Logo Maker. Get Started For Free! </p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="business-card-design.PNG">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-green-500 mb-1">business card design</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Order Now!</h1>
<p class="leading-relaxed">business cards create high potential value for you or your company, so it's wise to hire a professional.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="webdesign.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-green-500 mb-1">webdesign</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Order Now!</h1>
<p class="leading-relaxed">From website design and development to search engine optimization (SEO) and site maintenance, we've got you covered! </p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="flyerdesign.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-green-500 mb-1">flyerdesign</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Order Now!</h1>
<p class="leading-relaxed">Incredible Flyer Design vectors, icons, clipart graphics, and backgrounds for royalty-free download </p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="tshirtdesign.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-green-500 mb-1">tshirtdesign</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Order Now!</h1>
<p class="leading-relaxed">Custom T-Shirt Design Services. Hire a freelance t-shirt designer expert services and get your custom t-shirt design.</p>
</div>
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-4">
<div class="flex relative">
<img alt="gallery" class="absolute inset-0 w-full h-full object-cover object-center" src="appdesign.jpg">
<div class="px-8 py-10 relative z-10 w-full border-4 border-gray-200 bg-white opacity-0 hover:opacity-100">
<h2 class="tracking-widest text-sm title-font font-medium text-green-500 mb-1">appdesign</h2>
<h1 class="title-font text-lg font-medium text-gray-900 mb-3">Order Now!</h1>
<p class="leading-relaxed">In 2021 however, we'll see app designers going against the grain and bringing analogue inspiration </p>
</div>
</div>
</div>
</div>
</div>
</section><section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="William.png">
<p class="leading-relaxed">People tend to place a higher value on something when an authority figure approves of it. So if one or more of your customers are well known or authorities, make sure to feature those people on your website.</p>
<span class="inline-block h-1 w-10 rounded bg-green-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HOLDEN CAULFIELD</h2>
<p class="text-gray-500">Senior Producer</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 mb-6 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="hardy.png">
<p class="leading-relaxed">If you can’t get an actual testimonial, simply drop the names of your high profile Or, display the logos of high profile companies you’ve served like Neil Patel does on his “Consulting” </p>
<span class="inline-block h-1 w-10 rounded bg-green-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">ALPER KAMU</h2>
<p class="text-gray-500">Senior artist</p>
</div>
</div>
<div class="lg:w-1/3 lg:mb-0 p-4">
<div class="h-full text-center">
<img alt="testimonial" class="w-20 h-20 mb-8 object-cover object-center rounded-full inline-block border-2 border-gray-200 bg-gray-100" src="kerry.png">
<p class="leading-relaxed">These customers could be celebrities, well-known professionals in your industry, or people who have certain qualifications that make them authorities.</p>
<span class="inline-block h-1 w-10 rounded bg-green-500 mt-6 mb-4"></span>
<h2 class="text-gray-900 font-medium title-font tracking-wider text-sm">HENRY LETHAM</h2>
<p class="text-gray-500">CTO</p>
</div>
</div>
</div>
</div><section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Our Team</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Whatever cardigan tote bag tumblr hexagon brooklyn asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of them.</p>
</div>
<div class="flex flex-wrap -m-2">
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="liza.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Holden Caulfield</h2>
<p class="text-gray-500">UI Designer</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="Henry-Letham.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Henry Letham</h2>
<p class="text-gray-500">CTO</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="Oskar-Blinde.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Oskar Blinde</h2>
<p class="text-gray-500">Founder</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="John-Doe.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">John Doe</h2>
<p class="text-gray-500">DevOps</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="Martin-Eden.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Martin Eden</h2>
<p class="text-gray-500">Software Engineer</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="Boris-Kitua.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Boris Kitua</h2>
<p class="text-gray-500">UX Researcher</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="Atticus-Finch.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Atticus Finch</h2>
<p class="text-gray-500">QA Engineer</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="Alper-Kamu.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Alper Kamu</h2>
<p class="text-gray-500">System</p>
</div>
</div>
</div>
<div class="p-2 lg:w-1/3 md:w-1/2 w-full">
<div class="h-full flex items-center border-gray-200 border p-4 rounded-lg">
<img alt="team" class="w-16 h-16 bg-gray-100 object-cover object-center flex-shrink-0 rounded-full mr-4" src="Rodrigo-Monchi.png">
<div class="flex-grow">
<h2 class="text-gray-900 title-font font-medium">Rodrigo Monchi</h2>
<p class="text-gray-500">Product Manager</p>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4 text-center">
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">2.7K</h2>
<p class="leading-relaxed">Users</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">1.8K</h2>
<p class="leading-relaxed">Subscribes</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">35</h2>
<p class="leading-relaxed">Downloads</p>
</div>
<div class="p-4 sm:w-1/4 w-1/2">
<h2 class="title-font font-medium sm:text-4xl text-3xl text-gray-900">4</h2>
<p class="leading-relaxed">Products</p>
</div>
</div>
</div>
</section>
<footer class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
<div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<img src="logo.png" alt="logo" width="100px">
<span class="ml-3 text-xl">Dizzle Graphic Creative Agency </span>
</a>
<p class="mt-2 text-sm text-gray-500">Design with us!</p>
</div>
<div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">I need a design</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">Logo design</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Web page design</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Business card design</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Graphic design</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Find a designer</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">Graphic designer</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Logo designer</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Web designer</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Print designer</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">About us</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">How it works</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Contact us</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Affiliate program</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Design outsourcing</a>
</li>
</nav>
</div>
<div class="lg:w-1/4 md:w-1/2 w-full px-4">
<h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">Popular pages</h2>
<nav class="list-none mb-10">
<li>
<a class="text-gray-600 hover:text-gray-800">Design contest</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Design bids</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Logo ideas</a>
</li>
<li>
<a class="text-gray-600 hover:text-gray-800">Design outsourcing</a>
</li>
</nav>
</div>
</div>
</div>
<div class="bg-gray-100">
<div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
<p class="text-gray-500 text-sm text-center sm:text-left"> Dizzle Graphic Creative Agency
<a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-600 ml-1" target="_blank">@knyttneve</a>
</p>
<span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
<a class="text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3 text-gray-500">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
<path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</span>
</div>
</div>
</footer>
</body>
</html>
Comments
Post a Comment