Sitelerinizde kullanabileceğiniz "Portfolyo" kodlaması işlevsel olarak iş görür.
HTML,Css Tabanlıdır.
Nasıl Gözüküyor ;
İndex Kaynak Kodları ;
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TurkHackTeam</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="card card1">
<div class="container">
<img src="tasarım.jpg" alt="tasarım">
</div>
<div class="details">
<h3>Tasarım</h3>
<p>Fotoğraf düzenlemesi,fotoğraf katologlama işlemleri, fotoğraf efektleme
Medya-gazete editörlüğü, afiş-poster editörlüğü, kitap-dergi editörlüğü
Tabela tasarım,logo tasarım,katolog tasarım, Basın-yayın tasarım
Web tasarım, mobil tasarım,info grafik tasarım,grafik tasarım</p>
</div>
</div>
<div class="card card2">
<div class="container">
<img src="moderasyon.jpg" alt="Moderasyon">
</div>
<div class="details">
<h3>Moderasyon</h3>
<p>Türk Hack Team Moderasyon Ekibinin görevi; forumun temel düzenini sağlamak,
düzenli olarak foruma içerik üretmektir.
Temel düzendeki amaç, forumda yeri yanlış olan konuları doğru yere taşımak, kural dışı olan içerikleri çöp kısmına almak veya silmek, kuralları bozan üyeleri tespit edip uyarmak veya cezai işlemi uygulamaktır. Düzenli olarak içerik üretme kısmı ise günümüz siber alemine uygun içerikleri bulup araştırmak ve bunları makale halinde paylaşmaktır. Bunların yanı sıra forum içerisindeki aktifliği korumakta moderasyonun görevleri arasında yer almaktadır.</p>
</div>
</div>
<div class="card card3">
<div class="container">
<img src="tht.jpg" alt="tht">
</div>
<div class="details">
<h3>TurkHackteam</h3>
<p>TürkHackTeam Türk ulusunun siber güvenlik alanında yeterli kabiliyet
ve beceriye kavuşabilmesi adına çalışır. Hacking'in kişilere ya da
toplumlarla zarar vermek adına değil, Türk ulusuna katkı sunmak amacıyla
yapabileceğini insanlarla aşılamak amacını taşımaktadır... s
</p>
</div>
</div>
</div>
</body>
</html>Style.css Kaynak Kodları ;
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #151320;
height: 100vh;
display: grid;
place-items: center center;
font-family: 'poppins';
}
.cards{
display: grid;
grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
padding: 20px;
grid-gap: 40px;
}
.card{
background-color: #1c1b29;
border-radius: 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.18);
}
.container{
position: relative;
clip-path: polygon(0 0,100% 0, 100% 85%, 0 100%);
}
img{
width: 100%;
display: block;
border-radius: 20px 20px 0 0;
}
.container:after{
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 20px 20px 0 0;
opacity: 0.7;
}
.details{
padding: 20px 10px;
}
.details>h3{
color: #fff;
font-weight: 600;
font-size: 18px;
margin: 10px 0 15px 0;
}
.details>p{
color: #a0a0a0;
font-size: 15px;
line-height: 30px;
font-weight: 400;
}Responsive tasarım nedir ?
Responsive web tasarımı yani duyarlı web tasarımı, kullanıcı web sitenizi bir bilgisayarda görüntülüyorken büyük ekrana, bir akıllı telefonda görüntülüyorken küçük ekrana uyum sağlamasıdır.
Basit olarak "bilmeyenler için" portfolyo web tasarımını sizlere gösterdim iyi forumlar dilerim.
