Heart Shaped Games Redesign

Developer
Charlie Volpe
Size
3,767 Kb
Views
18,216
  1. Heart Shaped Games Redesign Previews
  2. Heart Shaped Games Redesign HTML Codes
  3. Heart Shaped Games Redesign CSS Codes

How do I make an heart shaped games redesign?

I love Heart Shaped Games' work and thought I would try to a redesign of their site that is responsive.. What is a heart shaped games redesign? How do you make a heart shaped games redesign? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Heart Shaped Games Redesign Previews
IQ Test

Heart Shaped Games Redesign - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heart Shaped Games Redesign</title> <meta name='viewport' content='width=device-width'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header clearfix"> <a href="#"><div class="site-title">Heart Shaped Games</div></a> <div class="site-menu"> <div class="menu-item selected">Home</div> <a href="#"><div class="menu-item">Games</div></a> <a href="#"><div class="menu-item">Community</div></a> <a href="#"><div class="menu-item">Press</div></a> <a href="#"><div class="menu-item">Jobs</div></a> <a href="#"><div class="menu-item">About</div></a> <a href="#"><div class="menu-item">Contact</div></a> </div> <div class="menu-icon"></div>
</div>
<div class="content"> <div class="banner clearfix"> <div class="banner-img"></div> <div class="banner-text"> <div class="right-tri"></div> <h2>Hero Generations Kickstarter Campaign</h2> <p>Heart Shaped Games has a Kickstarter campaign going on right now for Hero Generations!</p> <p>Back their project and find out more about the stretch goals by going to the Kickstarter page.</p> <a href="https://www.kickstarter.com/projects/786551472/hero-generations/" target="_blank">Find out more on Kickstarter &#8674;</a> </div> </div> <div class="welcome"> <p>Heart Shaped Games is a design-centric independent game studio focused on building meaningful and memorable games. Founded by former Microsoft Xbox LIVE Arcade Producer and Designer Scott Brodie, we strives to invent new games that players love.<br><br> Our games include the strategy CCG Highgrounds and the IndieCade Finalist Hero Generations!</p> </div> <div class="game hero-gen clearfix"> <div class="game-img"></div> <div class="game-text"> <h2>Hero Generations</h2> <p>A unique turn-based strategy/rogue-like hybrid about life, legacy, and love.</p> <a href="http://www.herogenerations.com/" target="_blank">Find out more &#8674;</a> </div> </div> <div class="game high clearfix"> <div class="game-img"></div> <div class="game-text"> <h2>Highgrounds</h2> <p>An original online strategy/CCG with over 200 collectible characters. Build a deck and battle your friends online. Available now on the web and coming soon to PC, Mac, and Mobile platforms.</p> <a href="http://www.highgroundsgame.com/" target="_blank">Find out more &#8674;</a> </div> </div> <div class="social clearfix"> <a href="https://www.facebook.com/pages/Heart-Shaped-Games/128036410585358"><div id="fb">Facebook</div></a> <a href="https://twitter.com/brodiegames"><div id="tw">Twitter</div></a> <a href="http://blog.brodiegames.com/feeds/posts/default?alt=rss"><div id="rss" class="last">RSS Feed</div></a> </div> <div class="design"><span>Design by Charlie Volpe.</span><span>Check out my: <a href="http://charlievolpe.com">Website</a> &amp; <a href="https://codepen.io/charlie-volpe">CodePen</a></span></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Heart Shaped Games Redesign - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
* { box-sizing: border-box;
}
body{ background: #e7ecec; color: #e7ecec; font-size: 18px; font-family: 'Lato', sans-serif;
}
a { color: #f1736a; text-decoration: none; font-size: 1.2em;
}
a:hover,
a:focus{ color: #e7ecec; border-bottom: .1em solid #f1736a;
}
.header { background: #373737; color: #f1736a; width: 100%; height: 5em; line-height: 5em;
}
.header a{ font-size: 1em;
}
.site-title { float: left; margin: 0 2em; padding: 0 .5em; height: 5em; line-height: 5em;
}
.site-menu { float: right; padding: 0 2em;
}
.menu-item { float: left; padding: 0 .5em; height: 5em; line-height: 5em;
}
.site-title:hover,
.menu-item:hover { border-bottom: .2em solid #f1736a; cursor: pointer; color: #e7ecec;
}
.menu-item.selected,
.menu-item.selected:hover { border-bottom: .2em solid #f1736a; background: #474747; cursor: default; color: #777777; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.menu-icon { display: none; background: url('https://goo.gl/RjyFhG'); background-position:-32px 0; float: right; width: 32px; height: 32px; margin: 1em; position: relative; cursor: pointer;
}
.menu-icon:hover { background-position: 0 0;
}
.banner,
.game{ width: 95%; margin: 1.5em auto; background: #373737;
}
.banner-img,
.game-img{ float: left; width: 60%; height: 0; padding-top: 45%; background: url('https://goo.gl/QFW56c'); background-size: cover;
}
.banner-img { border-right: .5em solid #f1736a;
}
.hero-gen .game-img{ background: url('https://goo.gl/yybhD3'); background-size: cover; width: 50%; padding-top: 28%;
}
.high .game-img { background: url('https://goo.gl/od9oZG'); background-size: cover; width: 50%; padding-top: 28%;
}
.banner-text{ position: relative; float: left; padding: 2em 3em; width: 40%;
}
.game-text { position: relative; float: left; padding: .75em 3em; border-top: .5em solid #f1736a; width: 50%;
}
.right-tri { position: absolute; top: 3.5em; left: 0; width: 0; height: 0; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1.5em solid #f1736a;
}
.welcome{ width: 95%; margin: 0 auto; padding: 0 1em; font-size: 1.25em; color: #373737; text-align: center;
}
.content { max-width: 1200px; margin: 0 auto;
}
.social { width: 95%; margin: 0 auto; padding-bottom: 1.5em;
}
.social a { color: #e7ecec;
}
.social div { float: left; padding: 1em; margin-right: 2%; width: 32%; text-align: center;
}
.social .last { margin-right: 0;
}
#fb { background: #3d61b2;
}
#fb:hover{ background: #213575;
}
#tw { background: #44c0e2;
}
#tw:hover { background: #2e91b2;
}
#rss { background: #f67920;
}
#rss:hover{ background: #c55217;
}
.design { width: 95%; margin: 0 auto; color: #373737; text-align: center; padding-bottom: 1.5em;
}
.design span { display: inline-block; padding-right: .5em;
}
.design a:hover { color: #373737;
}
.site-menu.mini-menu { display: none;
}
@media screen and (max-width: 78em) { body { font-size: 16px; }
}
@media screen and (max-width: 56em) { /*tablet*/ body { font-size: 13px; }
}
@media screen and (max-width: 48em) { /*phone*/ .site-menu { display: none; } .menu-icon { display: inline; } .mini-menu .menu-item { width: 100%; background: #373737; } .mini-menu .menu-item.selected { background: #474747; } .banner-img{ width: 100%; padding-top: 75%; border-right: none; border-bottom: .5em solid #f1736a; } .banner-text{ width: 100%; } .right-tri { border: none; } .high .game-img, .hero-gen .game-img{ width: 100%; padding-top: 56%; } .game-text{ width: 100%; padding-bottom: 3em; }
}
@media screen and (max-width: 34em) { .social div { width: 100%; clear: both; margin-bottom: .5em; }
}
Heart Shaped Games Redesign - Script Codes
Heart Shaped Games Redesign - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 3,767 Kb
Views 18,216
Do you need developer help for Heart Shaped Games Redesign?

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!

Charlie Volpe (charlie-volpe) Script Codes
Name
List Maker
NES Contoller
Block Puzzle Game
IPhone 5 CSS Template
Bouncing Ball
Draggable Finder Window Visualization
Galaxy S3 CSS Template
IPad CSS Template
Full Site Redesign
Animated Menu Circles
Create amazing love letters 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!