<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Teleskop - Anasayfa</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/costom.css">
</head>
<body class="body">
<nav class="navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="hakkimizda.html"><span class="link">Hakkımızda</span></a></li>
<li><a href="blok.html"><span class="link">Blok</span></a></li>
<li><a href="#"><span class="link"><span class="glyphicon glyphicon-apple"></span> AppStore</span></a></li>
<li><a href="#"><span class="link"><span class="glyphicon glyphicon-play"></span> PlayStore</span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="nav navbar">
<a href="hakkimizda.html"><div class="menu">Hakkımızda</div></a>
<a href="blok.html"><div class="menu">Blok</div></a>
<a href="#"><div class="menu"><span class="glyphicon glyphicon-apple"></span> AppStore</div></a>
<a href="#"><div class="menu"><span class="glyphicon glyphicon-play"></span> PlayStore</div></a>
</div>
<br>
<div class="nav">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/en/thumb/b/ba/NICE_logo.svg/1024px-NICE_logo.svg.png">
<div class="slogan">Evreni Teleskop ile Keşfet</div>
<div>
<a href="#"><img class="store" src="https://vignette.wikia.nocookie.net/psg3/images/6/63/Google-play-badge.png/revision/latest/scale-to-width-down/640?cb=20170619172129"></a>
<a href="#"><img class="store" src="http://mypackconnect.com/wp-content/uploads/2017/03/App_Store_black.png"></a>
</div>
</div>
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
@charset "utf-8";
/* Bootstrap Costom Css Dosyası */
.body
{
margin: 0;
background-image: url(https://i.hizliresim.com/nJXZ1a.gif);
padding: 0;
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
.navbar-default
{
display: none;
background: none;
}
.nav
{
text-align: center;
padding-top: 25px;
margin: 0;
}
.menu
{
color: #fff;
text-align: center;
display: inline-block;
margin: 5px;
width: 130px;
height: 50px;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
font-size: 16px;
transition: all 0.5s;
line-height: 50px;
font-weight: bold;
}
.link
{
color: #fff;
font: 17px bold;
}
.link:hover
{
color: #7A2D79;
}
.menu:hover
{
background: #fff;
color: #7A2D79;
}
.logo
{
width: 350px;
margin-top: 60px;
}
.slogan
{
color: #fff;
font-size: 16px;
margin-top: -5px;
font-weight: bold;
font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
.store
{
width: 140px;
margin-top: 270px;
}
@media screen and (max-width: 610px)
{
.menu
{
display: none;
}
.navbar-default
{
display:inherit
}
.logo
{
margin-top: 15px;
}
}
/*Menu bitis*/
/*Hakkimizda baslangic*/
.hakkimizda-arka
{
background: #FFFFFF;
color: #888888;
font-size: 16px;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
font-weight: bold;
text-align: justify;
}
.title
{
color: #7A2D79;
font-size: 25px;
}
.baslik-orta
{
text-align: center;
}
.buton
{
width: 150px;
height: 60px;
background: none;
border: 2px solid #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
font-weight: bold;
transition: all 1s;
}
.buton:hover
{
background: #fff;
}
/*Hakkimizda Bitis*/
/*Blok Baslangic*/
.yazi
{
margin: 20px 50px;
border: 1px solid #FFFFFF;
height: 400px;
color: #FFFFFF;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 17px;
margin-left: 60px;
}
.resim
{
margin: 20px 50px;
margin-left: 0px;
border: 1px solid #FFFFFF;
height: 400px;
overflow: hidden;
transition: all 0.7s;
}
.resim-2
{
margin-left: 60px;
}
.resim:hover
{
background: #7A2D79;
transform: rotate(-1.2deg);
}
.resim:hover .baslik
{
color: #fff;
}
.baslik
{
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font: 24px bold;
margin-top: 25px;
color: #7A2D79;
transition: all 0.7s;
}
.yukari-yazi
{
margin-top: 50px;
position: absolute;
background: #7A2D79;
transition: all 0.7s;
height: 100%;
padding: 50px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
font-size: 17px;
font-weight: bold;
padding-top: 7px;
color: #fff;
}
.resim:hover .yukari-yazi
{
margin-top: -320px;
}
.d
{
margin: 0px;
}
@media screen and (max-width: 1200px)
{
.resim-2
{
margin-left: 0;
margin-right: 0;
}
.resim
{
margin-left: 0;
margin-right: 0;
}
}
/*Blok Bitis*/
