Merhaba bir takımımız var ve bir website yapıyorum. Sitede takımlarım bölümü oluşturdum bir video izleyerek bir şeyler yaptım lakin kutucuklar yetersiz kalıyor. Bunu nasıl 5 tane yapabilirim?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/team.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="styles/index.css">
<link rel="icon" href="images/lgg.jfif" type="image/x-icon" />
<title>TeknoloD</title>
</head>
<body>
<nav>
<div class="logo">Teknolo<span>D</span></div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a class="active" href="takım.html">Takım</a></li>
<li><a href="photogallery.html">Galeri</a></li>
<li><a href="hakkında.html">Hakkında</a></li>
<li><a href="iletişim.html">İletişim</a></li>
</ul>
</nav>
<div class="container">
<div class="header">
<h1>Team TeknoloD</h1>
</div>
<div class="sub-container">
<div class="teams">
<img src="https://cdn.pixabay.com/photo/2012/04/26/19/43/profile-42914_960_720.png" alt="">
<div class="name">İsim</div>
<div class="desig">Designer</div>
<div class="about"> Kişi bilgileri.
</div>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="teams">
<img src="https://cdn.pixabay.com/photo/2012/04/26/19/43/profile-42914_960_720.png" alt="">
<div class="name">İsim </div>
<div class="desig">Software</div>
<div class="desig">Captain</div>
<div class="about">Kişi bilgileri.
</div>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
<div class="teams">
<img src="https://cdn.pixabay.com/photo/2012/04/26/19/43/profile-42914_960_720.png" alt="">
<div class="name">İsim</div>
<div class="desig">Mechanic</div>
<div class="about">Kişi bilgileri </div>
<div class="social-links">
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href=""><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
nav{
display: flex;
height: 80px;
width: 100%;
background: #f5f5f5;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo{
color: #012E40;
font-size: 35px;
font-weight: 600;
}
nav .logo span{
color: #015958;
}
nav ul{
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li{
margin: 0 5px;
}
nav ul li a{
color: #000;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
color: #000;
background: #fff;
}
nav .menu-btn i{
color: #000;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
@media (max-width: 1000px){
nav{
padding: 0 40px 0 50px;
}
}
@media (max-width: 920px) {
nav .menu-btn i{
display: block;
}
#click:checked ~ .menu-btn i:before{
content: "\f00d";
}
nav ul{
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul{
left: 0;
}
nav ul li{
width: 100%;
margin: 40px 0;
}
nav ul li a{
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a{
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover{
background: none;
color: cyan;
}
}
/* NAVBAR FINISHED */
.section{
width: 100%;
min-height: 100vh;
background-color: #ddd;
}
.container {
text-align: center;
background: #ddd;
width: 100%;
height: 100vh;
}
.header {
padding-top: 30px;
color: #033B3D;
font-size: 20px;
margin: auto;
line-height: 50px;
}
.sub-container {
max-width: 1200px;
margin: auto;
padding: 30px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.teams {
margin: 10px;
padding: 22px;
max-width: 30%;
cursor: pointer;
transition: 0.4s;
box-sizing: border-box;
}
.teams:hover {
background: #fff;
border-radius: 12px;
}
.teams img {
width: 200px;
height: 200px;
}
.name {
padding: 12px;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
}
.desig {
font-style: italic;
color: #888;
}
.about {
margin: 20px 0;
font-weight: lighter;
color: #4e4e4e;
}
.social-links {
margin: 14px;
}
.social-links a {
display: inline-block;
height: 30px;
width: 30px;
transition: .4s;
}
.social-links a:hover {
transform: scale(1.5);
}
.social-links a i {
color: #000;
}
@media screen and (max-width: 600px) {
.teams {
max-width: 100%;
}
}
/* TAKIM FINISHED */
