Frontend Forever

Animated Bike Website

About this Code

Hello reader, I am frontendforever. Nice to meet you again in this free code sharing website. In this post I am going to explain about Animated Bike Website. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

What does a responsive website do?

Making websites that look well on all devices is the goal of responsive web design. Different screen widths and viewports will be automatically accommodated by a responsive web design. How do you create a responsive website?

Responsive web design tutorial: 5 steps

Understand the elements of responsive design.
Search for examples.
Define your media queries.
Define your breakpoints.
Test your choices.

For More informations read this blog by Godaddy. Read More

**What does the term "responsive web design" mean?**

An technique to creating web pages called responsive design uses flexible layouts, flexible graphics, and media queries in cascading style sheets. The objective of responsive design is to create web pages that recognize the size and orientation of the visitor's screen and adjust the layout accordingly.

What is an animated website?

All types of online pages employ web animation. Small web animations that appear as a visitor scrolls across a website page to call attention to a particular aspect, an animation that showcases a product, or a promotional web animation that explains something in an amusing and compelling way are all examples of what they can be.

Motorcycle

A two- or three-wheeled motor vehicle is a motorbike. It is also known as a trike if it has three wheels, a bike, a motorcycle, or a cycle. The motorcycle designs needed for long-distance riding, commuting, cruising, sport (including racing), and off-road riding are all fairly different. Riding a motorbike entails taking part in other motorcycle-related social pursuits, such as joining a motorcycle club and attending rallies.

History of the motorcycle

The second part of the 19th century marks the beginning of the motorcycle's history. The "safety bicycle," a bicycle with equal-sized front and back wheels and a pedal crank system to power the rear wheel, is the ancestor of motorcycles. The motorbike lacks a solid lineage that can be traced back to a single idea or mechanism, despite certain early turning points in its history. Instead, the concept appears to have struck a number of engineers and innovators simultaneously throughout Europe.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

<!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">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="path"></div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
            <div class="thumbnail">
                <li><img src="https://www.frontendforever.com/uploads/assets/bike1.png" onclick="big('https://www.frontendforever.com/uploads/assets/bike1.png');path('#e5e5e5');bg('purple')"></li>
                <li><img src="https://www.frontendforever.com/uploads/assets/bike2.png" onclick="big('https://www.frontendforever.com/uploads/assets/bike2.png');path('white');bg('linear-gradient(70deg,yellow,green)')"></li>
                <li><img src="https://www.frontendforever.com/uploads/assets/bike3.png" onclick="big('https://www.frontendforever.com/uploads/assets/bike3.png');path('#e5e5e5');bg('rgba(255,0,0,.8)')"></li>
            </div>
            <div class="big-img">
                    <img src="https://www.frontendforever.com/uploads/assets/bike3.pngg" class="big">   
            </div> 
            <div class="content">
                <p>🔥Let's Ride🔥</p>
                <br><h1>Don't Fear Dying<br>  Fear Not Living</h1><br><br>
                <h5>😎For Bike Lovers & Bike Riders💝</h5><br><br>      
            </div>
    </div>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container{
  width: 100%;
  height: 100%;
  background: rgb(32, 145, 221);    
}
.big-img img{
  position: absolute;
  left: 20%;
  top: 20%;
  max-width: 500px;
  max-height: 300px;
}
ul{
  position: absolute;
  top: 5%;
  right: 5%;
}
ul li{
  list-style: none;
  display: inline-block;
  margin-right: 50px;
}
ul li a{
  display: flex;
  justify-content: space-around;
  text-decoration: none;
  font-family: sans-serif;
  font-weight:600;
  color:white;
}
.thumbnail{
  padding-top: 7%;
}
.thumbnail li{
  list-style: none;
  position: relative;
  margin-top: 50px;
  max-width: 100px;
}
.thumbnail img{
  display: block;
  max-width: 120px;
  transition: 0.5s;
}
.thumbnail img:hover{
  transform: translateX(30px);
  transition: 0.5s;
}
.path{
  position: absolute;
  width: 100%;
  height: 100vh;
  background:#e5e5e5;
  clip-path: circle(520px at left 300px);
}
.content{
  position: absolute;
  cursor: pointer;
  max-width: 50%;
  right: 3%;
  top: 20%;
}
.content h1{
  font-size: 80px;
  font-weight: 600;
  font-family:fantasy;
  color:rgb(28, 211, 211);
  text-shadow: 5px 5px 2px rgba(0,0,0,.5);
}
.content h5{
  font-size: 22px;
  font-weight: bold;
  color:black;
  text-shadow: 1px 1px 1px black;
  text-transform: uppercase;
  font-family: sans-serif;
  margin-left: 10%;
}
p{
  color:black;
  font-size: 50px;
  font-weight: 700;
  text-shadow: 2px 0px 5px rgba(0,0,0,.5);
  font-family:cursive;
  margin-left: 16%;
}

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Animated Bike Website

About this Code

What does a responsive website do?

**What does the term "responsive web design" mean?**

What is an animated website?

Motorcycle

History of the motorcycle

Images

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever