Merhaba Dostlar;
Bugün sizlere Html ve Css Kodlama Dillerini Kullanarak Web sitenize Ekleyebileceğiniz Dinamik bir Giriş Sayfası Yapımını Göstereceğim Sayfadaki Yazıları Kendinize Göre Düzenleyebilirsiniz.
İlk olarak bir Html dosyası oluşturup içine bu Html kodlarını kopyalayın,
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" re
l="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="modern.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giriş Sayfası - Mossarb</title>
</head>
<body>
<script src="modern.js"></script>
<header>
<a href="#"><div class="logo">
Mossarb
</div></a>
<div class="home">
Ana Sayfa
</div>
<div class="about">
Hakkında
</div>
<div class="contact">
İletişim
</div>
<form name="search" onsubmit="return validateForm()">
<input type="search" name="search" id="search" maxlength="50" placeholder
="Ara..." value="" />
<button type="submit" id="submitBtn">Ara</button>
</form>
</header>
<div class="photo">
<img src="http://wamsmedia.com/uploads/icerikyonetim/1-web-tasarim-yazili
m.png" alt="" id="photo1" oncontextmenu="return false;"/>
</div>
<div class="text">
<h1 id="font1">Hoşgeldiniz</h1>
<h3 id="font2">Merhaba, Ben Salih Baştan Bu Web <br/>sitesin'de Teknoloji
ve Yazılım ile ilgili <br/>Güncel Bilgiler ve Kodlama Öğrenebilirsiniz.</h3>
<button type="button" class="gradient-button">Daha Fazla</button>
</div>
</body>
</html>
Html kodlarımız bu kadardı şimdi ise Css kodlarımızı yazalım,
* {
box-sizing: border-box;
}
:root {
--color: rgb(26, 26, 26);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
background-color: #fff;
color: var(--color);
font-family: var(--font);
transition-delay: 1s;
}
header {
background-color: #fff;
color: var(--color);
border-bottom: 1px solid rgba(102, 102, 102, 0.76);
box-shadow:0 0 2px rgba(61, 61, 61, 0.842);
width: 100%;
height: 65px;
position: fixed;
top: 0;
left: 0;
right: 0;
font-family: var(--font);
transition-delay: 1s;
}
.logo {
color: #333;
font-size: 35px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica
,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: absolute;
top: 6%;
left: 2%;
transition-delay: 1s;
font-weight: 700;
}
.home {
color: #333;
font-size: 20px;
font-family: var(--font);
position: absolute;
top: 29%;
left: 20%;
transition-delay: 1s;
transition: all 0.5s;
}
.home:hover {
color: rgb(30, 120, 204);
}
.about {
color: #333;
font-size: 20px;
font-family: var(--font);
position: absolute;
top: 29%;
left: 30%;
transition-delay: 1s;
transition: all 0.5s;
}
.about:hover {
color: rgb(30, 120, 204);
}
.contact {
color: #333;
font-size: 20px;
font-family: var(--font);
position: absolute;
top: 29%;
left: 40%;
transition-delay: 1s;
transition: all 0.5s;
}
.contact:hover {
color: rgb(30, 120, 204);
}
#search {
background-color: #fff;
color: #333;
border: 1px solid rgba(95, 95, 95, 0.877);
border-radius: 13px;
outline: 0;
width: 200px;
height: 32px;
text-align: center;
position: absolute;
top: 29%;
right: 7%;
font-size: 16px;
transition-delay: 1s;
transition: all 0.5s;
}
#search:hover {
border: 1px solid rgba(77, 33, 199, 0.74);
}
#submitBtn {
background-color: rgba(77, 33, 199, 0.801);
color: #fff;
border: none;
border-radius: 13px;
outline: 0;
text-align: center;
font-size: 16px;
width: 90px;
height: 32px;
position: absolute;
top: 29%;
right: 0.2%;
transition-delay: 1s;
transition: all 1s;
}
#submitBtn:hover {
background-color: rgb(77, 33, 199);
}
#photo1 {
width: 650px;
height: 600px;
position: fixed;
top: 13%;
right: 10%;
}
#font1 {
color: rgb(26, 26, 26);
font-size: 70px;
font-weight: 700;
font-family: 'Lobster', sans-serif;
position: fixed;
top: 14%;
left: 4%;
transition: all .5s;
}
#font1:hover {
font-size: 71px;
}
#font2 {
color: rgb(26, 26, 26);
font-size: 30px;
font-weight: 10;
font-family: 'Lobster', sans-serif;
position: fixed;
top: 30%;
left: 4%;
transition: all 1s;
}
@mixin buttonLayer {
content: '';
position: fixed;
top: 40%;
left: 4%;
border: 5px solid transparent;
opacity: 0;
pointer-events: none;
border-image-slice: 1;
}
.gradient-button {
position: fixed;
z-index: 1;
display: block;
top: 60%;
left: 10%;
height: 5rem;
width: 18rem;
background: transparent linear-gradient(to top left, rgb(26,255,0,.2) 0%, rgb(102
,51,204,.2) 40%, rgb(49,128,135,.2) 100%);
border: 5px solid transparent;
border-image-source: linear-gradient(to top left, rgb(249,208,129,1) 0%, rgb(102,
51,204,.2) 40%, rgb(49,128,135,.2) 100%);
border-image-slice: 1;
transition: transform 1s;
letter-spacing: .2rem;
font-family: var(--font);
font-size: 1.25rem;
font-weight: 300;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #333;
transition: all .3s;
}
.gradient-button:hover {
width: 18.3rem;
height: 5.3rem;
background: transparent linear-gradient(to top left, rgba(26, 255, 0, 0.288)
0%, rgba(102, 51, 204, 0.404)rgba(49, 128, 135, 0.267)35,.2) 100%);
}
&::after {
@include buttonLayer;
z-index: 1;
background: transparent linear-gradient(to bottom left, rgba(249,208,129,.25) 10%
, rgba(227,2,62,.25) 30%, rgba(49,128,135,.25) 90%);
border-image-source: linear-gradient(to bottom left, rgba(249,208,129,1) 10%, rgb
a(227,2,62,1) 30%, rgba(49,128,135,1) 90%);
transition: opacity 1s;
}
&:active {
transform: scale(.96);
&::before {
opacity: 1;
}
}
&::before {
@include buttonLayer;
z-index: 0;
border-image-source: linear-gradient(to bottom left, rgba(249,208,129,1) 20%,
rgba(227,2,62,1) 40%, rgba(49,128,135,1) 70%);
transition: opacity .5s;
}
&:hover::after {
opacity: 1;
}
Css kodlarımız da bittiğine göre Artık Giriş Sayfanız Hazır Her yerde Her şekilde Kullanabilirsiniz.
Sonuç Olarak Bir Ekran Görüntüsü:
0 Yorumlar