<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<title>CODINGISLIFE</title>
</head>
<body>
<section id="cover">
<div class="container">
<div class="row">
<nav class="navbar navbar-toggleable-sm fixed-top navbar-expand-lg navbar-light bg-green">
<a class="navbar-brand" href="#"><img src="img/logo.png" alt="CODINGISLIFE"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Code</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row text-center">
<div class="col-sm-12">
<h1>CODINGISLIFE</h1>
</div>
<div class="col-sm-12">
<h2>HOW IS IT GOING ?</h2>
</div>
<div class="col-sm-12">
<a href="#"><button type="buton" class="btn btn-secondary">GO TO CODE</button></a>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
-------------------------Main.css------------------------
html,
body,
#cover{
height: 100%;
}
#cover{
background:url('../img/sec.jpg') no-repeat center fixed;
-webkit-background-size:cover;
}
.fixed-top{
max-width: 1140px;
margin:0px auto;
margin-top: 30px;
}
h1{
margin-top:15%;
font-family: 'Indie Flower', cursive;
font-size 45px;
color:#ffffff;
font-style:italic;
}
h2{
font-family: 'Caveat', cursive;
color:#ffffff;
}
.btn-secondary{
background-color: yellow;
color: red;
font-size: 30px;
padding:40x 40px;
}
a.nav-link{
color:white !important;
}
Uygulamamızdaki önemli yerler değinelim.İlk olarak section ile başladık çünkü bu uygulamadaki amacımız bir web sitesinin üst kısmını tasarlamak.Daha sonra bunun için konteynır'ı kullandık nedeni belli bir bölge yaratmaktı.Oluşturduğumuz bölgeleri satırlara böldük.Ve en üst tarafta logo ve menü
kısmını tasarlamak için nav etiketini ve gerekli bootstrap.css class'larından faydalandık.Ve daha sonra menumuzu tasarlamak için <li> etiketlerinden faydalandık.Tabi ki burada da bootstraptan faydalandık.Bootstrapsız bu işi yapmaya çalışsaydık,boyutlarından renklerine,renklerinden liste özelliklerine herşeyi ayarlamamız gerekecekti.Size tavsiyem bir önceki yazımızdaki şekilde bootstrap'ı kurup paylaşacağım örnekleri satır satır deneyerek çalıştırıp öğrenmeniz.Giriş düzeyinde anlattım fakat sonraki örneklerde anlatma olmayacak.Önemli olan bu kodları uygulamak.Bootstrap'ı çok iyi bir şekilde öğrenmek istiyorsanız yapmanız gereken tek şey bol örnek.
İYİ ÇALIŞMALAR...
Hiç yorum yok:
Yorum Gönder