Saturday 3 June 2017

css final















image.jpg

ticket.jpg

travel.jpg


//style.css

@font-face {
    font-family: 'THEDREAM';
    src: url('font/THEDREAM.eot');
    src: local('THEDREAM'), url('font/THEDREAM.woff') format('woff'), url('font/THEDREAM.ttf') format('truetype');
}

.webfont {
    font-family: 'THEDREAM' !important;
    font-size:3em;
}

#title {
    text-align: center;
}

body {
    min-width: 400px;
    background-color: aliceblue;
    animation-name: body_color;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

@keyframes body_color {
    0% {
        background-color: aliceblue;
    }

    25% {
        background-color: lemonchiffon;
    }

    50% {
        background-color: mistyrose;
    }

    75% {
        background-color: floralwhite;
    }

    100% {
        background-color: aliceblue;
    }
}

.menu {
    display: block;
    height: 30px;
    width: 100%;
    margin-top: 0;
    margin-left: 0;
    background-color: wheat;
    position: fixed;
}

    .menu > div {
        display: inline-block;
    }

        .menu > div > a {
            display: block;
            height: 20px;
            width: 100px;
            text-align: center;
            padding: 5px;
            background-color: lightgreen;
            transition: width 1s ease-out;
            cursor: pointer;
        }

            .menu > div > a:hover {
                width: 120px;
            }

.sub_menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100px;
    height: 25px;
    text-align: center;
    z-index: 3;
}

    .sub_menu a {
        padding: 5px;
        display: block;
        box-shadow: 2px 2px 1px lightgrey;
        cursor: pointer;
    }

        .sub_menu a:nth-child(even) {
            background-color: lightgreen;
        }

            .sub_menu a:nth-child(even):hover {
                background-color: #f1f1f1
            }

        .sub_menu a:nth-child(odd) {
            background-color: lightyellow;
        }

            .sub_menu a:nth-child(odd):hover {
                background-color: #f1f1f1
            }

#menu_cuisine:hover .sub_menu {
    display: block;
}

@media screen and (max-width: 650px) {
    #breakfast, #dinner,#drink {
        width: 100%;
    }

    #dinner {
        padding-top: 600px;
    }

    #drink{
        padding-top:1400px;
    }

    .plate, .knife_folk {
        left: 50%;
    }

    #b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
        left: 50%;
    }

    .platter {
        right: 50%;
    }

    .menu {
        width: 60px;
    }

        .menu > div {
            display: block;
            margin-left: -40px;
            transition: margin 1s ease-in-out;
            border: 1px groove wheat;
        }

            .menu > div:hover {
                margin-left: 0;
            }

    #title {
        font-size: 25px;
    }
}


@media screen and (min-width: 651px) and (max-width:1300px) {
    #breakfast, #dinner {
        width: 50%;
    }

    #drink{
        width:100%;
        padding-top:600px;
    }

    .plate, .knife_folk {
        left: 25%;
    }

    #b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
        left: 25%;
    }

    .platter {
        right: 25%;
    }

    #title {
        padding-top: 50px;
    }
}

@media screen and (min-width: 1301px) {
    #breakfast, #dinner {
        width: 33%;
    }

    .plate, .knife_folk {
        left: 16.5%;
    }

    #b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
        left: 16.5%;
    }

    .platter {
        right: 16.5%;
    }

    #title {
        padding-top: 50px;
    }
}

input[type=checkbox] {
    display: none;
}

    input[type=checkbox] + label {
        height: 100px;
        width: 100px;
        display: inline-block;
    }

    input[type=checkbox]:checked + label {
    }

#breakfast {
    text-align: center;
    float: left;
}

.plate {
    width: 100px;
    height: 100px;
    background: url("image.jpg") no-repeat;
    position: absolute;
    z-index: 2;
    transition: all 1s linear;
}

    .plate:hover {
        border: 5px dashed red;
    }

.breakfast1 {
    background-position: 0 0;
    margin-left: -160px;
    margin-top: 0;
}

