Bicycle Illustration using HTML and CSS

Bicycle Illustration using HTML and CSS

Share your love

Are you looking to improve your HTML and CSS skills by creating an interactive illustration? In this tutorial, we’ll show you how to create an amazing “Bicycle Illustration” using only HTML and CSS. You’ll learn how to use HTML to create the structure of the bicycle and style it with CSS to give it a unique and visually appealing appearance. We’ll also cover how to add interactive animations to make your bicycle illustration come to life. By the end of this tutorial, you’ll have a fully-functional and visually stunning “Bicycle Illustration” that you can use to showcase your web development skills and impress your website visitors. So, let’s get started on creating a beautiful and interactive “Bicycle 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

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">

    <title>Bicycle 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="bicycle-container">
    <div class="wheel back-wheel">
        <div class="tire"></div>
        <div class="rim"></div>
        <div class="spokes"></div>
        <div class="spokes"></div>
        <div class="hub"></div>
    </div>
    <div class="wheel front-wheel">
        <div class="tire"></div>
        <div class="rim"></div>
        <div class="spokes"></div>
        <div class="spokes"></div>
        <div class="hub"></div>
    </div>
    <div class="gear">
        <div class="gear-red"></div>
        <div class="tube pedal-tube"></div>
        <div class="pedal"></div>
    </div>
    <div class="tube chain-tube"></div>
    <div class="tube seat-tube-back"></div>
    <div class="tube seat-tube-front"></div>
    <div class="tube seat-tube-post"></div>
    <div class="tube top-tube"></div>
    <div class="tube top-handlebar-tube"></div>
    <div class="tube top-handlebar-tube2"></div>
    <div class="tube down-tube"></div>
    <div class="tube head-tube"></div>
    <div class="tube head-tube-post"></div>
    <div class="saddle"></div>
    <div class="handlebars"></div>
</div>
<div class="ground-container">
    <div class="ground ground1"></div>
    <div class="ground ground2"></div>
    <div class="ground ground3"></div>
</div>

