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?

Image
Create A Magic 8 Ball Project Using HTML, CSS, and JavaScript. HTML Code <!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>Magic 8 Ball - Created By Rohit Shah</title>     <link rel="stylesheet" href="style.css">     <script src="script.js"></script> </head> <body>     <div class="ball">         <div class="whitesurface">             <p id="response">8</p>         </div>     </div>     <div class="inputfield">         <input type="text" id="clear" placeholder="Ask Me Anything!">         <button id="askme" onclick="myF
Read More

Sunrise And Sunset Animation Using HTML & CSS?

Image
HTML Code <html lang="en"> <head>     <meta charset="UTF-8"></meta>     <meta content="IE=edge" http-equiv="X-UA-Compatible"></meta>     <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>     <title>Sunrise and Sunset</title>     <link href="style.css" rel="stylesheet"></link> </head> <body>     <div id="sun"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div class="hill"></div>     <div id="land"></div> </body> </html> CSS Code *{ box-sizing: border-box; margin: 0; padding:0; } body{ background-color: rgb(154,209,253);
Read More

Building A Simple Analog Clock Using HTML, CSS, and JavaScript

Image
Analog clocks are timeless pieces of art and functionality that continue to intrigue and captivate us. In this blog post, we will walk through the process of creating a simple analog clock using HTML, CSS, and JavaScript. This project will not only give you a better understanding of web development but also provide you with a functional and visually appealing clock. HTML Structure <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="style.css">   <title>Clock</title> </head> <body>   <div class="clock">     <div class="hands">       <div class="hand second"></div>       <div class="hand min"></div>       <div class="hand hour"></div>     </div>   </
Read More

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

Image
First of all these HTML elements into your HTML document. Copy the code From Our Github   <div><h1>Facebook</h1>         <p>Connect with friends and the world<br> around you on Facebook.</p>     </div>     <div class="form">         <form action="">        <div>         <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">        </div>        <div>         <input type="password" name="Password" id="Password" placeholder="Password">        </div>        <div>         <input type="submit" value="Log In" class="submit">        </div>         </form>     </div>   Then add this CSS code to your CSS file.  *{    box-sizing: border-box;    margin: 0;    padding: 0;    font-family: SFProDisplay-Regular, Helvet
Read More

Fundamentals Of Computer

Image
The computer is a boon for today's world. It has changed the world completely. With the use of a computer, many tasks have become easy. With the development and increase in the uses of computers in today's world, a person needs to know what computers are and how to use them to do his/her world in the best possible ways using a computer. Table of Contents: 1.1 Introduction To Computer 1.2 Working Principle of a Computer 1.3 Characteristics of a Computer 1.4 Application of Computer 1.1 Introduction To Computer A computer is an electronic device that accepts input in the form of data, process the input data, and provide meaningful output result. Data are raw facts are unprocessed information collected from various sources and those data are processed to give meaningful output also called information. 1.2 Working Principle of Computer As the definition goes(accept data, process the data, and give meaningful output), the working system is Input, Processing, and Output. In these thre
Read More

8 Characteristics Of Modern Computer

Image
A computer is a smart device. It helps us do our day-to-day tasks and others. It has many characteristics. Some of them are: 8 Characteristics Of Modern Computer Speed A computer can process simple and complex calculations in a fraction of a second than a human can do. The processing speed is usually measured in Hertz, KiloHertz, MegaHertz, GigaHertz, TeraHertz, and so forth. Accuracy A computer will always give 100% accurate results. If the user gives the correct data, the computer will give the correct Output and if the user gives the wrong data, the computer will give the wrong Output. A computer is called an Accurate machine because it always gives accurate results if the correct data is given. Reliability A computer is called a reliable machine because it gives consistent and accurate results under the given conditions or inputs every time. Automation A computer can perform and complete the task automatically if the instructions are programmed and given to it. It will complete or
Read More

What is A Web Development Framework Software?

Image
A web development framework is a software framework designed to support the development of web applications websites, or web services. Frameworks provide libraries for database management, security features, session management, and many more. Key Components of a Web Development Framework: 1. Programming Language: Most web development frameworks are designed for specific programming languages, such as Python, Ruby, PHP, JavaScript (Node.js), or Java. 2. Middleware: Frameworks often include middleware for handling common tasks like routing, authentication, and session management. 3. Database Abstraction: They provide tools for working with databases, making it easier to create, read, update, and delete data. 4. Templates: Frameworks usually include a templating engine to simplify the creation of dynamic web pages by allowing developers to mix code and content.   5. Security: Security features like input validation, protection against common web vulnerabilities (e.g., Cross-Site Scripting
Read More

How To Start Coding In 2024?

Image
Welcome to the exciting world of coding in 2024! Learning to code opens endless possibilities in a rapidly evolving technological landscape. Whether you're dreaming of building apps, analyzing data, or simply understanding how software works, this guide will help you take your first steps into the fascinating world of coding. Discover Your Path Before diving into coding, take a moment to think about what interests you most. Do you see yourself creating websites, designing mobile apps, or diving deep into data analysis? Understanding your passions will help you choose the right path and set achievable goals. Choosing Your Language In 2024, there's no shortage of programming languages to choose from. Python, for instance, is known for its simplicity and versatility, making it an excellent starting point for beginners. Whether you're interested in web development, machine learning, or automation, Python has got you covered. Embrace Learning Resources The internet is your best
Read More

Brief History Of Computer

Image
The history of computers is a fascinating journey that spans centuries and has undergone numerous transformative developments. Here's a brief overview: 1. Ancient Calculating Tools (3000 BC - 1500 BC): The earliest forms of computing can be traced back to devices like the abacus, which allowed people to perform basic arithmetic calculations. Other ancient tools like the astrolabe and slide rule were used for more specialized calculations.   2. Mechanical Calculators (17th - 19th centuries): The 17th century saw the development of mechanical calculators, with notable inventions like Blaise Pascal's Pascaline (1642) and Gottfried Wilhelm Leibniz's Stepped Reckoner (1673). These devices helped to do arithmetic operations.   3. Analytical Engine (1837): Designed by Charles Babbage, the Analytical Engine is considered the precursor to modern computers. It relied on punched cards for input and came equipped with components like an arithmetic logic unit, memory, and a control unit
Read More

Supercharge Your Business: Digital Innovation Tactics

Image
In the cutthroat world of business, standing still is akin to moving backward. For entrepreneurs, digital innovation is the ticket to not just surviving but thriving. In this article,  SmartTechTip  delves into eight pivotal strategies that can catapult your business into the digital stratosphere. These actionable insights aim to give entrepreneurs the ammunition they need to secure a prominent place in their respective industries. By adopting these techniques, you open doors to limitless opportunities. Crafting a Virtual Persona: The Importance of a Digital Footprint A strong online presence is your digital business card. An  accessible and engaging website  is the nucleus around your entire digital persona. Paired with compelling content and robust social media activity, your virtual persona can draw in more visitors. Increased traffic usually translates to higher sales and conversions. With the right kind of online engagement, even small businesses can cast a large shadow in the dig
Read More