Skewed Background Yapımı - HTML5 - CSS3 - Ders20
Evet arkadaşlar bu uygulamamızda sizler için bir bacground hazırladık ve skew ile biraz görsellik kattık. Bizleri takip etmeye devam edin en güncel animasyon ve efectler ile karşınızda olmaya devam edeceğiz. Kanalımıza abone olmayı unutmayın.
Ha bu arada ders içerikleri alttaki linktedir.
İyi çalışmalar ;)
HTML İÇERİĞİ:
<!DOCTYPE html>
<html>
<head>
<title>Skew Background</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<body>
<section class="skewbox">
<div class="container">
<h1>WEB SİTEM</h1>
<p>Bu kanalda sizler için hazırlanmış küçük
uygulamalar yer almaktadır. Bu uygulamaları
web sitenizi dizayn ederken kullanabilirsiniz.
Uygulamalar ile sitenizin görselliğine katkıda
bulunduğumuz için çok mutluyuz.
Kanalımızı takip etmeyi unutmayın. Abone olun :)</p>
</div>
</section>
<body>
<section class="skewbox2">
<h1>Kanala Abone Olun</h1>
<p>Bu kanalda sizler için hazırlanmış küçük
uygulamalar yer almaktadır. Bu uygulamaları
web sitenizi dizayn ederken kullanabilirsiniz.
Uygulamalar ile sitenizin görselliğine katkıda
bulunduğumuz için çok mutluyuz.
Kanalımızı takip etmeyi unutmayın. Abone olun :)</p>
</section>
</body>
</head>
</html>
CSS İÇERİĞİ:
body{
margin: 0;
padding: 0;
background: #484848;
}
.skewbox{
background: #b0ff30;
padding: 100px 0;
transform: skew(0deg, -10deg) translateY(-120px);
}
.container{
padding: 150px 200px;
transform: skew(0deg, 10deg);
font-family: arial;
}
.container h1{
margin: 0;
padding: 20px 0;
font-size: 3em;
}
.container p{
margin: 0;
padding: 0;
font-size: 1em;
width: 80%;
line-height: 2em;
}
.skewbox2{
padding: 0 200px 150px;
color: #fff;
font-family: arial;
text-align: right;
}
.skewbox2 h1{
margin: 0;
padding: 20px 0;
font-size: 3em;
}
.skewbox2 p{
margin: 0;
padding: 0;
font-size: 1em;
width: 100%;
line-height: 2em;
}
Yorumlar
Yorum Gönder