www.webdeveloper.com
Results 1 to 9 of 9

Thread: clickable background banner (how to)

  1. #1
    Join Date
    Nov 2011
    Posts
    6

    clickable background banner (how to)

    Hi, i was wondering how can i try to make a banner that takes all the background on a webpage, and all its surfaces are clickable and link to the same page.

    Here is an example of what i am trying to do: http://www.hwupgrade.it/

    what do you think is the most universal and simple way of obtaining this feature

    thanxalot

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there nsfdm,

    and a warm welcome to these forums.

    Here is a basic example...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        background-image: url(http://coothead.co.uk/images/blood.jpg);
        background-attachment:fixed;
        background-size:100%;
     }
    #link {
        height:100%;
     }
    #link a {
        display:block;
        height:100%;
        text-indent:-9999px;
     }
    </style>
    
    </head>
    <body>
    
    <div id="link">
    <a href="http://www.webdeveloper.com/forum/showthread.php?t=253023">www.webdeveloper.com</a>
    </div>
    
    </body>
    </html>
    
    coothead

  3. #3
    Join Date
    Nov 2011
    Posts
    6
    Thank You very much, what if I want to put in a simple scrollable table, kind of a blog-type of thing, keeping the clickable background, could i proceed with css?

    If yes, how could it be?

    if you want to suggest some useful know how tutorial links, feel free.

    Thank you very much

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there nsfdm,

    does this modification help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        background-image: url(http://coothead.co.uk/images/buddha.jpg);
        background-attachment:fixed;
        background-size:100%;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    #link {
        position:absolute;
        width:100%;
        height:100%;
     }
    #link a {
        display:block;
        height:100%;
        text-indent:-9999px;
     }
    #container {
        position:relative;
        z-index:1;
        width:740px; 
        min-height:100%;
        padding:20px;
        border-right:1px solid #321;
        border-left:1px solid #000;
        margin:auto;
        background-color:#fed;
     }
    #container p {
        padding:10px 0;
        margin:0;
        color:#321;
        text-indent:20px;
     }
    #container p:first-letter {
        font-family:'times new roman',serif;
        font-size:220%;
        font-weight:bold;
        color:#f93;
        line-height:0.8;
        text-shadow:1px 1px #000,0 0 2px #000; 
     }
    </style>
    
    </head>
    <body>
    
    <div id="link">
    <a href="http://www.webdeveloper.com/">www.webdeveloper.com</a>
    </div>
    
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
    fermentum tellus nec lacus tempor in fringilla augue imperdiet. 
    Maecenas id velit non turpis luctus sollicitudin vitae eget dolor. 
    Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et 
    magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique 
    venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum. 
    Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo. 
    Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue. 
    Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet 
    tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue 
    tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta 
    ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper 
    vitae massa.
    </p><p>
    Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent 
    accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique 
    dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi 
    sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat 
    aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur 
    placerat convallis hendrerit. Nulla fermentum pretium varius. Donec 
    pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus 
    varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta 
    turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed 
    in eros. Integer sed libero et orci adipiscing dictum vitae quis justo. 
    Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
    </p><p>
    Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique 
    lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum 
    dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac 
    habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum 
    pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit 
    pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu 
    viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu 
    eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec 
    lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat 
    ligula.
    </p><p>
    Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus 
    felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta 
    eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend. 
    Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula, 
    scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla 
    facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum 
    consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra 
    id venenatis sit amet, laoreet in nunc.
    </p>
    </div>
    
    </body>
    </html>
    
    coothead

  5. #5
    Join Date
    Nov 2011
    Posts
    6
    Thanxalot

  6. #6
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    No problem, you're very welcome.

  7. #7
    Join Date
    Nov 2011
    Posts
    6
    Thank You

    I had just set the top variable to 200px to the container, that's because i wanted to have a header at the beginning of the page.

    The container slided down correctly but what happens now is that just the first half of the background image is clickable while the bottom half is not anymore.

    I was searching the net for a hint but did not find it, i will be glad if you could help me again.

    If you can link me a nice tutorial or any kind of good web info dealing with css IDs and variables and how to manage them, please let me know i'll check them out.

    Thank you


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        background-image: url(image1.jpg);
        background-attachment:fixed;
        background-size:100%;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    #link {
        position:absolute;
        width:100%;
        height:100%;
     }
    #link a {
        display:block;
        width:100%;
        height:100%;
        text-indent:-9999px;
     }
     
    #container {
        position:relative;
        z-index:1;
        width:740px; 
        min-height:100%;
        padding:20px;
        border-right:1px solid #321;
        border-left:1px solid #000;
        margin:auto;
        background-color:#fed;
        top:400px
     }
    #container p {
        padding:10px 0;
        margin:0;
        color:#321;
        text-indent:20px;
     }
    #container p:first-letter {
        font-family:'times new roman',serif;
        font-size:220%;
        font-weight:bold;
        color:#f93;
        line-height:0.8;
        text-shadow:1px 1px #000,0 0 2px #000; 
     }
    </style>
    
    </head>
    
    
    <body>
    
    <div id="link">
    	<a href="http://www.commpla.com/">www.commpla.com</a>
    </div>
    
    <div id="container">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
    fermentum tellus nec lacus tempor in fringilla augue imperdiet. 
    Maecenas id velit non turpis luctus sollicitudin vitae eget dolor. 
    Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et 
    magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique 
    venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum. 
    Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo. 
    Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue. 
    Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet 
    tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue 
    tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta 
    ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper 
    vitae massa.
    </p><p>
    Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent 
    accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique 
    dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi 
    sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat 
    aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur 
    placerat convallis hendrerit. Nulla fermentum pretium varius. Donec 
    pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus 
    varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta 
    turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed 
    in eros. Integer sed libero et orci adipiscing dictum vitae quis justo. 
    Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
    </p><p>
    Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique 
    lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum 
    dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac 
    habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum 
    pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit 
    pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu 
    viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu 
    eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec 
    lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat 
    ligula.
    </p><p>
    Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus 
    felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta 
    eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend. 
    Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula, 
    scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla 
    facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum 
    consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra 
    id venenatis sit amet, laoreet in nunc.
    </p>
    </div>
    
    </body>
    </html>

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,459
    Hi there nsfdm,

    does this help...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        background-image: url(http://coothead.co.uk/images/buddha.jpg);
        background-attachment:fixed;
        background-size:100%;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    #link {
        position:absolute;
        width:100%;
        height:100%;
     }
    #link a {
        display:block;
        height:100%;
        text-indent:-9999px;
     }
    #container {
        position:relative;
        z-index:1;
        width:740px; 
        min-height:100%;
        padding:20px;
        border-right:1px solid #321;
        border-left:1px solid #000;
        margin:auto;
        background-color:#fed;
     }
    #header {
        height:200px;
        border:1px solid #f93;
        background-color:#2d4555;
        color:#ccf;
        text-align:center;
        line-height:200px;
     }
    #container p {
        padding:10px 0;
        margin:0;
        color:#321;
        text-indent:20px;
     }
    #container p:first-letter {
        font-family:'times new roman',serif;
        font-size:220%;
        font-weight:bold;
        color:#f93;
        line-height:0.8;
        text-shadow:1px 1px #000,0 0 2px #000; 
     }
    </style>
    
    </head>
    <body>
    
    <div id="link">
     <a href="http://www.commpla.com/">www.commpla.com</a>
    </div>
    
    <div id="container">
    
    <div id="header">
    This is the header section.
    </div>
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
    fermentum tellus nec lacus tempor in fringilla augue imperdiet. 
    Maecenas id velit non turpis luctus sollicitudin vitae eget dolor. 
    Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et 
    magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique 
    venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum. 
    Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo. 
    Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue. 
    Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet 
    tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue 
    tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta 
    ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper 
    vitae massa.
    </p><p>
    Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent 
    accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique 
    dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi 
    sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat 
    aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur 
    placerat convallis hendrerit. Nulla fermentum pretium varius. Donec 
    pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus 
    varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta 
    turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed 
    in eros. Integer sed libero et orci adipiscing dictum vitae quis justo. 
    Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
    </p><p>
    Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique 
    lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum 
    dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac 
    habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum 
    pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit 
    pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu 
    viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu 
    eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec 
    lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat 
    ligula.
    </p><p>
    Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus 
    felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta 
    eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend. 
    Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula, 
    scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla 
    facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum 
    consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra 
    id venenatis sit amet, laoreet in nunc.
    </p>
    </div>
    
    </body>
    </html>
    
    coothead

  9. #9
    Join Date
    Nov 2011
    Posts
    6
    I have put the header outside the container beacause i didn't want the background image to be covered by the header.

    The issue is still there, as i scroll the page, the bottom of the background loses its "clickability"

    In the meanwhile i have tried two solutions which lead to other strange issues:

    1) the first is to add a 200% to the height attribute of the #link a {} object, but it's a forced solution, maybe not the most correct, and adds a footer that shouldn't be there.

    2) Another solution i have tried is to change the position attribute of the #link{} object from absolute to fixed, but this way it doesn't scoll anymore until i use the scroll bar. It won't scroll with the track pad.

    Thank You

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        background-image: url(image1.jpg);
        background-attachment:fixed;
        background-size:100%;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
     }
    #link {
        position:absolute;
        width:100%;
        height:100%;
     }
    #link a {
        display:block;
        width:100%;
        height:100%;
        text-indent:-9999px; 
     }
     
    #container {
        position:relative;
        z-index:1;
        width:740px; 
        min-height:100%;
        padding:20px;
        border-right:1px solid #321;
        border-left:1px solid #000;
        margin:auto;
        background-color:#fed;
     }
     
     #header {
        height:400px;
     }
     
    #container p {
        padding:10px 0;
        margin:0;
        color:#321;
        text-indent:20px;
     }
    #container p:first-letter {
        font-family:'times new roman',serif;
        font-size:220%;
        font-weight:bold;
        color:#f93;
        line-height:0.8;
        text-shadow:1px 1px #000,0 0 2px #000; 
     }
    </style>
    
    </head>
    
    
    <body>
    
    <div id="link">
    	<a href="http://www.webdeveloper.com/">www.webdeveloper.com</a>
    </div>
    
    
    <div id="header">
    </div>
    
    <div id="container">
    
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse 
    fermentum tellus nec lacus tempor in fringilla augue imperdiet. 
    Maecenas id velit non turpis luctus sollicitudin vitae eget dolor. 
    Aliquam id leo velit, ac luctus eros. *** sociis natoque penatibus et 
    magnis dis parturient montes, nascetur ridiculus mus. Nunc tristique 
    venenatis urna in varius. Morbi eu ipsum ac arcu dapibus bibendum. 
    Nullam eros leo, placerat iaculis adipiscing id, tincidunt a leo. 
    Fusce a augue in erat aliquet posuere in sed dui. Nam quis lacus augue. 
    Cras eget lacus urna. Aliquam erat volutpat. Etiam consequat laoreet 
    tellus, ut tincidunt neque cursus quis. Aliquam malesuada odio a augue 
    tincidunt fringilla in sed ligula. Sed mollis elementum nibh, eu porta 
    ligula egestas eu. Proin urna neque, volutpat vitae ornare in, semper 
    vitae massa.
    </p><p>
    Morbi dictum aliquet risus, ac tincidunt leo vulputate quis. Praesent 
    accumsan tortor at nisi placerat dignissim. Aliquam porttitor tristique 
    dui. Suspendisse viverra dictum libero, at porta nunc congue ut. Morbi 
    sem lorem, posuere ut tempor et, convallis at leo. Ut fermentum erat 
    aliquet lectus fermentum mollis. Aliquam erat volutpat. Curabitur 
    placerat convallis hendrerit. Nulla fermentum pretium varius. Donec 
    pulvinar dui nec tortor fringilla pharetra. Maecenas at urna vel risus 
    varius varius. Aenean vitae volutpat quam. Curabitur suscipit porta 
    turpis vel malesuada. Integer vel purus ut velit condimentum luctus sed 
    in eros. Integer sed libero et orci adipiscing dictum vitae quis justo. 
    Nullam risus velit, hendrerit eget adipiscing a, tincidunt ac diam.
    </p><p>
    Vivamus ultrices nisi non sapien commodo pulvinar. Nullam tristique 
    lectus ac risus vestibulum mollis. Fusce non odio eget libero interdum 
    dictum at a lorem. Nulla dictum justo rutrum leo dictum dapibus. In hac 
    habitasse platea dictumst. Donec aliquam lectus ut ipsum bibendum 
    pharetra. Vestibulum consectetur ornare ipsum, a malesuada velit 
    pellentesque ac. Duis tincidunt, libero in auctor tincidunt, lacus arcu 
    viverra nisi, ac malesuada ipsum diam id nisl. Curabitur semper arcu 
    eget nisi tristique eget rhoncus eros laoreet. Donec aliquet sapien nec 
    lacus pulvinar a rutrum diam eleifend. Sed in sapien arcu, vitae feugiat 
    ligula.
    </p><p>
    Curabitur quis urna nibh. Duis laoreet nunc eu diam ultrices et tempus 
    felis feugiat. Aliquam viverra interdum ligula, id vulputate arcu porta 
    eu. Aenean facilisis ipsum in tortor ullamcorper in iaculis orci eleifend. 
    Aliquam a diam id orci hendrerit auctor eu ut massa. In nulla ligula, 
    scelerisque eu sollicitudin a, ullamcorper non leo. Vestibulum fringilla 
    facilisis ante, et suscipit elit scelerisque vitae. Vivamus bibendum 
    consectetur sem, sed suscipit dolor gravida tempor. Nam leo mi, viverra 
    id venenatis sit amet, laoreet in nunc.
    </p>
    </div>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles