Spil3xx
Centipat
Daha fazla
- Sistem Özellikleri
- İşlemci: AMD Ryzen 5 5600X/Anakart:Asus ROG STRIX B550-F GAMING/Ekran Kartı: Palit RTX 3080Ti OC 16 GB/Depolama: NVMe M.2 SSD 1Tb/Ram: Adata XPG lancher DDr5
- Cinsiyet
- Diğer
- Meslek
- Öğrenci
HTML:
<html lang="tr">
<head>
<meta charset="UTF-8">
<title> Site Tasarımı </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
</head>
<body>
<h2>Hoşgeldin! Bu websitesi için sadece HTML ve CSS kullandım.</h2>
<p class="creator">(Şahsi bilgi olduğu için kaldırdım)</p>
<div class="container">
<div class="logo">Hoşgeldin!</div>
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">Becerilerim</a></li>
<li><a href="#">Ürünlerim</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
<div class="page-2">
<h1 class="my">Biraz Kendimden Bahsedeyim</h1>
<p class="city">(Şahsi bilgi olduğu için kaldırdım)</p>
<img src="images/person.jpg" width="300" id="personimg"/>
<p class="paragraph-1">(Şahsi bilgi olduğu için kaldırdım)</p>
<img src="images/manzara.jpg" class="manzaraİmg">
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.container {
background-color: transparent;
backdrop-filter: blur(5px);
display: flex;
height: 50;
position: fixed;
z-index: 1;
width: 1345px;
}
.logo {
font-size: 40px;
padding: 15px;
color: red;
font-weight: 600;
}
.container ul {
list-style-type: none;
font-size: 20px;
display: flex;
}
.container ul li {
display: flex;
margin: 15px;
padding: 15px;
text-align: center;
}
.container ul li a {
text-decoration: none;
color: black;
position: relative;
left: 280px;
}
.container ul li a:hover {
color: #fff;
transition: all 0.2s ease-in-out;
}
h2 {
color: yellow;
position: absolute;
top: 260px;
padding: 5px;
width: 55%;
font-size: 30px;
}
.creator {
position: absolute;
top: 350px;
color: #fff;
padding: 5px;
}
#personimg {
position: relative;
top: 1200px;
padding: 20px;
left: 5px;
}
.paragraph-1 {
width: 50%;
position: relative;
top: 880px;
left: 320px;
padding: 10px;
color: white;
}
.my {
position: relative;
top: 1200px;
text-align: center;
color: white;
}
.city{
position: absolute;
top: 1625px;
left: 70px;
color: white;
}
.manzaraİmg{
width: 1343px;
top: 1010px;
z-index: -1;
position: absolute;
}Arkadaşlar kendi kendimi geliştirmek için bir web sitesi tasarlıyorum HTML ve CSS ile. İstediğim navbarın olduğu kısımda atıyorum hakkımda kısmına bastığım zaman hakkımda yazılanlar kısmına gelsin. Nasıl yaparım bunu?
Son düzenleme:
