Warcraft Page Mockup

Developer
Event Horizon
Size
4,080 Kb
Views
42,504
  1. Warcraft Page Mockup Previews
  2. Warcraft Page Mockup HTML Codes
  3. Warcraft Page Mockup CSS Codes

How do I make an warcraft page mockup?

Warcraft Page Mockup. What is a warcraft page mockup? How do you make a warcraft page mockup? This script and codes were developed by Event Horizon on 30 July 2022, Saturday.

Warcraft Page Mockup Previews
IQ Test

Warcraft Page Mockup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Warcraft Page Mockup</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- web page designed for a warlock (playing with color palettes and designs) empty images will have the white border, unsure if that is correctable at this time, only using them for testing-->
<div id="head"> <div class="header">WARLOCKS <div class="headerchild">OF </div> <div class="headerfoot">DRAENOR</div> </div> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Linkmap</a></li> </ul> </div>
</div>
<div id="body"> <div> <div class="platform"> <img src="#" alt="Picture Here"/> <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis elementum nulla, id accumsan augue. Aliquam in felis nec magna malesuada venenatis id sit amet lectus. Proin interdum tortor ut est ultricies, ac bibendum justo finibus. Phasellus mollis enim sem, eget pellentesque tortor blandit ut. Nulla arcu lorem, semper gravida ultrices sed, pellentesque a turpis. Maecenas pulvinar vitae ex ac laoreet. Nunc eleifend lacus vel rutrum vulputate. Ut in mattis diam. Morbi pulvinar lectus ac enim eleifend blandit. Maecenas eu sollicitudin dolor. Donec maximus erat dolor, a imperdiet eros gravida quis. Donec tellus elit, faucibus at nunc non, posuere bibendum tortor. In tempor erat ex, id imperdiet justo convallis sit amet. Pellentesque venenatis risus a hendrerit vestibulum. In feugiat a neque scelerisque fermentum.</p> </div> <div class="platform">orem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis elementum nulla, id accumsan augue. Aliquam in felis nec magna malesuada venenatis id sit amet lectus. Proin interdum tortor ut est ultricies, ac bibendum justo finibus. Phasellus mollis enim sem, eget pellentesque tortor blandit ut. Nulla arcu lorem, semper gravida ultrices sed, pellentesque a turpis. Maecenas pulvinar vitae ex ac laoreet. Nunc eleifend lacus vel rutrum vulputate. Ut in mattis diam. Morbi pulvinar lectus ac enim eleifend blandit. Maecenas eu sollicitudin dolor. Donec maximus erat dolor, a imperdiet eros gravida quis. Donec tellus elit, faucibus at nunc non, posuere bibendum tortor. In tempor erat ex, id imperdiet justo convallis sit amet. Pellentesque venenatis risus a hendrerit vestibulum. In feugiat a neque scelerisque fermentum.</div> <div class="platform">orem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis elementum nulla, id accumsan augue. Aliquam in felis nec magna malesuada venenatis id sit amet lectus. Proin interdum tortor ut est ultricies, ac bibendum justo finibus. Phasellus mollis enim sem, eget pellentesque tortor blandit ut. Nulla arcu lorem, semper gravida ultrices sed, pellentesque a turpis. Maecenas pulvinar vitae ex ac laoreet. Nunc eleifend lacus vel rutrum vulputate. Ut in mattis diam. Morbi pulvinar lectus ac enim eleifend blandit. Maecenas eu sollicitudin dolor. Donec maximus erat dolor, a imperdiet eros gravida quis. Donec tellus elit, faucibus at nunc non, posuere bibendum tortor. In tempor erat ex, id imperdiet justo convallis sit amet. Pellentesque venenatis risus a hendrerit vestibulum. In feugiat a neque scelerisque fermentum. </div> </div> <div> <div class="platform">Text</div> <div class="platform">Text</div> <div class="platform">Text</div> </div> <div> <div class="platform">Text</div> <div class="platform">Text</div> <div class="platform">Text</div> </div>
</div>
<div id="foot"> <div class="footer"> <ul> <li> <a>Home</a></li> <li> <a>Contact</a></li> <li> <a>About</a></li> <li> <a>Linkmap</a></li> </ul> </div> <div class="copyright">&copy; Warlocks of Draenor</div>
</div>
</body>
</html>

Warcraft Page Mockup - Script Codes CSS Codes

/*
Color Listing
Blizzard Browns/Golds: Light #805515, Dark #553300
Warlock Purples: Light #87468B
Warlock Greens: Light #599532, Dark #1E4B00
*/
/* Font Imports */
@import url(http://fonts.googleapis.com/css?family=IM+Fell+English:400,400italic);
@import url(http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica:400,400italic);
/**/
*{ box-sizing:border-box; font-family: 'IM Fell English', serif!important;
}
html,body{ background-color:#000;
}
#head{ height:192px; text-align:center; color:#87468B;
}
.header{ display:inline-block; position:relative; height:128px; font-size:2em; font-weight:bold; padding:4px; margin-top:16px; z-index:0; text-shadow:1px 1px 2px #000;
}
.header:after{ position:absolute; content:""; display:block; width:200px; height:48px; border:1px solid #599532; background-color:#1E4B00; box-shadow:0px 0px 0px 1px #000 inset; border-bottom:0px; top:-2px; left:20px; z-index:-2; border-radius:48px;
}
.header:before{ position:absolute; content:""; display:block; width:250px; height:64px; border:1px solid #599532; background-color:#1E4B00; box-shadow:0px 1px 0px 1px #1E4B00 inset,0px 0px 0px 1px #000 inset; border-top:0px; top:36px; left:-4px; z-index:-1; border-radius:48px;
}
.headerchild{ font-size:0.5em;
}
.headerfoot{ font-size:1.5em; font-style:italic;
}
.nav{ height:48px;
}
.nav ul{ display:block;
}
.nav ul li{ display:inline-block;
}
.nav ul li a{ display:block; text-decoration:none; color:#fff; padding:12px; border:1px solid #805515; background-color:#553300; box-shadow:0px 0px 0px 1px #000 inset;
}
#body{ /* Blizzard Browns/Golds: Light #805515, Dark #553300 */ min-height:768px; text-align:center; /* border:1px solid #805515; background-color:#553300; box-shadow:0px 0px 0px 1px #000 inset;*/ color:#ddd;
}
#body div .platform{ margin-top:0px;
}
#body div:first-child .platform{ margin-top:8px;
}
.platform{ display:inline-block; border:1px solid #599532; background-color:#1E4B00; box-shadow:0px 0px 0px 1px #000 inset; width:256px; min-height:256px; margin:8px; margin-left:0px; border-radius:4px; padding:8px; color:#ddd; text-align:left; vertical-align:top;
}
.platform:first-letter, .platform>p:first-of-type:first-letter{ font-size:1.5em; background-color:#87468B; padding:4px 8px; margin:2px; border-radius:2px; float:left; vertical-align:top;
}
.platform:first-line, .platform>p:first-of-type:first-line{ padding:0px 8px; margin:2px; line-height:24px; vertical-align:top;
}
.platform:first-child{ margin:8px;
}
.platform>img{ display:block; /*temporary box size for testing*/ width:192px; height:192px; margin:8px auto; border:1px solid #805515; background-color:#553300; box-shadow:0px 0px 0px 1px #000 inset; border-radius:2px;
}
#foot{ height:128px; text-align:center; color:#87468B;
}
.footer{ height:96px; line-height:96px;
}
.footer ul{
}
.footer ul li{ display:inline-block;
}
.footer ul li a{ padding: 4px; cursor:pointer; text-decoration:underline;
}
.copyright{ height:32px; line-height:32px;
}
Warcraft Page Mockup - Script Codes
Warcraft Page Mockup - Script Codes
Home Page Home
Developer Event Horizon
Username Event_Horizon
Uploaded July 30, 2022
Rating 3
Size 4,080 Kb
Views 42,504
Do you need developer help for Warcraft Page Mockup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Event Horizon (Event_Horizon) Script Codes
Name
Liquid Loader
Window Designing
List Sections
KSP altimeter
Content Panels
Music Player
Simple Drag and Drop
CSS Only Dropdown
Timeline
Very Animated Loading Bar
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!