Merhaba bir site için son aşamaya geldim. İletişim kısmını yapıyorum gayet güzel oluyor lakin bar ekleyince sayfa bozuluyor. Yardımcı olabilir misiniz?
Yukarıdaki kodların birincisi iletişim sayfasının ikincisi navbarın kodu. Resimler ekliyorum:
@Ecmel @Vavien.
CSS:
*{
margin: 0;
padding: 0;
font-family: "montserrat",sans-serif;
box-sizing: border-box;
}
body{
background: #f1f1f1;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.contact-info{
display: flex;
width: 100%;
max-width: 1200px;
align-items: center;
justify-content: center;
padding: 0 a;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.card{
background: #2f3542;
padding: 0 20px;
margin: 0 10px;
width: calc(33% - 20px);
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
cursor: pointer;
}
.card a{
text-decoration: none;
color: #fff;
}
.card-icon{
font-size: 28px;
background: #ff6348;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px !important;
border-radius: 50%;
transition: 0.3s linear;
}
.card:hover .card-icon{
background: none;
color: #ff6348;
transform: scale(1.6);
}
.card p{
margin-top: 20px;
font-weight: 300;
letter-spacing: 2px;
max-height: 0;
opacity: 0;
transition: 0.3s linear;
}
.card:hover p{
max-height: 40px;
opacity: 1;
}
CSS:
nav{
display: flex;
height: 80px;
width: 100%;
background: #ddd;
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: #111;
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: #111;
background: #fff;
}
nav .menu-btn i{
color: #000;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"]{
display: none;
}
Yukarıdaki kodların birincisi iletişim sayfasının ikincisi navbarın kodu. Resimler ekliyorum:
@Ecmel @Vavien.
Son düzenleyen: Moderatör: