logo

Game Landing Page

A landing page for a mobile game made using the Bootstrap library.

Role: Programmer

Tools/Libraries: Bootstrap

Language: HTML5/CSS3


Live Site

index.html

<html lang="en-US"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <title>Game Landing Page</title> </head> <body> <div class="container-fluid"> <nav class="row head"> <div class="col-sm-10"><img src="lp-imgs/lp-logo.svg" class="img-responsive img logo"></div> <div class="col-sm-2"><a target="_blank" href="http://wwww.youtube.com/"><img class="img-responsive img social" src="lp-imgs/youtube.png"></a> <a target="_blank" href="https://www.twitter.com/"><img src="lp-imgs/twitter.png" class="img-responsive img social"></a></div> </nav> <div class="content-container"> <div class="row gamelogosec"> <img class="img-responsive gamelogo" style="display:block; margin:auto;" src="lp-imgs/gamelogo.png"> </div> <div class="row videosec"> <div class="col-md-6"> <span style="padding:10px; margin: 0 auto; display:block;"><center><img class="img-responsive img" src="lp-imgs/icon-sm.png" height=20% width=20%></span> <h2 style="color:white;"><b>A New Twist on Match Three</b></h2> <p style="color:white;"> If you are a fan of match three and RPG games, you have come to the right place! Enjoy this new twist on the genre as you send forth barrages of sword and magic attacks onto oncoming monsters. While you play this engaging but relaxing game you will experience multiple levels to explore, and try to beat your friends highscores to get the maximum amount of tokens. Use your tokens to buy even better equipment to make even further discoveries on dungeon levels and push for new horizons!</p></center> <center><button class="btn-info" style="margin:5px 5px 5px 5px;"><h4><b>Learn More <span class="glyphicon glyphicon-search"></span></b></h4></button></center> </div> <div class="col-med-8 video"> <img class="img-responsive" style="margin: 0 auto; display:block; max-height:30%; max-width:30%; padding:10% 10% 10% 10%; background-color:#f3f3f3; cursor: pointer;" src="lp-imgs/playbutton.svg"></div> </div> <div class="row screenshots"> <div class="col-sm-3"></div> <div class="col-sm-2"><a target="_blank" href="lp-imgs/screenshot1.jpg"><img class="img-responsive img screenshot" src="lp-imgs/screenshot1.jpg" width=50% height=65%></a></div> <div class="col-sm-2"><a target="_blank" href="lp-imgs/screenshot2.jpg"><img class="img-responsive img screenshot" src="lp-imgs/screenshot2.jpg" width=50% height=65%></a></div> <div class="col-sm-2"><a target="_blank" href="lp-imgs/screenshot3.jpg"><img class="img-responsive img screenshot" src="lp-imgs/screenshot3.jpg" width=50% height=65%></a></div> <div class="col-sm-1"></div> <div class="col-sm-3"></div> </div> <div class="row features" style="color:white;"> <div class="col-sm-3"></div> <div class="col-sm-3"><h3><span class="glyphicon glyphicon-plus" style="color:#01FFA2;"></span> <b>Exciting Challenges</b></h3> <h3><span class="glyphicon glyphicon-plus" style="color:#01FFA2;"></span> <b>Many Levels</b></h3> </div> <div class="col-sm-3"> <h3><span class="glyphicon glyphicon-plus" style="color:#01FFA2;"></span> <b>Match 3 & RPG</b></h3> <h3><span class="glyphicon glyphicon-plus" style="color:#01FFA2;"></span> <b>Easy to pick up</b></h3> </div> <div class="col-sm-2"></div> </div> <div class="row avaliable"> <div class="col-sm-4"></div> <div class="col-sm-2"> <img src="lp-imgs/android.png" class="img-responsive img distro" width=25%; height=25%;> </div> <div class="col-sm-2"> <img src="lp-imgs/apple.png" class="img-responsive img distro" width=25%; height=25%;> </div> <div class="col-sm-4"></div> </div> <div class="row emailsignup"> <div class="col-sm-1"></div> <div class="col-sm-10"><span style="float:left; padding: 10px 0px 5px 0px;"><h4 style="color:white;"><b>Sign Up For Email Updates</b></h4></span> <span style="float:right;"><label><input type="text" name="email" placeholder="Email Address"></label> <button class="btn-success" style="margin: 5px 5px 5px 5px"><h4><b>Subscribe Now <span class="glyphicon glyphicon-send"></span></b></h4></button></span></div> </div> </div> <footer> <div class="row foot"> <div class="col-sm-4"></div> <div class="col-sm-4"><p style="color:white; padding-top: 10px; text-align: center;"><b>©2020 All rights reserved.</b></p></div> <div class="col-sm-4"></div> </div> </footer> </div> </body> </html>

style.css

p { font-family: sans-serif; font-size: 85%; } h3 { font-family: sans-serif; font-size: 110%; } h4 { font-family: sans-serif; font-size: 125%; } .head { background-color: #3E8899; } .gamelogosec { background-image: url("lp-imgs/gaming-pattern.png"); background-repeat: repeat; } .videosec { background-color:#FF4740; } .video { background-color:#FF4740; } .screenshots { background-image: url("lp-imgs/gaming-pattern.png"); background-repeat: repeat; } .features { background-color:#00A6CC; } .avaliable { background-color:white; } .emailsignup { background-color:#FF4740; } .foot { background-color:#3E8899; height:60px; } .line { width:100%; height:2px; background:grey; } .img:hover { opacity: 0.6; } nav { height: 60px; } .content-container { box-sizing: border-box; } .logo { padding:0px 5px 5px 5px; width: 125px; float: left; margin: auto; } .social { width: 50px; padding: 5px 5px 5px 5px; float: right; margin: auto; margin-top: 5px; margin-right: 5px; } .gamelogo { max-height: 200px; margin: 0 auto; display:block; padding:5px 20px 5px 20px; } .screenshot { margin: 0 auto; display:block; padding: 5px 0px 5px 0px; } .distro { min-width:150px; padding:5px 5px 5px 5px; margin: auto; cursor: pointer; }