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

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig...
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH...
Read More

How to Block a Website? A Simple Guide for All Devices

Image
Ever feel like you're spending way too much time on social media? Or maybe you want to make sure certain websites are off-limits for your kids? Whatever your reason, blocking a website is actually pretty easy. In this guide, I'll walk you through different ways to block a website on any device—whether you're on Windows, Mac, Android, or iPhone. Method 1: Block Websites Using the Hosts File (Windows and macOS) If you want a super effective way to block websites on your computer, tweaking the hosts file is the way to go. This method works system-wide, so once a site is blocked, no one using that computer can access it. Steps for Windows: Open Notepad as Administrator. Click File > Open and head over to C:\Windows\System32\drivers\etc\ . Change the file type to All Files and open hosts . Scroll to the bottom and add this: 127.0.0.1 facebook.com 127.0.0.1 www.facebook.com ...
Read More

🚀 Build a QR Code Generator Using HTML, CSS & JavaScript

Image
QR Codes are everywhere — websites, apps, menus, payments, and more. In this tutorial, you will learn how to create a simple and powerful QR Code Generator using HTML, CSS, and JavaScript. This is a perfect beginner-friendly project and a great addition to your portfolio. We are also using a lightweight library called qrcodejs : CDN: https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js ✅ Features Generate QR codes instantly Accepts text or URL Press Enter to generate Download QR code as PNG Modern UI with smooth design 📌 Full Source Code (HTML, CSS & JavaScript) 📄 HTML Code <!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>QR Code Generator</title> </head> ...
Read More

Build a Simple Calculator Using HTML, CSS, and JavaScript 💻

Image
In this tutorial, we’ll create a simple yet fully functional calculator using HTML, CSS, and JavaScript . This project is perfect for beginners who want to practice DOM manipulation, event handling, and basic CSS layout techniques. 🎯 What You’ll Learn How to structure a calculator interface using HTML. How to style it beautifully using CSS Grid. How to make it functional using JavaScript. 🧱 Step 1: Create the HTML Structure Start by writing the basic layout for your calculator. Create a file named index.html and paste the following code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="co...
Read More

Create Light & Dark Theme Toggle Using HTML, CSS & JavaScript

Image
Dark mode is one of the most popular features in modern websites and apps. In this tutorial, you will learn how to build a simple Light & Dark Theme Toggle using just HTML, CSS, and JavaScript. This small project is perfect for beginners and helps you understand DOM manipulation and event handling. ⭐ GitHub Source Code You can download or view the full project on GitHub: 🔗 View on GitHub 🌗 What We Are Building This project contains a rounded switch. When you click the button: The background switches from light to dark The button slides smoothly The icon changes between ☀️ and 🌙 🧱 1. HTML Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Light and Dark Theme</title> <link rel="stylesheet" href="style.css"> </hea...
Read More

How Do Browsers Make Money If They Are Free To Use?

Image
Have you ever wonder how the Internet browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge, etc make money. Does this browser even make money, or are they free to use? None of us pay money to browse the Internet through these browsers, right. Even you are reading this on the web browser for free. If everything is free, then how do Internet browsers make money? Do Popular Web Browsers Even Make Money? Yes, they make lots of money through the browser. If you think the browser is free, you are wrong. Always remember, If you are not paying for the product, you are the product. All the popular web browsers make money in different ways. But How? Let's start with the most popular web browser Google Chrome. How Google Chrome Earn Money? If you use Google Chrome, then you will see that the default search engine is Google. On the search result page of Google, you will see ads. By showing the ads, Google Chrome generates money. And If you visit any website on Google Ch...
Read More

Bridging the Language Divide: How Modern IT Professionals Can Make Their Work Make Sense

Image
Every IT professional knows the pain of seeing eyes glaze over during a meeting. Firewalls, integrations, or “containers” can sound like code words for confusion. The truth? The best IT communicators aren’t just tech-savvy — they’re translators who turn complexity into clarity, bridging technology and business value. Major Points To earn influence beyond the server room, speak in outcomes, not acronyms. Ground your communication in impact — time saved, risk reduced, performance improved. Use visuals, stories, and empathy to help non-technical audiences grasp the “why,” not just the “how.” Common Translation Gaps — and How to Fix Them Tech Concept What Stakeholders Hear How to Reframe It API Integration “Something with code.” “We’re connecting systems so data moves automatically, saving the team manual work.” Network Redundancy “Extra equipment?” “Backup systems that keep operations ...
Read More

Computer Hardware and Software

Image
Table of Contents 1. Computer Hardware 1.1 Computer Hardware Types 1.1.1 Input Devices 1.1.2 Processing Devices 1.1.3 Output Devices 1.1.4 Memory and Storage Devices 2. Computer Software 2.1 Types of Computer Software 1. Computer Hardware 1.1 Computer Hardware Types Computer hardware refers to the physical components that make up a computer system. These components are essential for the system to function and interact with software. 1.1.1 Input Devices Input devices allow users to provide data and commands to the computer. Some common input devices include: Keyboard: Used for typing text and commands. Mouse: A pointing device used to interact with...
Read More

Shield Your Small Business: Must-Have Cybersecurity Strategies

Image
Image via Freepik In an era where digital threats loom large, small businesses must prioritize cybersecurity to protect their operations. Cybercriminals increasingly target smaller enterprises, often perceiving them as easier targets due to limited resources and defenses. By adopting robust cybersecurity measures, small businesses can safeguard their digital assets and ensure their longevity and reputation in the market. This article explores practical strategies to help small enterprises bolster their defenses against cyber threats. Embracing Staging Environment Testing Testing updates in a staging environment is essential for spotting bugs and performance issues before they impact your customers. This environment mimics your production setup, helping to identify discrepancies that might lead to security vulnerabilities. By thoroughly vetting updates in this controlled space, you minimize risks to your live system. Implementing role-based access control and conducting regular...
Read More