Hey all,
Wanted to share the project that i'm currently working on. To start it off, i would like to clarify that i am not great at coding and this project was a way to teach me html, css and potentially javascript in the future, i only started coding for the first time 4 days ago since the posting of this thread. So that being said this project is definitely nothing special but some people may like it and I would like feedback on the code and what I could improve. Although most people might think they don't care about helping me learn html, css and javascript I will be looking at getting better and releasing some other good projects to the community as i get better over time.
The idea of the project as stated was to learn web developing, so i thought the best thing to do was to copy or replicate an already made webpage and so i went straight to habbo's webpage. First thing was to learn basics of html, i used a third party learning tool to get the basics as well as just going along with coding the "replica habbo homepage". Justifiably the first things i coded are probably quite horrendous which as i went along i could see and fixed a few things after but its still not 100%.
Html was quite easy to learn and get the hang off considering its just implementing the content of the page like headers, paragraph, images and links etc. the next thing to do was turn the black and white mess into a colourful webpage thats candy to the eye. So the css learning began and i will admit i struggled with css at first, understanding the small things like what element you need to style. As time went on i started getting used to how css works and it soon became easier. Still not a professional at these languages but i can say that i can start to work off my own head to implement content onto a page now without needing third party tools and guides.
If you read through all that, i appreciate the time and now i would like to share some screenshots of some of the pages. This project is nowhere near complete and still needs a lot of fixing but im happy to take suggestions for improvements and for anyone that is really interested in having a download of what i have done right now you can private message me but i dont feel like it should be released in its current state. The purpose of this thread is to get some exposure and some tips.
This is my first thread post on here and sorry if there is a better way of sharing images and code but hopefully this will do for now. I hope some people like my work. As stated this wasnt ripped from the site and i coded it from scratch with what i thought would work best.
Thanks for reading,
Fozzey
Wanted to share the project that i'm currently working on. To start it off, i would like to clarify that i am not great at coding and this project was a way to teach me html, css and potentially javascript in the future, i only started coding for the first time 4 days ago since the posting of this thread. So that being said this project is definitely nothing special but some people may like it and I would like feedback on the code and what I could improve. Although most people might think they don't care about helping me learn html, css and javascript I will be looking at getting better and releasing some other good projects to the community as i get better over time.
The idea of the project as stated was to learn web developing, so i thought the best thing to do was to copy or replicate an already made webpage and so i went straight to habbo's webpage. First thing was to learn basics of html, i used a third party learning tool to get the basics as well as just going along with coding the "replica habbo homepage". Justifiably the first things i coded are probably quite horrendous which as i went along i could see and fixed a few things after but its still not 100%.
Html was quite easy to learn and get the hang off considering its just implementing the content of the page like headers, paragraph, images and links etc. the next thing to do was turn the black and white mess into a colourful webpage thats candy to the eye. So the css learning began and i will admit i struggled with css at first, understanding the small things like what element you need to style. As time went on i started getting used to how css works and it soon became easier. Still not a professional at these languages but i can say that i can start to work off my own head to implement content onto a page now without needing third party tools and guides.
If you read through all that, i appreciate the time and now i would like to share some screenshots of some of the pages. This project is nowhere near complete and still needs a lot of fixing but im happy to take suggestions for improvements and for anyone that is really interested in having a download of what i have done right now you can private message me but i dont feel like it should be released in its current state. The purpose of this thread is to get some exposure and some tips.
Code:
<!DOCTYPE html><html><head> <title>Habbo - Virtual World, Avatar Chat, and Pixel Art - Habbo</title> <link class="favicon" rel="icon" href="http://forum.ragezone.com/images/favicon.08c747be.ico"> <link rel="stylesheet" type="text/css" href="style/main.css"> <base href="https://localhost/"></head><body> <header> <div class="sticky-header-container"> <div class="header-content"> <form> <div class="input-email-container"> <input class="input-email" type="email" name="email" placeholder="Email"> </div> <div class="input-password-container"> <input class="input-password" type="password" name="password" placeholder="Password"> <small class="forgotten-password-container"> <a class="forgotten-password-link" href="">I've forgotten my password</a> </small> </div> <div class="input-button-container"> <input class="input-button" type="button" name="login" value="Let's Go!"> </div> </form> <div class="facebook-container"> <div> <a class="facebook-image" href=""></a> </div> <p class="facebook-message">Login with Facebook so you can play with your friends.</p> <a class="facebook-link" href="">More ways to login</a> </div> </div> </div> <div class="header-content"> <div class="background-header-image-container"> <img src="http://forum.ragezone.com/images/hotel.ba57eb56.png"> </div> <div class="register-container"> <h2 class="register-message">Make friends & chat with<br> millions in a virtual world</h2> <a class="register-button" href="registration.htm">Join for free!</a> </div> </div> <div class="habbo-logo-container"> <a class="habbo-logo" href="home.htm"></a> </div> </header> <nav> <div class="nav-container"> <ul class="nav-list"> <div class="icon-link-container-home"><li class="icon home"><a class="home-link" href="home.htm"><div class="home-text">Home</div></a></li></div> <div class="icon-link-container-community"><li class="icon community"><a class="community-link" href="community.htm"><div class="community-text">Community</div></a></li></div> <div class="icon-link-container-shop"><li class="icon shop"><a class="shop-link" href=""><div class="shop-text">Shop</div></a></li></div> <div class="icon-link-container-playinghabbo"><li class="icon playinghabbo"><a class="playinghabbo-link" href="what-is-habbo.htm"><div class="playinghabbo-text">Playing Habbo</div></a></li></div> </ul> </div> </nav> <main class="main-background-wrapper"> <section> <h1 class="news-header">Latest News</h1> <div class="news1-container"> <img class="news1-image" src="http://forum.ragezone.com/images/promos/lpromo_suncity19_gen.png"></img> <div class="news1"> <h1 class="news1-header">Enter the sunlight city</h1><h4 class="news1-date-type"><div class="news1-date"><i>Aug 1, 2019</i></div> | Campaigns & Activities</h4><p class="news1-paragraph">Read this article to get more information on what's happening this month!</p> </div> </div> <div class="safetytips-container"> <h1 class="safety-h1">Safety Tips</h1> <p>Protect yourself with awareness! Learn how to stay safe on the internet.</p> </div> <div class="parentguide-container"> <h1 class="parent-h1">Parent's Guide</h1> <p>Curious about the effective tools that ensure our users can have fun in a safe environment? See our Parents' Guide on the Customer Support & Helpdesk pages.</p> </div> <div class="secondary-news-container"> <div class="news2-container"> <img class="news2-image" src="http://forum.ragezone.com/images/promos/lpromo_gen_amb_1_thumb.png"> <div class="news2-text-container"> <h2 class="news2-header">News Header 2</h2><h4 class="news2-date-type"><div class="news1-date"><i>mmm dd, yyyy</i></div> | category type</h4><p class="news2-paragraph">News paragraph message</p> </div> </div> <div class="news3-container"> <img class="news3-image" src="http://forum.ragezone.com/images/promos/lpromo_independenceday_thumb.png"> <div class="news3-text-container"> <h2 class="news3-header">News Header 3</h2><h4 class="news3-date-type"><div class="news1-date"><i>mmm dd, yyyy</i></div> | category type</h4><p class="news3-paragraph">News paragraph message</p> </div> </div> <div class="news4-container"> <img class="news4-image" src="http://forum.ragezone.com/images/promos/lpromo_PAris_thumb.png"> <div class="news4-text-container"> <h2 class="news4-header">News Header 4</h2><h4 class="news4-date-type"><div class="news1-date"><i>mmm dd, yyyy</i></div> | category type</h4><p class="news4-paragraph">News paragraph message</p> </div> </div> <div class="news5-container"> <img class="news5-image" src="http://forum.ragezone.com/images/promos/lpromo_hobbot_thumb.png"> <div class="news5-text-container"> <h2 class="news5-header">News Header 5</h2><h4 class="news5-date-type"><div class="news1-date"><i>mmm dd, yyyy</i></div> | category type</h4><p class="news5-paragraph">News paragraph message</p> </div> </div> <div class="news6-container"> <img class="news6-image" src="http://forum.ragezone.com/images/promos/lpromo_suncity19_gen_thumb.png"> <div class="news6-text-container"> <h2 class="news6-header">News Header 6</h2><h4 class="news6-date-type"><div class="news1-date"><i>mmm dd, yyyy</i></div> | category type</h4><p class="news6-paragraph">News paragraph message</p> </div> </div> <div class="news7-container"> <img class="news7-image" src="http://forum.ragezone.com/images/promos/lpromo_gifted_thumb.png"> <div class="news7-text-container"> <h2 class="news7-header">News Header 7</h2><h4 class="news7-date-type"><div class="news1-date"><i>mmm dd, yyyy</i></div> | category type</h4><p class="news7-paragraph">News paragraph message</p> </div> </div> <h2>More News</h2> </div> </section> </main> <footer> <div class="footer-wrap"> <div class="footer-container"> <div class="followhabbo-container"> <h4 class="followhabbo">Follow Habbo</h4> <div class="facebook-link-icon-container"> <a class="facebook-link-icon" href="https://www.facebook.com"></a> </div> <div class="twitter-link-icon-container"> <a class="twitter-link-icon" href="https://www.twitter.com"></a> </div> <div class="youtube-link-icon-container"> <a class="youtube-link-icon" href="https://www.youtube.com"></a> </div> <div class="instagram-link-icon-container"> <a class="instagram-link-icon" href="https://instagram.com"></a> </div> <div class="other-link-icon-container"> <a class="other-link-icon" href=""></a> </div> </div> <div class="footer-helpful-copyright-container"> <div class="helpful-links"> <p><a class="footer-link" href="">Customer Support & Helpdesk</a> / <a class="footer-link" href="">Safety</a> / <a class="footer-link" href="">For Parents</a> / <a class="footer-link" href="">Terms of Service & Privacy Policy</a> / <a class="footer-link" href="">helpdesk@gmail.com</a></p> </div> <div class="copyright-message"> <p>© 2004-2019 Sulake Oy. HABBO is a registered trademark of Sulake Oy in the European Union, the USA, Japan, the People's Republic of China and various other jurisdictions. All rights reserved.</p> </div> <div class="sulakeicon-container"> <a class="sulake-icon" href=""></a> </div> </div> </div> </div> </footer></body></html>
Code:
/* Body Style*/body{ background-color: rgb(0,101,153); position: absolute; margin: 0px; overflow-x: hidden; top: 8px; bottom: 0px; width: 100%;}h1, h2, h3, h4, h5, h6{ color: #fff; font-family: Ubuntu Condensed,Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; font-weight: 400; margin: .6em 0; line-height: 1.2;}main{ color: #7ecaee; font-family: sans-serif;}section{ max-width: 1200px; margin: auto;}a{ text-decoration: none; color: #fff;}footer{ background-color: rgb(0,23,38); display: block;}/* Sticky Header Style*/.sticky-header-container{ position: sticky; background-color: rgba(0,0,0,0.5); padding: 35px; padding-bottom: 39px; margin: -8px; color: #7ecaee;}/* Login Form Style*/.header-content{ width: 700px; margin: auto; max-width: 800px;}.input-email-container{ display: inline-block; margin-right: 35px; margin-left: -154px; margin-top: -16px;}.input-password-container{ display: inline-block; margin-right: 35px; margin-top: -16px;}.input-button-container{ display: inline-block; margin-right: 35px; margin-top: -17px; padding-top: 10px; position: absolute;}.input-email,.input-password,.input-confirm{ border-style: solid; border-width: 3px; border-radius: 5px; border-color: #275d8e; background-color: #ccd8df; padding: 5.5px; text-indent: 8px; font-size: 15px; width: 210px; text-anchor: bottom;}.input-email:focus, .input-password:focus,.input-confirm:focus{ background-color: #fff; border-color: rgb(0,120,181); border-radius: 5px; outline-width: 0px;}.input-button{ margin-left: -15px; border-style: solid; border-radius: 5px; border-width: 2px; border-color: #2a9cde; padding: 12px 24px; background-color: #0f7dbc; font-size: 16px; color: #fff; text-align: center; text-transform: uppercase; box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}.input-button:hover{ background-color: #2a9cde; border-color: #53bdf9;}.forgotten-password-container{ position: absolute; margin: 5px; font-size: smaller; margin-top: 10px;}.forgotten-password-link{ text-decoration: none; color: #fff; font-size: 14px; font-family: sans-serif; margin-left: 50px;}.forgotten-password-link:hover{ text-decoration: underline;}.login-button-container{ float: right; margin-right: 700px; margin-top: -55px;}.login-button{ background: #02353c; box-shadow: 0 1px 0 2px rgba(0,0,0,.3); border: 2px solid #267b91; border-radius: 3px; padding: 5px 12px; text-decoration: none; color: #fff; font-size: 14px; font-family: sans-serif; padding-left: 30px; padding-top: 8px; padding-bottom: 6px; text-transform: uppercase}.key-icon{ width: 17px; height: 17px; background: url(https://localhost/images/sprite.56f427a4.png) -511px -356px no-repeat; position: absolute; margin-left: 10px;}/* Facebook Alternate Login Style*/.facebook-image{ width: 36px; height: 36px; background: url(https://localhost/images/sprite.56f427a4.png) -255px -100px; float: left; margin-right: 20px; margin-top: 28px; margin-left: 7px;}.facebook-message{ margin-top: 20px; margin-bottom: 2px;}.facebook-container{ width: 600px; position: relative; float: right; margin-top: -55px; margin-right: -410px; align-items: center; font-family: sans-serif; font-size: 14px;}.facebook-link{ text-decoration: none; color: #fff; padding: 0px;}.facebook-link:hover{ text-decoration: underline;}/* Background Image Style*/.background-header-image-container{ width: 780px; margin: auto; margin-left: -358px; margin-top: -200px;}/* Home Page Register Style*/.register-container{ float: right; margin-right: -157px; margin-top: -255px; text-transform: uppercase;}.register-message{ margin-left: 15px; font-size: 28px;}.register-button{ height: 50px; width: 384px; display: inline-block; margin-left: 10px; padding-top: 15px; border-style: solid; border-radius: 5px; border-width: 2px; border-color: #8eda55; background-color: #00813e; font-family: Ubuntu Condensed,Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; font-size: 32px; color: #fff; text-align: center; text-decoration: none; box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}.register-button:hover{ background-color: #00ab54; border-color: #b9f373;}/* Habbo Logo Style*/.habbo-logo-container{ width: 1192px; margin:auto;}.habbo-logo{ background: url(https://localhost/images/sprite.56f427a4.png) 0px 0px; width: 197px; height: 73px; display: block; margin-top: -69px; position: relative;}.habbo-logo2-container{ width: 1192px; margin:auto;}.habbo-logo2{ background: url(https://localhost/images/sprite.56f427a4.png) 0px 0px; width: 197px; height: 73px; display: block; position: relative;}.habbo-logo3-container{ width: 1192px; margin:auto; margin-top: 120px;}.habbo-logo3{ background: url(https://localhost/images/sprite.56f427a4.png) 0px 0px; width: 197px; height: 73px; display: block; position: relative;}/* Navigation Bar Style*/.nav-container{ background-color: rgb(232,239,247); margin-left: -8px; margin-right: -8px; margin-top: -8px;}.nav-list{ display: flex; list-style-type: none; margin: auto; font-size: 20px; font-family: sans-serif; width: 1220px; padding-bottom: 19px;}.icon-link-container-home{ width: 139px; margin-top: 23px;}.icon-link-container-community{ width: 197px; margin-top: 23px;}.icon-link-container-shop{ width: 130px; margin-top: 23px;}.icon-link-container-playinghabbo{ margin-top: 23px;}.icon-link-container:link.icon-link-cotnainer:visited{ width: 100px;}.home-text{ padding-left: 30px; text-transform: uppercase;}.home-text:hover{ color: rgb(170,170,170);}.home-text:active{ color: rgb(86,180,232);}.community-text{ padding-left: 30px; text-transform: uppercase;}.community-text:hover{ color: rgb(170,170,170);}.community-text:active{ color: rgb(86,180,232);}.shop-text{ padding-left: 30px; text-transform: uppercase;}.shop-text:hover{ color: rgb(170,170,170);}.shop-text:active{ color: rgb(86,180,232);}.playinghabbo-text{ padding-left: 30px; text-transform: uppercase; width: max-content;}.playinghabbo-text:hover{ color: rgb(170,170,170);}.playinghabbo-text:active{ color: rgb(86,180,232);}li.icon{ display: inline-block; width: 20px; height: 20px;}a.home-link:link,a.home-link:visited,a.community-link:link,a.community-link:visited,a.shop-link:link,a.shop-link:visited,a.playinghabbo-link:link,a.playinghabbo-link:visited{ display: inline-block; text-decoration: none; color: #0c3a65;}li.home a:link,li.home a:visited{ width: 20px; height: 20px; background: url(https://localhost/images/sprite.56f427a4.png) -314px -436px no-repeat; margin-right: 100px;}li.home a:hover{ background-position: -338px -436px; color: rgb(170,170,170);}li.home a:active{ background-position: -434px -436px; color: rgb(86,180,232);}li.community a:link,li.community a:visited{ width: 20px; height: 20px; background: url(https://localhost/images/sprite.56f427a4.png) -200px -164px no-repeat; margin-right: 140px;}li.community a:hover{ background-position: -224px -164px; color: rgb(170,170,170);}li.community a:active{ background-position: -248px -164px; color: rgb(86,180,232);}li.shop a:link,li.shop a:visited{ width: 20px; height: 20px; background: url(https://localhost/images/sprite.56f427a4.png) -362px -435px no-repeat; margin-right: 100px;}li.shop a:hover{ background-position: -386px -435px; color: rgb(170,170,170);}li.shop a:active{ background-position: -410px -435px; color: rgb(86,180,232);}li.playinghabbo a:link,li.playinghabbo a:visited{ width: 20px; height: 20px; background: url(https://localhost/images/sprite.56f427a4.png) -273px -164px no-repeat;}li.playinghabbo a:hover{ background-position: -468px -388px; color: rgb(170,170,170);}li.playinghabbo a:active{ background-position: -267px -435px; color: rgb(86,180,232);}.subnav-container{ background-color: rgb(0,23,38); margin-left: -8px; margin-right: -8px; margin-top: 0px;}.subnav-list{ display: flex; list-style-type: none; margin: auto; font-size: 18px; font-family: sans-serif; width: 1220px; padding-bottom: 19px;}.subnav-news{ margin-top: 15px; margin-right: 25px; border-style: solid; border-right-width: 2px; border-left-width: 0px; border-top-width: 0px; border-bottom-width: 0px; padding-right: 25px; border-color: #406180;}.subnav-staff{ margin-top: 15px; margin-right: 25px; border-style: solid; border-right-width: 2px; border-left-width: 0px; border-top-width: 0px; border-bottom-width: 0px; padding-right: 25px; border-color: #406180;}.subnav-events{ margin-top: 15px; margin-right: 25px; border-style: solid; border-right-width: 2px; border-left-width: 0px; border-top-width: 0px; border-bottom-width: 0px; padding-right: 25px; border-color: #406180;}.subnav-photos{ margin-top: 15px; margin-right: 25px; padding-right: 25px;}.news,.staff,.events,.photos{ color: #fff; font-family: sans-serif;}.news:hover,.staff:hover,.events:hover,.photos:hover{ color: #406180;}.news:active,.staff:active,.events:active,.photos:active{ color: #6796b1;}/* Main Page Content*/.main-background-wrapper{ background-color: rgb(18,74,117); padding-top: 5px; margin-bottom: -15px; height: auto;}.news-header{ font-size: 36px; text-transform: uppercase;}.news1-container{}.news1-image{ position: absolute; box-shadow: 3px 3px 3px rgba(0,0,0,0.5);}.news1{ padding-top: 5px; padding-left: 20px; font-family: sans-serif; width: 360px; position: relative;}.news1-header{ margin-top: 4px; font-size: 32px; text-transform: uppercase;}.news1-date-type{ margin-top: -10px; margin-bottom: 20px; display: flex;}.news1-date{ color: rgb(170,170,170);}.news1-paragraph{ color: #fff; width: 300px; font-size: 13px;}.safetytips-container{ background-color: rgb(0,101,153); color: #7ecaee; margin-top: 125px; float: right; width: 292px; height: 100px; padding: 20px; border-radius: 5px; box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}.safety-h1{ background-color: #0e3955; padding-top: 7px; padding-left: 25px; padding-bottom: 7px; padding-right: 25px; margin-top: -20px; margin-left: -20px; margin-right: -20px; border-radius: 5px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; text-transform: uppercase;}.parentguide-container{ margin-right: -332px; background-color: rgb(0,101,153); color: #7ecaee; margin-top: 300px; float: right; width: 292px; height: 125px; padding: 20px; border-radius: 5px; box-shadow: 5px 5px 2px rgba(0,0,0,0.5);}.parent-h1{ background-color: #0e3955; padding-top: 7px; padding-left: 25px; padding-bottom: 7px; padding-right: 25px; margin-top: -20px; margin-left: -20px; margin-right: -20px; border-radius: 5px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; text-transform: uppercase;}.secondary-news-container{ width: 868px;}.news2-container{ width: 434px; position: absolute;}.news2-image{ box-shadow: 3px 3px 3px rgba(0,0,0,0.5);}.news2-text-container{ float: right; margin-top: -15px; width: 305px;}.news2-paragraph{ width: 290px; height: 90px; color: ;}.news3-container{ margin-top: 165px; margin-left: 434px; width: 434px; position: relative;}.news3-image{ box-shadow: 3px 3px 3px rgba(0,0,0,0.5);}.news3-text-container{ float: right; width: 305px; margin-top: -15px;}.news4-container{ margin-top: 80px;}.news4-image{ box-shadow: 3px 3px 3px rgba(0,0,0,0.5);}.news4-text-container{ float: right; margin-top: -15px; width: 738px;}.news5-container{ margin-top: -125px; margin-left: 434px; position: absolute;}.news5-image{ box-shadow: 3px 3px 3px rgba(0,0,0,0.5);}.news5-text-container{ float: right; width: 305px; margin-top: -15px; margin-left: 10px;}.news6-container{ margin-top: 80px;}.news6-image{ box-shadow: 3px 3px 3px rgba(0,0,0,0.5);}.news6-text-container{ float: right; width: 736px; margin-top: -15px;}.news7-container{ margin-top: -125px; position: absolute; margin-left: 435px;}.news7-image{ box-shadow: 3px 3px 3px rgba(0,0,0,0.5);}.news7-text-container{ float: right; margin-top: -15px; margin-left: 10px;}/* Footer Style*/.footer-wrap{ zoom: 1; margin: 0 auto; max-width: 1400px; padding: 0 12px;}.footer-container{ max-width: 1400px; margin: auto; display: inline-block;}.followhabbo-container{ width: 250px; height: 100px; margin-left: 100px; margin-top: 30px;}.followhabbo{ margin-left: 55px; color: #7ecaee;}.facebook-link-icon-container{ width: 40px; height: 30px; display: inline-flex;}.facebook-link-icon{ width: 30px; height: 30px; background: url(https://localhost/images/sprite.56f427a4.png) -332px -315px;}.twitter-link-icon-container{ width: 40px; height: 30px; display: inline-flex;}.twitter-link-icon{ width: 30px; height: 30px; background: url(https://localhost/images/sprite.56f427a4.png) -300px -347px;}.youtube-link-icon-container{ width: 40px; height: 30px; display: inline-flex;}.youtube-link-icon{ width: 30px; height: 30px; background: url(https://localhost/images/sprite.56f427a4.png) -364px -315px;}.instagram-link-icon-container{ width: 40px; height: 30px; display: inline-flex;}.instagram-link-icon{ width: 30px; height: 30px; background: url(https://localhost/images/sprite.56f427a4.png) -300px -315px;}.other-link-icon-container{ width: 40px; height: 30px; display: inline-flex;}.other-link-icon{ width: 30px; height: 30px; background: url(https://localhost/images/sprite.56f427a4.png) -332px -347px;}.footer-helpful-copyright-container{ float: right; margin-left: 355px; margin-top: -120px;}.helpful-links{ color: #a1b5c8;}.footer-link{ color: #a1b5c8; padding-right: 5px; padding-left: 5px; font-family: sans-serif; font-size: 14.5px;}.footer-link:hover{ text-decoration: underline;}.copyright-message{ width: 840px; color: #425c73; font-size: 12px; font-family: sans-serif;}.sulakeicon-container{ width: 85px; height: 75px; display: inline-flex; float: right; margin-top: -85px; margin-right: -90px;}.sulake-icon{ width: 85px; height: 75px; background:url(https://localhost/images/sprite.56f427a4.png) -400px -300px;}This is my first thread post on here and sorry if there is a better way of sharing images and code but hopefully this will do for now. I hope some people like my work. As stated this wasnt ripped from the site and i coded it from scratch with what i thought would work best.
Thanks for reading,
Fozzey
