Web Tasarım / Html - Css - Js
---
Merhaba Dostlar Bugün Sizlerle Beraber Html ve Css kullanarak Modern bir Website Giriş Sayfası Yapacağız.
Hemen Başlayalım.
İlk Olarak bir Html Dosyası Oluşturuyoruz (.html)
Daha Sonra Bir Tane de Css Dosyası Oluşturuyoruz ve Bunlar Aynı Dizinde Olmalı (.css)
---
Şimdi ise Html Dosyasının İçine
<!DOCTYPE html>
<html lang="tr-TR">
<head>
<link rel="stylesheet" href="CSS DOSYANIZIN ADI.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>Mossarb Websitesi</title>
</head>
<body>
</body>
Kurulum Kodlarını Yazın ve Devamında Body Etiketleri Arasına Şunları Yazın;
<header>
<a href="#" id="logo">L</a>
<a href="#" id="logoO">O</a>
<a href="#" id="logoG">G</a>
<a href="#" id="logoO2">O</a>
<a href="#" id="home">Ana Sayfa</a>
<a href="#" id="about">Hakkında</a>
<a href="#" id="contact">İletişim</a>
</header>
<!-- Ana Başlangıç Ekranı -->
<div class="home">
<img src="https://cdn.pixabay.com/photo/2017/07/01/16/26/design-2461957_960_
720.png" alt="">
<h1>- Yazılım Kampı -</h1>
<h2>Örnek Kısaca Tanıtım Yazısı - Kısaca Tanıtım Yazısı<br/>Örnek Kısaca Tan
ıtım Yazısı - Tanıtım Yazısı<br/>Kısa Bir Yazı</h2>
<button type="button" onclick="window.location.href = '#';" class="button">D
aha Fazla</button>
</div>
Html Kodlarımız Bu Kadardı Şimdi ise Css Kodlarımıza Geçelim.
@import url('https://fonts.googleapis.com/css2?family=Joan&family=Pacifico&displa
y=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wgh
t@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Joan&family=
Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Joan&display=swap');
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, U
buntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
box-sizing: border-box;
color:rgb(31, 31, 31);
}
:root {
--color: rgb(31, 31, 31);
}
body {
background-image: url('https://images.hdqwalls.com/download/big-sur-4k-wp-288
0x1800.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: absolute;
overflow-x: hidden;
}
a {
text-decoration: none;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
background-color: rgba(226, 226, 226, 0.459);
backdrop-filter: blur(20px);
z-index: 999;
}
header #logo {
position: absolute;
left: 2%;
top: 5%;
font-size: 34px;
font-weight: 700;
font-family: 'Pacifico';
color:rgba(31, 31, 31, 0.849);
transition: all 0.1s;
}
header #logoO {
position: absolute;
left: 4.5%;
top: 5%;
font-size: 34px;
font-weight: 700;
font-family: 'Pacifico';
color:rgba(31, 31, 31, 0.849);
transition: all 0.1s;
}
header #logoG {
position: absolute;
left: 7%;
top: 5%;
font-size: 34px;
font-weight: 700;
font-family: 'Pacifico';
color:rgba(31, 31, 31, 0.849);
transition: all 0.1s;
}
header #logoO2 {
position: absolute;
left: 9.5%;
top: 5%;
font-size: 34px;
font-weight: 700;
font-family: 'Pacifico';
color:rgba(31, 31, 31, 0.849);
transition: all 0.1s;
}
header #logo:hover,
header #logoO:hover,
header #logoG:hover,
header #logoO2:hover {
font-size: 36px;
text-shadow: 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
}
header #contact {
position: absolute;
right: 4%;
top: 32%;
font-size: 20px;
font-weight: 600;
transition: all .3s;
}
header #about {
position: absolute;
right: 12%;
top: 32%;
font-size: 20px;
font-weight: 600;
transition: all .3s;
}
header #home {
position: absolute;
right: 21.5%;
top: 32%;
font-size: 20px;
font-weight: 600;
transition: all .3s;
}
header #contact:hover,
header #about:hover,
header #home:hover {
color: rgb(21, 118, 230);
}
header #contact:hover {
right: 4.5%;
}
header #about:hover {
right: 12.5%;
}
header #home:hover {
right: 22%;
}
.home {
width: 100vw;
height: 100vh;
}
.home img {
position: absolute;
right: -8%;
top: 2%;
}
.home h1 {
position: absolute;
left: 5%;
top: 14%;
font-size: 45px;
font-weight: 700;
color: rgb(226, 226, 226);
font-family: 'Pacifico';
}
.home h2 {
position: absolute;
left: 5%;
top: 27%;
font-size: 24px;
font-weight: 400;
color: rgb(226, 226, 226);
font-family: 'Joan';
}
.home button {
position: absolute;
display: flex;
left: 5%;
top: 50%;
width: 170px;
height: 45px;
border: none;
border-radius: 20px;
outline: 0;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px;
font-weight: 600;
background-color: #2EE59D;
box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
transition: all .3s;
color: #fff;
}
.home button:hover {
top: 49%;
}
Css Kodlarımızda Bitti Şimdi ise Kodları Çalıştırabiliriz.
Örnek Görüntü:
Bu Yaptığımız Sayfada Button, Logo ve Yazılar (Ana Sayfa, Hakkında, İletişim) Hareketlidir.
Bugünlük Bu Kadar..
---
Takipte Kalın
---
0 Yorumlar