.breakfast2 {
    background-position: 0 -100px;
    margin-left: -50px;
    margin-top: 0;
}

.breakfast3 {
    background-position: 0 -200px;
    margin-left: 60px;
    margin-top: 0;
}

.breakfast4 {
    background-position: 0 -300px;
    margin-left: -160px;
    margin-top: 170px;
}

.breakfast5 {
    background-position: 0 -400px;
    margin-left: -50px;
    margin-top: 170px;
}

.breakfast6 {
    background-position: 0 -500px;
    margin-left: 60px;
    margin-top: 170px;
}

#b1:checked + label, #b2:checked + label, #b3:checked + label, #b4:checked + label, #b5:checked + label, #b6:checked + label {
    position: absolute;
    margin-left: -50px;
    margin-top: 350px;
    font-size: 0;
}

.knife_folk {
    background: url("image.jpg") no-repeat;
    background-position: -100px 0;
    position: absolute;
    margin-top: 310px;
    margin-left: -141px;
}

#breakfast > div {
    height: 200px;
    width: 283px;
    z-index: 1;
}

#breakfast > h3::before {
    width: 30px;
    height: 30px;
    background: url("image.jpg") no-repeat;
    position: absolute;
    background-position: -100px -200px;
    margin-left: -40px;
    margin-top: -10px;
    content: url("");
}

#breakfast > h3::after {
    width: 30px;
    height: 30px;
    background: url("image.jpg") no-repeat;
    background-position: -100px -200px;
    position: absolute;
    margin-left: 10px;
    margin-top: -10px;
    content: url("");
}

#dinner {
    float: right;
}

    #dinner * {
        text-align: center;
    }

.platter {
    width: 200px;
    height: 200px;
    background: url("image.jpg") no-repeat;
    position: absolute;
    transition: width 2s, height 2s;
}

    .platter:hover {
        opacity: 0.8;
    }

    .platter:active {
        height: 0;
    }

    .platter:before {
        opacity: 0;
        width: 121px;
        height: 121px;
        background: url("image.jpg") no-repeat;
        background-position: -429px 0;
        position: absolute;
        margin-left: -10px;
        margin-top: 200px;
        content: url("");
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transition: all 2s;
        transition: all 2s;
    }

    .platter:active:before {
        opacity: 1;
        margin-top: 0;
    }

.dinner1 {
    background-position: -146px -215px;
    margin-right: -100px;
    margin-top: 0;
}

.dinner2 {
    background-position: -346px -200px;
    margin-right: -100px;
    margin-top: 200px;
}

.dinner3 {
    background-position: -146px -430px;
    margin-right: -100px;
    margin-top: 400px;
}

#drink {
    text-align: center;
}

