Parallax Basic Tamplete - Modern Design [UI]

IMPRetros

New Member
Nov 5, 2019
12
9
Hello guys, i present to you my basic parallax tamplete. i hope you'll like this.

Screens :





:down::down::down::down::down::down::down::down::down::down::down::down::down::down::down::down::down:
DOWNLOAD FROM HERE!



:up::up::up::up::up::up::up::up::up::up::up::up::up::up::up::up::up:

Code :

Code:
<!DOCTYPE HTML>
<head>
    <title> Saltan PROJECT :: Parallax Yapimi </title>
    <link rel="icon" href="img/favicon.png" sizes="16x16" type="image/png">
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Black+And+White+Picture" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">


    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    
    <style>
        *        { padding:0px;margin:0px;                                   }
        section     { width:100&;height:700px;padding:50px 0px ;text-align:center;color:white;
                  font-family: 'Poiret One', cursive;                            }
        body        { background-color:black;                                    }
        h1        { font-size:60px;margin-top:15%;                               }

        nav            { position:fixed; height:100px; width:100%; text-align:center; line-height:140px;
                  font-family: 'Black And White Picture', sans-serif;                     }
        nav a            { color:#FFF; text-decoration:none; font-size:20px; margin-left:20px;               }
        nav a:hover     { color:black;                                            }   

            #ingiltere      { background:url('img/england.jpg') no-repeat center fixed; background-size:cover; }
             #fransa         { background:url('img/france.jpg' ) no-repeat center fixed; background-size:cover; }
             #rusya          { background:url('img/russia.jpg' ) no-repeat center fixed; background-size:cover; }
             #almanya       { background:url('img/germany.jpg') no-repeat center fixed; background-size:cover; }
             #norvec        { background:url('img/norway.jpg' ) no-repeat center fixed; background-size:cover; }
        
    </style>

</head>
<body>
    <nav>
        <a class="scrollTo" href="#ingiltere">  INGILTERE </a>
        <a class="scrollTo" href="#fransa"   >  FRANSA     </a>
        <a class="scrollTo" href="#rusya"    >  RUSYA     </a>
        <a class="scrollTo" href="#almanya"  >  ALMANYA     </a>
        <a class="scrollTo" href="#norvec"   >  NORVEC     </a>
    </nav>

    <section id="ingiltere">
        <h1> INGILTERE </h1>
        <u> Baskent: Londra | Telefon Kodu: +44 </u>
    </section>
    
    <section id="fransa">
        <h1> FRANSA </h1>
        <u> Baskent: Paris | Telefon Kodu: +33 </u>
    </section>

    <section id="rusya">
        <h1> RUSYA </h1>
        <u> Baskent: Moskova | Telefon Kodu: +7 </u>
    </section>

    <section id="almanya">
        <h1> ALMANYA </h1>
        <u> Baskent: Berlin | Telefon Kodu: +49 </u>
    </section>

    <section id="norvec">
        <h1> NORVEC </h1>
        <u> Baskent: Oslo | Telefon Kodu: +47 </u>
    </section>

    <script type="text/javascript">

        $('.scrollTo').click(function() {
            var getElem = $(this).attr('href');
            var targetDistance = 1;
            if ($(getElem).length) {
                var getOffset = $(getElem).offset().top;
                $('html,body').animate({
                    scrollTop: getOffset - targetDistance
                }, 1000);
            }
            return false;
        });

    </script>
</body>
</html>



 

Users who are viewing this thread

Top