CSS Code 

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  background: #252525;
}
.bicycle-container {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 350px;
  height: 300px;
  overflow: hidden;
}
.bicycle-container .wheel {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 120px;
  height: 120px;
  box-shadow: 0 10px 15px -12px rgba(0, 0, 0, 0.3);
}
.bicycle-container .wheel .tire {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  border: 10px solid #151515;
  z-index: 2;
}
.bicycle-container .wheel .rim {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 114px;
  height: 114px;
  border-radius: 50%;
  border: 10px solid crimson;
  z-index: 1;
}
.bicycle-container .wheel .spokes {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid crimson;
  z-index: 1;
  animation: rt 2s infinite linear;
  background: rgba(200, 100, 100, 0.1);
}
.bicycle-container .wheel .spokes:nth-of-type(3) {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid crimson;
}
.bicycle-container .wheel .hub {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: crimson;
}
.bicycle-container .back-wheel {
  left: 0;
}
.bicycle-container .front-wheel {
  right: 0;
}
.bicycle-container .gear {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: calc(120px + 39.6px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #151515;
  z-index: 4;
  animation: rt 3s infinite linear;
}
.bicycle-container .gear .gear-red {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid crimson;
}
.bicycle-container .gear .pedal-tube {
  position: absolute;
  margin: auto;
  top: -30px;
  right: 0;
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
  width: 20px;
}
.bicycle-container .gear .pedal {
  position: absolute;
  margin: auto;
  top: -50px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 5px;
  background: crimson;
  border-radius: 5px;
  z-index: 3;
}
.bicycle-container .tube {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  height: 5px;
  border-radius: 5px;
  background: #151515;
  z-index: 3;
}
.bicycle-container .chain-tube {
  left: calc(120px / 2);
  width: 120px;
}
.bicycle-container .seat-tube-back {
  left: calc(120px / 2);
  transform-origin: left;
  transform: rotate(-60deg);
  width: 120px;
}
.bicycle-container .seat-tube-front {
  left: calc(120px / 2);
  transform-origin: right;
  transform: rotate(60deg);
  width: 120px;
}
.bicycle-container .seat-tube-post {
  left: calc((120px / 2) - 20px);
  transform-origin: right;
  transform: rotate(60deg);
  background: crimson;
  z-index: 1;
  height: calc(5px - 1px);
  width: 140px;
}
.bicycle-container .top-tube {
  left: 120px;
  bottom: initial;
  top: 44px;
  width: 113px;
}
.bicycle-container .top-handlebar-tube {
  right: 112px;
  bottom: initial;
  top: 25px;
  width: 20px;
  background: crimson;
}
.bicycle-container .top-handlebar-tube2 {
  right: 90px;
  bottom: initial;
  top: 25px;
  width: 25px;
  background: #151515;
  border-radius: 0%;
}
.bicycle-container .down-tube {
  left: calc(120px + 60px);
  width: 100px;
  transform-origin: left;
  transform: rotate(-50deg);
}
.bicycle-container .head-tube {
  right: calc(120px / 2);
  transform-origin: right;
  transform: rotate(60deg);
  width: 120px;
}
.bicycle-container .head-tube-post {
  right: calc(120px / 2);
  transform-origin: right;
  transform: rotate(60deg);
  width: 140px;
  background: crimson;
  z-index: 1;
  height: calc(5px - 1px);
}
.bicycle-container .saddle {
  position: absolute;
  margin: auto;
  top: 20px;
  left: 85px;
  width: 50px;
  height: 10px;
  border-top-left-radius: 50%;
  border-top-right-radius: 100%;
  border-bottom-left-radius: 50%;
  background: #151515;
  z-index: 2;
}
.bicycle-container .handlebars {
  position: absolute;
  margin: auto;
  top: 25px;
  right: calc(100px / 2 + 25px);
  width: 30px;
  height: 30px;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top: 5px solid #151515;
  border-right: 5px solid #151515;
  border-bottom: 5px solid crimson;
  z-index: 2;
}
.ground-container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 200px;
  overflow: hidden;
}
.ground-container .ground {
  position: absolute;
  margin: auto;
  animation: mv infinite linear;
  background: crimson;
  z-index: -1;
}
.ground-container .ground1 {
  bottom: 0;
  right: -150px;
  width: 100px;
  height: 4px;
  border-radius: 10px;
  animation-duration: 3s;
  z-index: 5;
}
.ground-container .ground1:before {
  content: "";
  position: absolute;
  margin: auto;
  top: -60px;
  left: 150px;
  width: 40px;
  height: 30px;
  border-top-right-radius: 60%;
  border-top-left-radius: 30%;
  border-bottom-left-radius: 20%;
  background: #151515;
}
.ground-container .ground2 {
  bottom: 70px;
  right: -250px;
  width: 100px;
  height: 2px;
  border-radius: 10px;
  animation-duration: 4s;
}
.ground-container .ground2:before {
  content: "";
  position: absolute;
  margin: auto;
  top: -30px;
  left: 200px;
  width: 20px;
  height: 10px;
  border-top-right-radius: 60%;
  border-top-left-radius: 30%;
  border-bottom-left-radius: 20%;
  background: #151515;
}
.ground-container .ground3 {
  top: 50px;
  right: -300px;
  width: 100px;
  height: 2px;
  border-radius: 10px;
  animation-duration: 5s;
}
.ground-container .ground3:before {
  content: "";
  position: absolute;
  margin: auto;
  top: 10px;
  left: -100px;
  width: 10px;
  height: 5px;
  border-top-right-radius: 60%;
  border-top-left-radius: 30%;
  border-bottom-left-radius: 20%;
  background: #151515;
}
@keyframes rt {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes mv {
  100% {
    right: 900px;
  }
}

Final Output

Bicycle Illustration using HTML and CSS

Written by: Piyush Patil

Code Credits: @AlbertFeynman

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