.cheers{
    width:100px;
    height:100px;
    padding-top:100px;
    position:absolute;
    left:50%;
    text-align:center;
    margin-left:-50px;
}

    .cheers > b {
        opacity:0;
        animation-name: cheers_word;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes cheers_word{
        80% {
            opacity:0;
        }

        100%{
            opacity:1;
        }
    }

    .cheers:before {
        width: 80px;
        height: 200px;
        background: url("image.jpg") no-repeat;
        background-position: -470px -400px;
        position: absolute;
        content: url("");
        margin-left: -100px;
        margin-top: -100px;
        animation-name: cheers_before;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

@keyframes cheers_before {

    30% {
        margin-left: -200px;
        margin-top: -100px;
        transform: rotate(-720deg) rotateY(0deg);
    }

    40% {
        margin-left: -200px;
        margin-top: -100px;
        transform: rotateY(-180deg);
    }

    50% {
        margin-left: -200px;
        margin-top: -100px;
        transform: rotateY(0deg);
    }

    60% {
        margin-left: -200px;
        margin-top: -140px;
    }

    67% {
        margin-left: -200px;
        margin-top: -60px;
    }

    70% {
        margin-left: -200px;
        margin-top: -100px;
        transform: skew(0deg);
    }

    73% {
        margin-left: -200px;
        transform: skew(-30deg);
    }

    80% {
        margin-left: -200px;
        transform: skew(30deg)
    }

    85% {
        margin-left: -200px;
        transform: rotate(30deg) skew(0deg);
    }
}

    .cheers:after {
        width: 80px;
        height: 200px;
        background: url("image.jpg") no-repeat;
        background-position: -470px -400px;
        position: absolute;
        content: url("");
        margin-left: 10px;
        margin-top: -100px;
        animation-name: cheers_after;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
     
    }

@keyframes cheers_after {

    30% {
        margin-left:110px;
        margin-top:-100px;
        transform: rotate(720deg) rotateY(0deg);
    }

    40% {
        margin-left: 110px;
        margin-top: -100px;
        transform: rotateY(180deg);
    }

    50% {
        margin-left: 110px;
        margin-top: -100px;
        transform: rotateY(0deg);
    }

    60% {
        margin-left: 110px;
        margin-top: -60px;
    }

    67% {
        margin-left: 110px;
        margin-top: -140px;
    }

    70% {
        margin-left: 110px;
        margin-top: -100px;
        transform: skew(0deg);
    }

    73% {
        margin-left: 110px;
        transform: skew(30deg);
    }

    80% {
        margin-left: 110px;
        transform: skew(-30deg)
    }

    85%{
        margin-left:110px;
        transform:rotate(-30deg) skew(0deg);
    }
}

#travel {
    text-align: center;
    width: 100%;
}

.earth {
    width: 450px;
    height: 450px;
    left: 50%;
    background: url("travel.jpg") no-repeat;
    position: absolute;
    margin-left: -225px;
}

    .earth:after {
        width: 50px;
        height: 50px;
        background: url("travel.jpg") no-repeat;
        background-position: -450px 0;
        position: absolute;
        content: url("");
        margin-left: 250px;
        margin-top: 200px;
        animation-name: fly;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        transform-origin: -250px;
    }

@keyframes fly {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

#travel a {
    text-decoration: underline;
}

.ticket {
    height: 25px;
    width: 50px;
    opacity: 0;
    position: absolute;
    left: 50%;
    margin-top: -15px;
    margin-left: -25px;
    margin-bottom: 200px;
    color: blue;
    cursor: pointer;
    background: url("ticket.png") no-repeat;
    background-size: contain;
    transition: transform 0.5s linear;
}

    .ticket:active {
        opacity: 1;
        margin-top: -100px;
        transform: scale(8) rotate(1440deg);
    }


#game {
    height: 400px;
    width: 400px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -200px;
}

.target_trace {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: blue;
    animation-name: trace;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

@keyframes trace {
    0% {
        left: 0;
        top: 200px;
    }

    20% {
        left: 400px;
        top: 400px;
    }

    40% {
        left: 200px;
        top: 0;
    }

    60% {
        left: 0;
        top: 400px;
    }

    80% {
        left: 400px;
        top: 200px;
    }

    100% {
        left: 0;
        top: 200px;
    }
}


.target_trace:active {
    animation-play-state: paused;
}

.target_trace:after {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(white 2%, red 10%, orange 20%, yellow 30%, green 40%, cyan 50%, blue 60%, purple 70%,black 80%);
    background-size: contain;
    position: absolute;
    content: url("");
    margin-left: 0;
    margin-top: 0;
    animation-name: target_rotate;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 0 0;
}

@keyframes target_rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}

.target_trace:hover:after {
    cursor: crosshair;
}

.target_trace:active:after {
    animation-play-state: paused;
}

--------------------------------------------------------------------
//default.html

<!DOCTYPE html>
<html>
<head>
    <title>Cuisine</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>

