A Boy Becomes a Warrior...
Coding inspired by Foghawk
Background pic courtesy of http://hdgamewalls.com
All place and character names are inspired by the Elder Scrolls V: Skyrim and remain the property of
Bethesda Softworks
Okay, I think (hope!) you're going to be my savior here. I have a fully designed profile. Originally my intentions were to use it as a learn how to code moment but I think I'm running out of steam and while it's fairly simple, there's a few spots I know will trip me up. So, I'd love to employ your services.
I do have a few questions first regarding what I'll need to provide. I've uploaded the mockup HERE so you can see what I'd like to do. The only "special" effects I want to include are different button images on hover for the majority of the elements.
I do still have a few things to finish on the design side - touching up a few of the buttons and finishing the pet hovers but pretty much everything is ready to go (and in fact I can upload what I have and replace the links with the finished version later).
My goal here is to have code that I can adapt to different themes that keep the same overarching layout, so hopefully that jives with the service you're offering! :)
Whoops sorry didnt know about your board!! a friend told me about you ;) Okay so I realized my profile I had created was lost in my hardrive fry and so I need to redo it, I'll let you know when I get it back!! Hope thats okay!! :3
o.m.f.g YOU ARE THE MESSIAH I'VE BEEN WAITING FOR.
I must ...buy...your work....
I've got to get my information together.. omfg...
Alright I've got one more question, how big do you want the image for a pet profile? cause I photoshop stuff and it starts out being like 14inches... o0
This is an amazing idea....maybe I will try to make a layout graphic so you can code it! those prices can't be beat either.
if i were to make one with boxes you'd be able to put text in them, for example?
Hey Fog! I was wondering if you're still doing coding? I have a profile I'll be working on and will need a coder :)
I would love to claim a slot from you as soon as you're available ^^ thank you! let me know and i will post the details!
Hi I was hoping you could help me please. I used one of the sets of codings that you did for one of my pets for another pet I just got. Unfortunately the storyline box isn't scrolling like it should and yet, as best as I can tell, the coding is the same as for the other pets. Would you mind taking a look at the coding please. I'd be happy to pay for your time if you wish. :)
SPOILER (click to toggle)
<style>
, , , -bubble-wrapper, , , , { display: none; }
body {
background-color: ;
background-image: url(http://i41.tinypic.com/ay4izl.jpg);
background-position: top left;
background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
color: ;
}
, {
width: 100%; height: auto !important;
margin: 0; padding: 0;
background-color: transparent;
}
, , :not(h1), , { opacity: 100; -webkit-transition: opacity 100s; -moz-transition: opacity 100s; -o-transition: opacity 100s; transition: opacity 100s; } h1 span { opacity: 100; } :hover, :hover ~ , :hover *, :hover, :hover { opacity: 100; } :hover { background-color: rgba(255, 255, 255, .15); }
.container-fluid { position: relative; height: 80em; width: 123em; margin: auto; } { position: absolute; top: 20em; left: 2em; height: 51.25em; width: 78.25em; margin-bottom: 25em; padding: 2em; background-color: rgba(255, 255, 255, .05); -webkit-transition: background-color 1s; -moz-transition: background-color 1s; -o-transition: background-color 1s; transition: background-color 1s; border-radius: .5em; } h1 { position: absolute; top: -1.7em; left: -.1em; text-align: left; font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'Zapf Chancery', 'URW Chancery L', 'Lucida Calligraphy', cursive; font-size: 10em; color: ; -webkit-text-fill-color: transparent; background: transparent; background: -webkit-gradient(linear, left, color-stop(0%, ), color-stop(25%, ), color-stop(45%, ), color-stop(55%, ), color-stop(100%, )); background: -webkit-linear-gradient(-45deg, 0%, 25%, 45%, 55%, 100%); -webkit-background-clip: text; background-clip: text; } .pet_name { margin-left: .1em; } h1::after { display: block; margin: -.4em 0 0 4em; font-size: .3em; content: 'If we killed a dragon once, we can do it again!'; background: -webkit-gradient(linear, left top, right top, color-stop(5px, ), color-stop(20px, ), color-stop(37px, ), color-stop(50px, )); background: -webkit-linear-gradient(-15deg, 5px, 20px, 37px, 50px); -webkit-background-clip: text; background-clip: text; } h2, h2 + br, b ~ br, h2, h2 { display: none; }
, , { padding: 0; background-color: rgba(255, 255, 255, .6); border-radius: .5em/1em; } ::before, ::after, h2 { display: block; text-align: center; margin: auto; font-family: Palatino, serif; font-size: 3em; line-height: 1em; font-weight: bold; color: ; content: 'Minion'; } , { width: auto; height: auto; margin: 1em; margin-top: 0; padding: .5em; float: none; background-color: rgba(178, 180, 180, .5); border-radius: .5em/1em; } { border-radius: .5em/1em; }
{ width: 16em; padding-top: .5em; } { height: 9em; margin-bottom: 0; white-space: nowrap; } img { padding: .5em; }::after { content: 'Friends' !important; margin-top: .175em; padding-bottom: 4.2em; } { position: absolute; top: 19.25em; left: 3em; width: 13.8em; height: 11.25em; padding-left: .2em; overflow: auto; } .friend_div { margin: 2; padding-left: 2em; border-top-right-radius: 0; border-bottom-right-radius: 0; } .friend_div:not(:last-child) { margin-bottom: 0em; }
{ margin: 2.5em 0 0 13.75em; color: rgba(255, 255, 255, .6); } img { vertical-align: baseline; } a { color: ; } { display: none; }
{ padding: 0; }
::-webkit-scrollbar, ::-webkit-scrollbar, ::-webkit-scrollbar { width: .5em; } ::-webkit-scrollbar-track ::-webkit-scrollbar-track, ::-webkit-scrollbar-track { border-radius: 1em/2em; } ::-webkit-scrollbar-track { background-color: rgba(178, 180, 180, .5); border-top-left-radius: 0; border-bottom-left-radius: 0; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb { background-color: ; border-radius: 1em/2em; }
{ position: absolute; top: 2em; right: 2em; width: 13.1em; height: 23.5em; margin: 0; padding: .75em .5em; overflow-y: auto; background-image: url(http://i39.tinypic.com/2eewu1y.jpg); border: 1em solid transparent; border-top-width: 3.5em; background-clip: border-box; background-origin: border-box; background-repeat: no-repeat; }
{ position: absolute; left: 2em; right: 2em; bottom: 2em; height: 18.1em; } h2 { padding: .2em .1em 0 .1em; } { height: 12.5em; overflow: auto; } .treasure_item { margin: .25em 0 .3em .5em; }
{ position: absolute; top: -11em; left: 85em; width: 435px; height: 750px; background-image; background-repeat: no-repeat; } </style>
Coding inspired by Foghawk
Background pic courtesy of http://hdgamewalls.com
All place and character names are inspired by the Elder Scrolls V: Skyrim and remain the property of
Bethesda Softworks
Ahh, I wish I had your talents! I took a web design class, but sadly I only can use Dreamweaver at the bare minimum (all the slices).
Just to make sure I'm clear, if I built a layout on photoshop could you work your magic on it? I enjoy designing so I could give you most of the files, you'd just have to do the coding (obviously) and plug it in.