Cloning This Site

Discussion in 'HTML & Website Design' started by hnicolassuero, Jan 2, 2014.

  1. #1
    Hi Everybody!
    I'm planning to clon some parts from this site:

    http://www.passioncitychurch.com/2.0/#/main/latest-1/

    I would like some ideas about how I can create the frontal buttons labeled as:
    US | CONNECT | SQUEDULE

    Does somebody has any idea?

    Thanks you for your help!
     
    Solved! View solution.
    hnicolassuero, Jan 2, 2014 IP
  2. ryan_uk

    ryan_uk Illustrious Member

    Messages:
    3,983
    Likes Received:
    1,022
    Best Answers:
    33
    Trophy Points:
    465
    #2
    Why do you want to clone it? Why do you not make your own design? This site is Flash based, which is a horrible choice. Why on earth anyone would want to make a site in "Flash" I don't know. Better off sticking with HTML and CSS (and - if only if you actually need it - JavaScript), make an accessible and responsive site. It's stupid it exclude a larger amount of potential customers (a large amount of people are using mobiles, tablets, etc, that do not have Flash support).
     
    ryan_uk, Jan 2, 2014 IP
  3. hnicolassuero

    hnicolassuero Well-Known Member

    Messages:
    759
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    135
    #3
    It's not exactly cloning the site. It's just taking some ideas from it. I have replicated some aspects of the homepage but I would like to know how to make these buttons: US | CONNECT | SQUEDULE
     
    hnicolassuero, Jan 2, 2014 IP
  4. ryan_uk

    ryan_uk Illustrious Member

    Messages:
    3,983
    Likes Received:
    1,022
    Best Answers:
    33
    Trophy Points:
    465
    #4
    As I mentioned, it's in Flash. To do it in HTML and CSS, look up the CSS hover and active selectors. You can amend colours, background images and so on.

    Take a look at @deathshadow's website http://www.ewiusb.com and use the Developer Tools in Chrome (or whatever browser you use) to examine how it's done. (Note that it is one background image and the position of it is changed to use a different part of it.)
     
    ryan_uk, Jan 2, 2014 IP
  5. hnicolassuero

    hnicolassuero Well-Known Member

    Messages:
    759
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    135
    #5
    Hey, ryan_uk
    Thanks a lot!
     
    hnicolassuero, Jan 2, 2014 IP
  6. #6
    Article I wrote about using images for that sliding-doors style a few years ago:
    http://www.cutcodedown.com/tutorials/hoverMenuBackground/template.html

    EWIUSB.COM uses much the same methodology -- though my new sites mostly try to use CSS3 for things like that, fact remains if you want slanted or more complex edges using sliding doors and a single image for all states is the way to go.
     
    deathshadow, Jan 2, 2014 IP
    ryan_uk likes this.
  7. hnicolassuero

    hnicolassuero Well-Known Member

    Messages:
    759
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    135
    #7
    Thanks deathshadow, good post!
     
    hnicolassuero, Jan 2, 2014 IP