0.0_lucas
Centipat
Daha fazla
- Sistem Özellikleri
- İşlemci; i7 12700K
RAM; Kingston Fury Beast 32 GB 3200 MHz DDR4 CL16
Ana Kart; ASUS B660M - E D4 3600MHz
Ekran Kartı; RX6750XT 12GB
Sıvı Soğutucu; MSI MAG CORELIQUID P360 360 mm İşlemci Sıvı Soğutucu
- Cinsiyet
- Erkek
- Meslek
- Meslek Lisesi Yazılım Öğrencisi
Footeri bir türlü alta alamadım sorun nedir acaba?
[CODE=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sektörler</title>
<link rel="stylesheet" href="sektors.css">
</head>
<body>
<h1>Kullanıldığı Sektörler</h1>
<a class="custom-btn btn-1" href="imalat/imalat.html"><span>Devam Et</span><span>İmalat</span></a>
<a class="custom-btn btn-2" href="saglik/saglik.html"><span>Devam Et</span><span>Sağlık</span></a>
<a class="custom-btn btn-3" href="aydinlatma/aydinlatma.html"><span>Devam Et</span><span>Aydınlatma</span></a>
<a class="custom-btn btn-4" href="ekrantv/ekrantv.html"><span><p>Devam Et</p></span><span>Ekran & Televizyon</span></a>
<footer> SGFIJKLSGFSLDIHJFGLIYUSDJFGSDIJFGJDS </footer>
</body>
</html>[/CODE]
CSS:
body {
background: #000;
color: #fff;
}
h1 {
position: relative;
text-align: center;
font-size: 50px;
font-family: 'Megrim', cursive;
text-shadow:
0 0 5px #0bf4f3,
0 0 10px #0bf4f3,
0 0 20px #0bf4f3,
0 0 40px #0bf4f3,
0 0 80px #0bf4f3;
top: 130px;
}
.btn-1{
color: #a7b3b3;
position: relative;
top: 300px;
left: 600px;
border:none;
width: 130px;
height: 40px;
line-height: 40px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-1 span {
display: block;
position: absolute;
width: 130px;
height: 40px;
border: 1px solid #0bf4f3;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-1 span:nth-child(1) {
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-1 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-1:hover span:nth-child(1) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-1:hover span:nth-child(2) {
background: #000;
color: #000;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.btn-2{
color: #a7b3b3;
position: relative;
top: 300px;
left: 800px;
border:none;
width: 130px;
height: 40px;
line-height: 40px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-2 span {
display: block;
position: absolute;
width: 130px;
height: 40px;
border: 1px solid #0bf4f3;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-2 span:nth-child(1) {
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-2 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-2:hover span:nth-child(1) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-2:hover span:nth-child(2) {
background: #000;
color: #000;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.btn-3{
color: #a7b3b3;
position: relative;
top: 300px;
left: 1000px;
border:none;
width: 130px;
height: 40px;
line-height: 40px;
-webkit-perspective: 230px;
perspective: 230px;
}
.btn-3 span {
display: block;
position: absolute;
width: 130px;
height: 40px;
border: 1px solid #0bf4f3;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-3 span:nth-child(1) {
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-3 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-3:hover span:nth-child(1) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-3:hover span:nth-child(2) {
background: #000;
color: #000;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.btn-4{
color: #a7b3b3;
position: relative;
top: 300px;
left: 1200px;
border:none;
width: 200px;
height: 40px;
-webkit-perspective: 230px;
perspective: 230px;
}
p{
line-height: 5px;
}
.btn-4 span {
display: block;
position: absolute;
width: 130px;
height: 40px;
border: 1px solid #0bf4f3;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
margin:0;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-4 span:nth-child(1) {
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-4 span:nth-child(2) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-transform-origin: 50% 50% -20px;
-moz-transform-origin: 50% 50% -20px;
transform-origin: 50% 50% -20px;
}
.btn-4:hover span:nth-child(1) {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.btn-4:hover span:nth-child(2) {
background: #000;
color: #000;
box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
footer {
text-align: center;
padding: 3px;
background-color: DarkSalmon;
color: white;
}