Jump to content
Killersites Forums


New Members
  • Posts

  • Joined

  • Last visited

MRGhost's Achievements


Newbie (1/14)



  1. I've been playing around with bootstrap over the weekend and it is pretty nifty. However, I'm still having difficulties trying to figure out where to begin with the more complex portion of the design. To kinda see that main page looks like, check our the organization's current homepage http://www.msculturalcrossroads.org/. My design centers the logo on the page, adds a navigation bar underneath the logo for easy page navigation and removes the current sidebar from the homepage. Now with what's left on the page, keeping the same general layout of the four images surrounding the diamond logo (if I can somehow get my images closer together using this grid layout system, I want to make the images kinda grow to cover the content area completely when clicked. While growing, the image goes away and page content is displayed with a close button at the top to shrink back to normal image size and allow the homepage to be seen again. Can you offer any suggestions as to how that may work? The other option for this design is to just go the easy route and make plain static pages but that doesn't allow me to learn any really nifty CSS3 tricks that I don't already know and definitely doesn't give me practice in learning JavaScript which I don't know any.
  2. So I've gone through the whole install process for bootstrap but as I read through their site, I'm not really seeing how it will help me with this particular site. I don't know where to begin.
  3. Good Evening Reader, I'm relatively new to the world of web design and need some pointers on a design that I've drawn up for practice. Up til now, my websites have been relatively plain and straight forward. However, in this highly competitive field I felt that I should begin to get my weight up and try and hang with my competition. So the idea that I had was to work on creating an HTML5 site with a UI that responds similarly to a Flash/ActionScript UI. I have a picture of the PSD Mock-up I created but I don't know how to display it here. If any of you know how and would like to tell me, please let me know. The homepage has a very simple look. The logo of the company that I'm practicing with is diamond-shaped so imagine a webpage with a 960px wide wrapper centered on the screen. In the header is the company's long logo and in the center of the content area is just the diamond-shaped logo with a linkable image on all four sides. The images are square-shaped with the corner under the diamond cut off and a 25px gap between it and the diamond. A 50px gap between the boxes themselves. Hopefully this isn't too hard to imagine. Here's my problem. I would like each box to serve as the main content area for the page it links to. I'm not suggesting that once clicked it goes to another page. That's simple and actually is what the current site does now. No, instead, I want the box to grow and transition to white background. During the transition, the image which was displayed in the box goes away and page information is displayed. I need it to function like a normal website at this point...sort of. I mean this in the sense that I want to display a sidebar and main content in the expanded box. When a link is clicked, the current content fades out and the new content fades in. I still haven't thought come up with a way to get back to the homepage without actually having to reload the page all over again. Now once the blocks are created, it is my opinion that I could achieve the effect of moving through pages by simply placing all the page contents in a div and as the links are clicked, simply hide one div and display the next using css and maybe a touch of javascript. However, I have no clue as to how to create my boxes to begin with. I had thought about using the canvas tag but I wasn't sure how well that could be manipulated so I decided to come here for help. I hope I wasn't too wordy in my explanation but I thought it best to paint the scene for what I'm trying to accomplish. And let me remind you, I'm new to this. I don't know javascript but I have worked with it before, just haven't written it. I decided to practice with this design in hopes that I could learn several techniques at once, javascript being one of them.
  • Create New...