[url=https://www.hizliresim.com/gf8z05z]
[/URL]
Arkadaşlar sayfamız bu şekilde görünüyor. SS'de belli olması için scrolldown olmadan görüntü aldım fakat normalde aşağıdaki beyaz kısıma scrolldown ile iniyorsunuz. Yani gayet estetik duruyor...
Sitede bulunan bütün bileşenler animasyonlu. Hepsinde hover kullandım. Sayfa Responsive değildir, sadece laptop ve masaüstü kullanım için dizayn ettim. Bir sonraki konumda bu siteye login page ile beraber admin paneli ekleyeceğim ve javascript ile beraber kullanıma hazır taze bir site olarak ücretsiz yayınlayacağım. Kendine ödev edinmek isteyen veya kodları merak eden arkadaşlar için aşağıya bırakıyorum.
[/URL]Arkadaşlar sayfamız bu şekilde görünüyor. SS'de belli olması için scrolldown olmadan görüntü aldım fakat normalde aşağıdaki beyaz kısıma scrolldown ile iniyorsunuz. Yani gayet estetik duruyor...
Sitede bulunan bütün bileşenler animasyonlu. Hepsinde hover kullandım. Sayfa Responsive değildir, sadece laptop ve masaüstü kullanım için dizayn ettim. Bir sonraki konumda bu siteye login page ile beraber admin paneli ekleyeceğim ve javascript ile beraber kullanıma hazır taze bir site olarak ücretsiz yayınlayacağım. Kendine ödev edinmek isteyen veya kodları merak eden arkadaşlar için aşağıya bırakıyorum.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Panel</title>
</head>
<body>
<div class="renk"></div>
<nav>
<ul>
<a href=""><li title="Anasayfa">Anasayfa</li></a>
<a href=""><li title="Kaynak">Kaynak</li></a>
<a href=""><li title="Durum">Durum</li></a>
<a href=""><li title="Hikaye">Hikaye</li></a>
<a href=""><li title="Destek">Destek</li></a>
<form>
<input type="search" placeholder="Sitede Ara">
<input type="submit" value="Git" id="submit">
</form>
</ul>
<div class="renk"></div>
</nav>
</div>
<h1>Only For Desktop</h1>
<div class="kartlar">
<div class="kart1">
<h3 >Premium 1</h3>
<div class="k1Aciklama">
<p>Sitede Kullanılacak 40 Yorum</p>
<button type="button" class="btn btn-info">Bilgi</button>
</div>
</div>
<div class="kart2">
<h3 class="x1"> Premium 2 </h3>
<div class="k2Aciklama">
<p>Ürünlerin Fiyatlarında %30 İndirim</p>
<button type="button" class="btn btn-warning">Bilgi</button>
</div>
</div>
<div class="kart3">
<h3 class="x1">Premium 3</h3>
<div class="k3Aciklama">
<p>40 Günlük Enerji + Extra Can</p>
<button type="button" class="btn btn-danger">Bilgi</button>
</div>
</div>
</div>
<div class="footerim">
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<!-- Section: Social media -->
<section
class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom"
>
<!-- Left -->
<div class="me-5 d-none d-lg-block">
<span>Sosyal Medya da bizi Bul</span>
</div>
<!-- Left -->
<!-- Right -->
<div>
<a href="" class="me-4 text-reset">
<i class="fab fa-facebook-f"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-twitter"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-google"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-instagram"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-linkedin"></i>
</a>
<a href="" class="me-4 text-reset">
<i class="fab fa-github"></i>
</a>
</div>
<!-- Right -->
</section>
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Krklc Bilişim
</h6>
<p>
Ali Karakılıç Kişisel Web Site Çalışması
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Products
</h6>
<p>
<a href="#!" class="text-reset">Angular</a>
</p>
<p>
<a href="#!" class="text-reset">React</a>
</p>
<p>
<a href="#!" class="text-reset">Vue</a>
</p>
<p>
<a href="#!" class="text-reset">Laravel</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Bağlantılar
</h6>
<p>
<a href="#!" class="text-reset">Fiyatlar</a>
</p>
<p>
<a href="#!" class="text-reset">Ayarlar</a>
</p>
<p>
<a href="#!" class="text-reset">Sipariş</a>
</p>
<p>
<a href="#!" class="text-reset">Yardım</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
İletişim
</h6>
<p><i class="fas fa-home me-3"></i> Kocaeli/Çayırova</p>
<p>
<i class="fas fa-envelope me-3"></i>
[email protected]
</p>
<p><i class="fas fa-phone me-3"></i> + ( NUMARANIZ )</p>
<p><i class="fas fa-print me-3"></i> + ( NUMARANIZ )</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2021 Copyright: by Ali for THT ™
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: 'Reggae One', cursive;
}
body{
background-image: url("excalibur.jpg");
background-size: contain;
background-repeat: no-repeat;
overflow-x: hidden;
}
#submit{
width: 80px;
color: gold;
background-color:black;
border: none;
box-shadow: 3px 3px 1px white;
}
.renk{
color: green;
background-color: green;
width: 100vw;
height: 10px;
box-shadow: 10px 10px 15px black;
transition: 1s ease;
margin-top: 15px;
}
.renk:hover{
transform:rotateY(180deg);
background-color: red;
}
nav{
margin-top: 10px;
}
nav ul{
display: flex;
justify-content:space-around;
margin-top:20px;
letter-spacing: 10px;
list-style: none;
}
a{
text-decoration: none;
color: white;
border-radius: 30px;
transition: 1s ease;
}
a:hover{
transform: rotateX(10deg) rotateY(20deg);
box-shadow: 5px 5px 10px crimson;
color: rgb(250, 250, 250);
}
.kartlar{
display: flex;
justify-content: space-around;
width: 100vw;
height: 600px;
align-items: center;
}
.kart1{
width: 300px;
height: 300px;
text-align: center;
background-image: url(csg.jpg);
background-repeat: no-repeat;
background-size: cover;
color: green;
position: relative;
transition: 1s ease;
cursor: pointer;
}
.kart1:hover{
box-shadow: 20px 10px 10px black;
transform: rotateY(180deg);
background-position:top;
}
.k1Aciklama{
position: absolute;
top:103%;
width: 100%;
border: 1px solid red;
text-align: center;
color:white;
transition: 1s ease;
}
.k1Aciklama:hover{
font-size:25px;
border-radius:10px;
color: white;
background-color: black;
box-shadow: 4px 4px 10px red;
}
.kart2{
position: relative;
color: indianred;
width: 300px;
height: 300px;
text-align: center;
background-image: url(csg.jpg);
background-repeat: no-repeat;
background-size: cover;
transition: 1s ease;
cursor: pointer;
}
.kart2:hover{
box-shadow: 20px 10px 10px black;
transform: rotateY(15deg) rotateZ(-5deg);
background-position:top;
}
.k2Aciklama{
position: absolute;
top:103%;
width: 100%;
border: 1px solid red;
text-align: center;
color:white;
transition: 1s ease;
}
.k2Aciklama:hover{
font-size:25px;
border-radius:10px;
color: white;
background-color: black;
box-shadow: 4px 4px 10px green;
}
.kart3{
position: relative;
color: orange;
width: 300px;
height: 300px;
text-align: center;
background-image: url(csg.jpg);
background-repeat: no-repeat;
background-size: cover;
transition: 1s ease;
cursor: pointer;
}
.kart3:hover{
box-shadow: 20px 10px 10px black;
transform: rotateX(5deg) rotateZ(-15deg);
background-position: top;
}
.k3Aciklama{
position: absolute;
top:103%;
width: 100%;
border: 1px solid red;
text-align: center;
color:white;
transition: 1s ease;
}
.k3Aciklama:hover{
font-size:25px;
border-radius:10px;
color: white;
background-color: black;
box-shadow: 4px 4px 10px cyan;
}
.footerim{
margin-top:90px;
}
h1{
position: absolute;
left:40%;
top:18%;
transition: 1s ease;
display: inline;
}
h1:hover{
transform: rotateY(20deg);
color: white;
}
button{
margin: 5px;
}
