Daha fazla
- Cinsiyet
- Erkek
- Meslek
- PHP Developer
CSS dosyanı bu kodlarla değiştirir misin ? Deneyip yazarsın. Yedeğini almayı unutma.
CSS:
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
* {
margin: 0px;
padding: 0px;
box-sizing: border-box
}
body{
font-family: 'Oswald', sans-serif;
background-color: black;
}
.header{
background-color: black;
width: 100%;
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 150px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background-color: #772b2b;
display: block;
margin: 5px auto;
transition: 0.4s;
}
.nav-links ul li:hover::after{
width: 100%;
}
nav .fas{
display: none;
}
.topnav {
background-color: #201c1c;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
transition: 0.6s;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #772b2b;
color: black;
}
/* Add an active class to highlight the current page */
.topnav .active {
background-color: #201c1c;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Container holding the image and the text */
.container {
position: relative;
}
.container img{
width: 100%;
}
/* Bottom right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: rgba(0,0,0,0.5);
color: white;
padding-left: 20px;
padding-right: 20px;
}
@media (max-width: 750px){
.nav-links ul li {
display: block;
}
.nav-links{
position: absolute;
background-color: #772b2b;
height: 100vh;
width: 200px;
top: 0px;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
height: 280px;
}
nav .fas{
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
nav img{
width: 120px;
}
}
.bilgi{
color: #fff;
margin-top: 50px;
margin-left: 15px;
font-size: 18px;
}
.bilgi h1{
font-size: 32px;
margin-bottom: 30px;
}
.video{
float:right;
padding:0 10px 10px 30px;
width: 40%;
}
.yazı{
color: #fff;
margin-top: 160px;
margin-left: 80px;
font-size: 15px;
}
.genel-col {
width: 550px;
}
.genel-col img{
width: 550px;
}
.genel-col a{
color: #fff;
font-size: 15px;
text-decoration: none;
transition: 0.6s;
}
.genel-col a:hover{
color: #2196FE;
}
.solbaslık, .solyazı, .solbtn{
}
.genelbakıs {
display: grid;
color: #fff;
grid-template-columns: 1fr 1fr;
margin-top: 50px;
grid-gap: 3em;
overflow: hidden;
}
.solresım{
}
@media only screen and (max-width: 1200px){
.genel-col {
width: 400px;
}
.genel-col img{
width: 400px;
}
}
@media only screen and (max-width: 950px){
.genel-col {
width: 300px;
}
.genel-col img{
width: 300px;
}
}
@media only screen and (max-width: 700px){
.genelbakıs{
grid-template-columns: 1fr;
}
}
.bayı{
margin: 100px auto;
width: 80%;
background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1)),url(../img/bayı.jpg);
height: 350px;
background-size: cover;
border-radius: 8px;
padding: 10px 0px;
}
.bayı h1{
color: #fff;
margin-bottom: 15px;
padding: 10px;
margin-left: 120px;
}
a.btn{
position: relative;
padding: 10px 30px;
margin: 0 15px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 20px;
transition: 0.5s;
overflow: hidden;
margin-left: 180px;
}
a.btn:hover{
background: #772b2b;
color: #111;
box-shadow: 0 0 50px #772b2b;
transition-delay: 0.5s;
}
a.btn:before{
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 10px;
height: 10px;
border-top: 2px solid #772b2b;
border-left: 2px solid #772b2b;
transition: 0.5s;
transition-delay: 0.5s;
}
a.btn:hover:before{
width: 100%;
height: 100%;
transition-delay: 0s;
}
a.btn::after{
content: '';
position: absolute;
bottom: 0px;
right: 0px;
width: 10px;
height: 10px;
border-bottom: 2px solid #772b2b;
border-right: 2px solid #772b2b;
transition: 0.5s;
transition-delay: 0.5s;
}
a.btn:hover:after{
width: 100%;
height: 100%;
transition-delay: 0s;
}