Donut Truck Illustration using HTML and CSS

Donut Truck Illustration using HTML and CSS

Share your love

Looking for a creative and fun way to showcase your design skills using HTML and CSS? Consider building a “Donut Truck Illustration”. In this tutorial, we’ll show you step-by-step how to create this illustration using only HTML and CSS. You’ll learn how to use HTML to create the structure of the illustration and style it with CSS to give it a playful and whimsical appearance. Plus, you’ll gain valuable experience in using CSS to create dynamic and responsive designs. By the end of this tutorial, you’ll have a functional and visually stunning “Donut Truck Illustration” that you can use to showcase your skills and engage your website visitors. So, let’s get started on creating a playful and visually appealing “Donut Truck Illustration” using HTML and CSS!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

Donut Truck Illustration using HTML and CSS

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

   <!-- fontawesome  -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">

    <title>Donut Truck Illustration using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<div class="container">
    <div class="truck">
        <div class="donuts">
            <div class="donut big">
                <div class="top"></div>
            </div>
            <div class="donut small">
                <div class="top"></div>
            </div>
        </div>
        <div class="body">
            <div class="top">
                <div class="back">
                </div>
                <div class="front">
                    <div class="window back"></div>
                    <div class="window front"></div>
                </div>
            </div>
            <div class="bottom">
                <div class="board">
                    <div class="back"></div>
                    <div class="front"></div>
                </div>
                <div class="light"></div>
            </div>
        </div>
        <div class="menu">
            <div class="menu__list">
                <div class="menu__item"></div>
                <div class="menu__item"></div>
                <div class="menu__item"></div>
                <div class="menu__item"></div>
                <div class="menu__item"></div>
                <div class="menu__item"></div>
            </div>
        </div>
        <div class="bar">
            <div class="awning">
                <div class="awning__shadow"></div>
                <div class="awning__inner"></div>
            </div>
        </div>
        <div class="wheel left">
            <div class="wheel__inner"></div>
        </div>
        <div class="wheel right">
            <div class="wheel__inner"></div>
        </div>
        <div class="shadow"></div>
    </div>
</div>

CSS Code 

Create a file style.css and paste the code below.