<body>
    
    <div class="menu">
        <div id="menu_cuisine">
            <a href="default.html">Cuisine</a>
            <div class="sub_menu">
                <a href="default.html#breakfast">Breakfast</a>
                <a href="default.html#dinner">Dinner</a>
                <a href="default.html#drink">Drink</a>
            </div>
        </div>
        <div><a href="game.html">Game</a></div>
        <div><a href="travel.html">Travel</a></div>
    </div>
    <h1 id="title" class="webfont">Enjoyment of a day</h1>
    <div id="breakfast">
        <h3>Breakfast</h3>

        <input type="checkbox" id="b1" name="b1">
        <label for="b1" class="breakfast1 plate"><br /><br /><br /><br /><br /><br />Meat Pepper</label>

        <input type="checkbox" id="b2" name="b2">
        <label for="b2" class="breakfast2 plate"><br /><br /><br /><br /><br /><br />Onion Bread</label>

        <input type="checkbox" id="b3" name="b3">
        <label for="b3" class="breakfast3 plate"><br /><br /><br /><br /><br /><br />Lotty Cafe</label>

        <input type="checkbox" id="b4" name="b4">
        <label for="b4" class="breakfast4 plate"><br /><br /><br /><br /><br /><br />Berry Flakes</label>

        <input type="checkbox" id="b5" name="b5">
        <label for="b5" class="breakfast5 plate"><br /><br /><br /><br /><br /><br />Croissant Coffee</label>

        <input type="checkbox" id="b6" name="b6">
        <label for="b6" class="breakfast6 plate"><br /><br /><br /><br /><br /><br />Bacon Pancake</label>

        <div class="knife_folk"><br /><br /><br /><br /><br /><br /><br /><br />Enjoy!</div>
    </div>

    <div id="dinner">
        <h3>Dinner</h3>

        <div class="platter dinner1">Canadian Style</div>
        <div class="platter dinner2">Indian___Style</div>
        <br /><br />
        <div class="platter dinner3">Chinese  Style</div>
    </div>

    <div id="drink">
        <h3>Champagne</h3>

        <div class="cheers"><b>Cheers!</b></div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    </div>
</body>

</html>

---------------------------------------------------------------------
//game.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>gaming</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
    <div class="menu">
        <div id="menu_cuisine">
            <a href="default.html">Cuisine</a>
            <div class="sub_menu">
                <a href="default.html#breakfast">Breakfast</a>
                <a href="default.html#dinner">Dinner</a>
                <a href="default.html#drink">Drink</a>
            </div>
        </div>
        <div><a href="game.html">Game</a></div>
        <div><a href="travel.html">Travel</a></div>
    </div>
    <h1 id="title" class="webfont">Enjoyment of a day</h1>

    <div id="game">
        <h3>Play games</h3>
        <h4>Shoot the bulls eye</h4>
        <div class="target_trace"></div>
    </div>
</body>
</html>

----------------------------------------------------------
//travel.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Travel</title>

    <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
    <div class="menu">
        <div id="menu_cuisine">
            <a href="default.html">Cuisine</a>
            <div class="sub_menu">
                <a href="default.html#breakfast">Breakfast</a>
                <a href="default.html#dinner">Dinner</a>
                <a href="default.html#drink">Drink</a>
            </div>
        </div>
        <div><a href="game.html">Game</a></div>
        <div><a href="travel.html">Travel</a></div>
    </div>
    <h1 id="title" class="webfont">Enjoyment of a day</h1>

    <div id="travel">
        <h3>Travel</h3>
        <br /><br />
        <div class="earth"></div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <p>Congratulaiton! You win a free trip to Hawaii.</p>
        <a>Claim it</a>
        <div class="ticket"></div>

    </div>
</body>
</html>

reference:
https://stackoverflow.com/questions/9980531/center-image-in-div-horizontally
https://www.w3schools.com/css/css3_transitions.asp
https://www.photojoiner.net/
http://resizeimage.net/
https://css-tricks.com/almanac/selectors/c/checked/
https://stackoverflow.com/questions/7203697/before-and-background-image-should-it-work
https://stackoverflow.com/questions/22985737/css-active-selector-using-after-pseudo-element
https://stackoverflow.com/questions/19579340/css-transition-after-a-pseudo-element-how-to-transition-content-that-shows-o

No comments:

Post a Comment