andruhovski icon

Task 982: Selectors API Demo (HTML)

andruhovski | PRO | 10/09/17 04:12:43 PM UTC | 0 ⭐ | 806 👁️ | Never ⏰ | []
HTML 5 |

0 B

|

None

|

0 👍

/

0 👎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Demo </title>
    <style>
        .intro {
            color: red;
        }
 
        .markup {
            color: yellow;
        }
 
        .noSel {
            color: green;
        }
 
        .newsletter {
            font-family: monospace;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Homepage</h1>
    <div class="intro">
        <p>My name is Donald <span id="Lastname">Duck.</span></p>
        <p id="my-Address">I live in Duckburg</p>
        <p>I have many friends:</p>
    </div>
 
    <ul id="Listfriends">
        <li>Goofy</li>
        <li>Mickey</li>
        <li>Daisy</li>
        <li>Pluto</li>
    </ul>
    <h3>We are all animals!</h3>
 
    <p>
        All my friends are great!<br>
        But I really like Daisy!!
    </p>
    <p lang="it" title="Hello beautiful">Ciao bella</p>
 
    <p><b>My latest discoveries have led me to believe that we are all animals:</b></p>
    <table>
        <tbody>
            <tr style="background-color: rgb(241, 241, 241);">
                <th>Name</th>
                <th>Type of Animal</th>
            </tr>
            <tr style="background-color: rgb(241, 241, 241);">
                <td>Mickey</td>
                <td>Mouse</td>
            </tr>
            <tr style="background-color: rgb(241, 241, 241);">
                <td>Goofey</td>
                <td>Dog</td>
            </tr>
            <tr style="background-color: rgb(241, 241, 241);">
                <td>Daisy</td>
                <td>Duck</td>
            </tr>
            <tr style="background-color: rgb(241, 241, 241);">
                <td>Pluto</td>
                <td>Dog</td>
            </tr>
        </tbody>
    </table>
    <div class="noSel newsletter" style="padding: 10px; border: 1px solid rgb(0, 153, 255); border: none; background-color: rgb(153, 214, 255);">
        <form>
            <h4>Subscribe to my newsletter:</h4>
            <div style="overflow:auto;">
                <div style="width:100px;float:left;">Name:</div><div style="width:180px;float:left;"><input class="markup" style="width: 150px;" type="text"></div>
            </div>
            <div style="overflow:auto;">
                <div style="width:100px;float:left;">E-mail:</div><div style="width:180px;float:left;"><input class="markup" style="width: 150px;" onchange="changeEmail(this)" type="email"></div>
            </div>
 
            <div class="noSel" style="margin-top:10px;">
                Female: <input name="rr" id="rr1" style="outline: transparent solid 2px;" type="radio" checked="checked">
                Male: <input name="rr" id="rr2" style="outline: transparent solid 2px;" type="radio">
                Other: <input name="rr" disabled="disabled" id="rr3" style="border-color: rgb(255, 102, 102); outline: rgb(255, 0, 0) solid 2px; background-color: rgb(255, 255, 153);" type="radio">
            </div>
            <h4>Newscategories:</h4>
            <div style="overflow:auto;">
                <div style="width:60px;float:left;">Ducks:</div>
                <div style="width: 20px; float: left;">
                    <input id="cc1" style="outline: transparent solid 2px;" type="checkbox" checked="checked">
                </div>
            </div>
            <div style="overflow:auto;">
                <div style="width: 60px; float: left;">Dogs:</div>
                <div style="width: 20px; float: left;">
                    <input id="cc2" style="outline: transparent solid 2px;" type="checkbox">
                </div>
            </div>
            <div style="overflow:auto;">
                <div style="width:60px;float:left;">Humans:</div><div style="width: 20px; float: left;">
                    <input id="cc3" style="outline: transparent solid 2px;" type="checkbox">
                </div>
            </div>
            <div class="noSel" style="clear:both;"></div>
            <p class="noSel">Your lucky number (between 1 and 10): 
            <input onchange="changeLuckyNumber(this)" type="number" min="1" max="10" value="7"></p>
        </form>
    </div>
</body>
</html>

Comments