Tek Sayfa Responsive Web Sitesi Yapımı - One Page Responsive Web Site - HTML5 - CSS3 - Part1
Bu video ders serimizin ilki ve burada divlerimizi oluşturduk sayfamızın ana iskeletini belirledik. Tasarımımız kaba halini aldı ve sayfamızın planlarını uygulamaya başladık. Menü barımızı oluşturduk ve görselliği üzerinde çalıştık. Video derslerimizin devamında tüm siteyi tamamlayıp bütün içerikleri de sizlerle paylaşacağız. Dersi takip edebilmek için kanalımıza abone olmayı unutmayın. Yorum kısmından aklınıza takılanları sorabilirsiniz. Tüm sorulara cevap vermeye çalışacağım.
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Web Sitem</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<body>
<nav class="menü">
<a href="#">ANA SAYFA</a>
<a href="#">BİZ KİMİZ</a>
<a href="#">PROJELER</a>
<a href="#">MİSYON</a>
<a href="#">VİZYON</a>
<a href="#">İLETİŞİM</a>
</nav>
<div id="s1" class="sayfa">
<div class="filtre"></div>
<div class="yazı">
<h1> WEB SİTEM</h1>
<p>Şu anda WEB SİTEM kanalının videosunu izliyorsunuz.</p>
</div>
</div>
<div id="s2" class="bant"></div>
<div id="s3" class="sayfa">
<div class="filtre"></div>
</div>
<div id="s4" class="bant"></div>
<div id="s5" class="sayfa">
<div class="filtre"></div>
</div>
<div id="s6" class="bant"></div>
</body>
</head>
</html>
CSS İÇERİĞİ:
*{
margin: 0;
padding: 0;
}
body,html{
height: 100%;
}
.menü{
position: absolute;
height: 80px;
width: 100%;
text-align: center;
line-height: 80px;
background-color: rgba(39,13,24,0.4);
z-index: 9999;
}
.menü a{
color: white;
font-family: arial;
font-size: 1.2em;
text-decoration: none;
margin-left: 7px;
padding: 10px 10px;
border-radius: 10px;
transition: 1s;
}
nav a:hover{
background-color: white;
color: #270d18;
}
.sayfa{
height: 100%;
background-color: #bd94db;
background-size: cover;
background-attachment: fixed;
z-index: 9999;
}
.bant{
height: 60%;
background-color: #270d18;
}
#s1{
background-image: url("arkaplan/1.jpg");
}
#s1 .filtre{
position: absolute;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
z-index: 0;
}
#s1 .yazı{
position: absolute;
width: 100%;
height: 100%;
color: white;
z-index: 1;
margin-top: 25%;
text-align: center;
}
#s1 .yazı h1{
color: #e6f6f7;
font-size: 4em;
font-family: calibri;
padding-bottom: 35px;
}
#s1 .yazı p{
color: white;
font-size: 1.5em;
font-family: calibri;
letter-spacing: 4px;
}
#s3{
background-image: url("arkaplan/2.jpg");
}
#s3 .filtre{
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
#s5{
background-image: url("arkaplan/3.jpg");
}
#s5 .filtre{
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
#s6{
height: 40%;
background-color: #484848;
}
tek Sayfa Responsive Web Sitesi Yapımı - One Page Responsive Web Site - HTML5 - CSS3
YanıtlaSilbu projenin resimlerinide eklermisiniz?
Teşekkür ederim gerçekten kullandım.
YanıtlaSil