* {
  font-family: sans-serif;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  width: 600px;
  height: 95%;
  margin: 0 auto;
  position: relative;
}
.truck {
  content: "";
  width: 600px;
  height: 280px;
  position: absolute;
  bottom: 50px;
}
.truck:before,
.truck:after {
  content: "";
  position: absolute;
  border-radius: 10px;
}
.truck:before {
  top: 22px;
  left: 20px;
  width: 528px;
  height: 8px;
  background: #f1aca8;
  border-radius: 10px;
  z-index: 3;
}
.truck:after {
  top: 128px;
  left: -6px;
  width: calc(100% + 12px);
  height: 16px;
  background: #f9e9e4;
  z-index: 2;
}
.body {
  position: relative;
  width: 600px;
  height: 350px;
}
.body .top {
  position: relative;
  z-index: 2;
  width: 600px;
  height: 140px;
  border-radius: 120px 180px 4px 4px;
  overflow: hidden;
}
.body .top > .back,
.body .top > .front {
  position: absolute;
  top: 0;
  background-color: #f9e9e4;
}
.body .top > .back {
  left: 0;
  width: 420px;
  height: calc(100% - 12px);
}
.body .top > .front {
  right: 0;
  width: 180px;
  height: calc(100% - 12px);
}
.body .bottom {
  position: relative;
  z-index: 0;
  width: 632px;
  height: 140px;
  margin-left: -6px;
  overflow: hidden;
}
.body .bottom .board {
  position: absolute;
  top: -100px;
  left: 6px;
  width: 618px;
  height: 400px;
  background-color: #9396a4;
  border-radius: 0 40% 44% 190px;
  overflow: hidden;
  z-index: 1;
}
.body .bottom .board .back,
.body .bottom .board .front {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #f1aca8;
}
.body .bottom .board .back {
  left: 0;
  width: 440px;
}
.body .bottom .board .front {
  right: 0;
  width: 198px;
}
.body .bottom .board .front:before {
  content: "";
  position: absolute;
  top: 110px;
  left: 20px;
  width: 28px;
  height: 8px;
  background: #fefefe;
  border-radius: 5px;
}
.body .bottom:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: #f7c6c5;
  border-radius: 10px;
  z-index: 2;
}
.body .light {
  position: absolute;
  top: 50px;
  right: 0;
  width: 24px;
  height: 40px;
  background-color: #f7c6c5;
  border-radius: 50%;
  z-index: 0;
}
.window {
  width: 70px;
  height: 65px;
  border: 4px solid #fefefe;
  background: #fff;
  position: absolute;
  top: 40px;
  border-radius: 8px;
  overflow: hidden;
}
.window:before {
  content: "";
  position: absolute;
  top: -14px;
  left: 20px;
  height: 150%;
  width: 30px;
  color: #e8fbff;
  background-color: #e8fbff;
  transform: rotate(45deg);
  box-shadow: -30px 0 0 -10px;
}
.window.back {
  left: 20px;
}
.window.front {
  left: 110px;
}
.menu {
  box-sizing: border-box;
  z-index: 4;
  position: absolute;
  top: 90px;
  left: 24px;
  width: 72px;
  height: 100px;
  background: #efd3d3;
  border-radius: 2px;
  color: #f1aca8;
  text-align: center;
  font-size: 8px;
  padding: 4px 0;
}
.menu__list {
  position: absolute;
  left: 4px;
  width: calc(100% - 8px);
  height: 0;
  display: grid;
  grid-gap: 4px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background: #fefefe;
  color: #fff;
}
.menu__list .menu__item {
  position: relative;
  background: #fefefe;
  height: 28px;
}
.menu__list .menu__item:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: #fefefe;
  border-radius: 100%;
  border: 8px solid #f1aca8;
  box-sizing: border-box;
}
.menu__list .menu__item:nth-child(2):after {
  border-color: #bdf3e1;
}
.menu__list .menu__item:nth-child(3):after {
  border-color: #ffe87d;
}
.menu__list .menu__item:nth-child(3):after {
  border-color: #d19485;
}
.menu__list .menu__item:nth-child(5):after {
  border-color: #8ee0c5;
}
.menu__list .menu__item:nth-child(6):after {
  border-color: #f7c6c5;
}
.bar {
  z-index: 4;
  position: absolute;
  top: 40px;
  left: 120px;
  width: 260px;
  height: 170px;
  background: #493735;
  border-right: 8px solid #2b1f1d;
  border-left: 8px solid #2b1f1d;
}
.bar:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -14px;
  width: 287px;
  height: 12px;
  background: #e87c7c;
  border-radius: 3px;
}
.awning {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
}
.awning:before,
.awning:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 38px solid #f9e9e4;
}
.awning:before {
  left: -32px;
  z-index: 1;
}
.awning:after {
  right: -32px;
}
.awning__inner {
  position: absolute;
  left: -20px;
  width: calc(100% + 40px);
  height: 50px;
  background: repeating-linear-gradient(
    to right,
    #e87c7c,
    #e87c7c 20px,
    #d96464 20px,
    #d96464 40px
  );
}
.awning__inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  background: #fefefe;
  border-bottom: 2px solid rgba(0, 0, 0, 0.8);
  opacity: 0.2;
}
.awning__inner:after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  bottom: -10px;
  left: 0;
  background-color: #e87c7c;
  box-shadow: 0 0, 20px 0 #d96464, 40px 0 #e87c7c, 60px 0 #d96464,
    80px 0 #e87c7c, 100px 0 #d96464, 120px 0 #e87c7c, 140px 0 #d96464,
    160px 0 #e87c7c, 180px 0 #d96464, 200px 0 #e87c7c, 220px 0 #d96464,
    240px 0 #e87c7c, 260px 0 #d96464, 280px 0 #e87c7c;
}
.awning__shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 70px;
  overflow: hidden;
}
.awning__shadow:after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: -20px;
  background-color: #222;
  box-shadow: 0 0, 20px 0 #222, 40px 0 #222, 60px 0 #222, 80px 0 #222,
    100px 0 #222, 120px 0 #222, 140px 0 #222, 160px 0 #222, 180px 0 #222,
    200px 0 #222, 220px 0 #222, 240px 0 #222, 260px 0 #222, 280px 0 #222;
}
.wheel {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #555;
  box-shadow: 0px 8px 0px 0px rgba(0, 0, 0, 0.3) inset;
  position: absolute;
  bottom: -40px;
  overflow: hidden;
}
.wheel__inner {
  position: absolute;
  top: 16px;
  left: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ccc;
}
.wheel__inner:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 25px;
  height: 25px;
  border: 5px solid #9396a4;
  border-radius: 50%;
}
.wheel.left {
  left: 100px;
}
.wheel.right {
  left: 450px;
}
.donuts {
  position: absolute;
  top: -128px;
  left: 170px;
  width: 250px;
  height: 100px;
  display: flex;
  align-items: baseline;
}
.donuts .donut {
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  flex-shrink: 0;
  box-shadow: 3px 3px 0px 1px #d19485, inset 3px 3px 0px 0px #d19485;
}
.donuts .donut:before {
  z-index: 1;
  content: "";
  position: absolute;
  background: radial-gradient(
      circle at 10% 10%,
      #000 0,
      #000 3px,
      transparent 3px
    ),
    radial-gradient(circle at 10% 60%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 26% 76%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 28% 90%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 24% 4%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 20% 30%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 50% 8%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 50% 97%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 75% 85%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 87% 6%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 85% 26%, #000 0, #000 3px, transparent 3px),
    radial-gradient(circle at 86% 50px, #000 0, #000 3px, transparent 3px);
}
.donuts .donut:after {
  content: "";
  position: absolute;
  background: #8a6e6b;
  left: calc(50% - 2px);
  width: 8px;
  height: 16px;
  z-index: 0;
}
.donuts .donut .top {
  content: "";
  display: block;
  position: absolute;
}
.donuts .donut .top:before,
.donuts .donut .top:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 12%;
}
.donuts .donut .top:before {
  transform: rotate(63deg);
}
.donuts .donut .top:after {
  transform: rotate(-59deg);
}
.donuts .donut.small {
  width: 30px;
  height: 30px;
  border: 28px solid #f2e1d3;
  z-index: 1;
  margin-left: -14px;
}
.donuts .donut.small:before {
  opacity: 0.3;
  top: -13px;
  bottom: -13px;
  right: -23px;
  left: -23px;
}
.donuts .donut.small:after {
  bottom: -48px;
}
.donuts .donut.small .top {
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  border: 10px solid #6b524f;
  border-radius: 12%;
}
.donuts .donut.small .top:before,
.donuts .donut.small .top:after {
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border: 10px solid #6b524f;
}
.donuts .donut.big {
  width: 40px;
  height: 40px;
  border: 40px solid #f2e1d3;
}
.donuts .donut.big:before {
  opacity: 0.2;
  top: -24px;
  bottom: -24px;
  right: -24px;
  left: -24px;
}
.donuts .donut.big:after {
  bottom: -58px;
}
.donuts .donut.big .top {
  top: -24px;
  right: -24px;
  bottom: -24px;
  left: -24px;
  border: 24px solid #8ee0c5;
  border-radius: 12%;
}
.donuts .donut.big .top:before,
.donuts .donut.big .top:after {
  top: -24px;
  right: -24px;
  bottom: -24px;
  left: -24px;
  border: 22px solid #8ee0c5;
}
.shadow {
  width: 620px;
  height: 20px;
  position: absolute;
  bottom: -44px;
  background: #eee;
  border-radius: 50px;
  z-index: -1;
}

Final Output

Donut Truck Illustration using HTML and CSS

Written by: Piyush Patil

Code Credits: @cconceicao

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love

Related Posts