Login page (RuneScape)

Her kan du dele din kode med andre! Hvis du f.eks har lavet en super lækker CSS menu eller et smart php eller Jquery script kan du altså glæde andre og måske få lidt ros for det her :-)
Besvar
cristian
Moderator
Moderator
Indlæg: 865
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Login page (RuneScape)

Indlæg af cristian » 8. jun 2014, 13:11

Kode: Vælg alt

<html>
   
    <head>
       
        <title>Login Application 0.1</title>
       
        <meta charset="UTF-8">
       
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
       
        <!--Stylesheets-->
        <link rel="stylesheet" type="text/css" href="CSS/CSS-reset.css"/>
       
        <!--Google fonts-->
       
       
        <!--Remove into stylesheets-->
        <style>
                 
            body {
               background-color: hsl(0, 0%, 0%);
               
               min-height: 100%;
               
               background: url(images/blue-tree-wallpapers_12953_1680x1050.jpg) no-repeat center center fixed;
               -webkit-background-size: cover;
               -moz-background-size: cover;
               -o-background-size: cover;
               background-size: cover;
            }
           
            .wrapper {
                color: hsl(0, 0%, 100%);
            }
           
            header {
                text-align: center;
            }
           
            header img {
                width: 50%;
                margin-top: 3%;
            }
           
            form {
                text-align: center;
            }
           
            input {
                height: 2.5em;
                width: 200px;
               
                border-radius: 5px;
               
                background-color: hsla(0, 0%, 0%, .8);
               
                color: hsl(199, 45%, 78%);
               
                border: 1px solid hsla(0, 0%, 100%, .2);
               
                font-size: 1em;
            }
           
            input:nth-child(2n) {
                margin-left: 10px;
            }
           
            input#submit {
                margin-top: 10px;
            }
           
            input#submit:hover {
                cursor: pointer;
            }
           
            @media screen and (max-width: 1100px){
                header img {
                    width: 75%;
                    margin-top: 3%;
                }
               
                input:nth-child(2n){
                    margin-left: 10px;
                }
            }
           
            @media screen and (max-width: 650px){
                header img {
                    width: 100%;
                    margin-top: 3%;
                }
                
                input {
                    display: block;
                   
                    margin-top: 10px;
                }
               
                input:nth-child(2n){
                    margin-left: 0px;
                }
               
                form {
                    display: block;
                   
                    width: 205px;
                   
                    margin: 0 auto;
                }
            }
           
        </style>
       
    </head>
   
    <body>
       
        <div class="wrapper">
           
            <header>

                <img src="images/runescapelogo.png" alt="Runescape"/>
               
            </header>
               
            <form>

                <input type="text" name="username" placeholder="Email/Username"><input type="password" name="password" placeholder="Password"><br/>
                <input id="submit" type="submit" value="Submit">
               
            </form>
           
        </div>
       
    </body>
   
</html>
http://mnrb.dk/nemprogrammering/runescapelogo.png
http://mnrb.dk/nemprogrammering/blue-tr ... 0x1050.jpg
http://mnrb.dk/nemprogrammering/CSS-reset.css
Vedhæftede filer
loginApplicationMobile.png
loginApplicationMobile.png (535.74 KiB) Vist 1514 gange
runescapeLogin.PNG
runescapeLogin.PNG (899.18 KiB) Vist 1535 gange

Brugeravatar
ThomasI
Grundlægger
Grundlægger
Indlæg: 1525
Tilmeldt: 28. dec 2010, 10:49

Re: Login page (RuneScape)

Indlæg af ThomasI » 10. jun 2014, 15:35

Ser fedt ud!

Tilpasser billede sig mindre skærmstørrelser så det altid er fyldt helt ud? :)

cristian
Moderator
Moderator
Indlæg: 865
Tilmeldt: 26. sep 2011, 21:31
Kontakt:

Re: Login page (RuneScape)

Indlæg af cristian » 10. jun 2014, 19:28

ThomasI skrev:Ser fedt ud!

Tilpasser billede sig mindre skærmstørrelser så det altid er fyldt helt ud? :)
Jeg tror svaret på dit spørgsmål er ja. Har tilføjet et billede fra en mobil enhed å du kan se det :)
Helt rigtigt skulle jeg jo lave et nyt billede til når skærmen formindskes til f.eks en mobil telefon. Så det vises på den mest optimale måde
med hvad man ville have med. Men det har jeg ikke lige gjort her :) Det må være en opgave for andre.

Besvar