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 :
DOWNLOAD FROM HERE!
Code :
Screens :
You must be registered for see links
You must be registered for see links
You must be registered for see links
DOWNLOAD FROM HERE!
You must be registered for see links
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>