Creating Mjölnir Thor Hammer Using HTML and CSS


In the realm of web design, creativity knows no bounds. In this tutorial, we're going to embark on an imaginative journey and create a stunning visual representation of Mjölnir, the legendary hammer of Thor, using just HTML and CSS. By following the steps outlined below, you'll wield the power of design and bring this iconic symbol to life on your web page. So, let's delve into the magical world of coding and unleash the thunderous might of Thor's hammer!

HTML Structure:

Begin by creating a new HTML file and paste the following code between the `<body>` tags:


<!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>Shapes</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
  <div class="ham">

    <div class="hammer">
      <div class="head"></div>
      <div class="top"></div>
      <div class="bottom"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="triangle">
    
        <div class="t1"></div>
        <div class="t2"></div>
        <div class="t3"></div>
        <div class="t4"></div>
    
      </div>
    </div>
    <div class="top-circle"></div>
    <div class="handle">
      <div class="h-p"></div>
      <div class="h-p1"></div>
      <div class="h-p2"></div>
      <div class="h-p3"></div>
      <div class="h-p4"></div>
      <div class="h-p5"></div>
      <div class="h-p6"></div>
      <div class="h-p7"></div>
      <div class="roap"></div>
    </div>
  </div>
</body>
</html>


CSS Styling:

Now, let's bring Mjölnir to life with some captivating CSS styles. Create a new CSS file named `style.css` in the same directory as your HTML file and paste the following code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}
body{

    background-color: black;
    overflow: hidden;
}
.hammer{
    display: flex;
    justify-content: center;
    align-items: center;
}
.head{
    position: absolute;
    width: 150px;
    height: 75px;
    background-color:white;
    top: 200px;
}
.top,.bottom{
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: white;

}
.top{
    top: 188px;
}
.bottom{
    top: 277px;
}
.left,.right{
    position: relative;
    width: 10px;
    height: 75px;
    background-color: rgb(255, 255, 255);
    
}
.left{
    top:200px;
    left: -77px;
}
.right{
    top: 200px;
    right: -77px;
}
.triangle{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}
.t1,.t2,.t3,.t4{
    position: absolute;
    border-width: 8px;
    border-style: solid;
    border-color: rgb(255, 255, 255) transparent transparent transparent;
}
.t1{
transform: rotate(-45deg);
top: 190px;
margin-right: 173px;
}
.t2{
    transform: rotate(45deg);
    top: 190px;
    margin-left: 134px;
}

.t3{
    transform: rotate(135deg);
    top: 269px;
    margin-left: 134px;
}
.t4{
    transform: rotate(-135deg);
    top: 269px;
    margin-right: 173px;
}

.top-circle{
    width: 70px;
    height: 3px;
    background-color: white;
    margin: auto;
    position: relative;
    top: 110px;
}
.h-p{
    width: 20px;
    height: 30px;
    background-color: white;
    margin: auto;
    position: relative;
    top: 200px;
}
.h-p1,.h-p2,.h-p3,.h-p4,.h-p5,.h-p6{
    width: 20px;
    height: 30px;
    background-color: white;
    margin: auto;
    transform: skewY(-30deg);
    position: relative;
    margin-bottom: 3px;
    top: 180px;
}
.h-p7{
    width: 25px;
    height: 30px;
    background-color: white;
    margin: auto;
    position: relative;
    top: 166px;
}
.roap{
    width: 30px;
    height: 55px;
    margin: auto;
    position: relative;
    top: 160px;

    transform: rotate(10deg);
   border: 2px solid white;
   border-radius: 40px 100px 100px 50px;
}
.ham{
    position: relative;
    bottom: 100px;
    transform: rotate(135deg);
    transform-origin:bottom;
}

Creating Mjölnir's Shape:

In the HTML section, you'll notice various `<div>` elements with distinct classes. These represent the different components of Mjölnir, including its head, handle, and intricate details.


Conclusion:

With HTML and CSS, you've successfully crafted an awe-inspiring rendition of Mjölnir, the legendary hammer of Thor. This tutorial highlights the limitless possibilities of web design and encourages you to channel your creativity into your projects. Feel free to further customize the hammer's appearance or integrate it into larger web designs for an extra touch of mythic charm. Happy coding, and may the power of Thor guide your web design endeavors!

Remember to save your HTML and CSS files in the correct locations and ensure the CSS file is properly linked to your HTML file using the `<link>` tag.

Get the source code on GitHub.


Trending Posts

How To Create A Magic 8 Ball Using HTML, CSS, and JavaScript?

8 Characteristics Of Modern Computer

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

Supercharge Your Business: Digital Innovation Tactics

Introduction To Web Development?

Sunrise And Sunset Animation Using HTML & CSS?

How Long Does It Take To Become A Front-end Web Developer?

How To Create a Fan Using Only HTML and CSS?

How To Earn Money With Only HTML and CSS Knowledge?

Creating a Netflix-inspired Animation using HTML and CSS