Daha fazla
- Sistem Özellikleri
- Macbook Air M2 13"
- Cinsiyet
- Erkek
- Meslek
- Basın Danışmanı
Merhaba, kendi web sitem için dışarıdan siteme kod aldım ancak daha önce görmediğim şeyler kodda olduğu için kendi başıma müdahale edip batırmak istemedim.
Tabloda sadece ana sayfa ve geri var ancak ben buna yönler eklemek istiyorum. Yukarıdan aşağıya ortada ana sayfa, sola bakan bana ulaşın, sağa bakan görseller, sola bakan diplomalar, sağa bakan hedefler ve en altta sola bakan geri yapmaya çalışıyorum, nasıl yapmalıyım?
Tabloda sadece ana sayfa ve geri var ancak ben buna yönler eklemek istiyorum. Yukarıdan aşağıya ortada ana sayfa, sola bakan bana ulaşın, sağa bakan görseller, sola bakan diplomalar, sağa bakan hedefler ve en altta sola bakan geri yapmaya çalışıyorum, nasıl yapmalıyım?
HTML:
<div class="navigate">
<div id="direk">
<div id="right">
<a class="sign-link" href="anasayfa.html">Anasayfa</a>
<div id="right-arrow"></div>
</div>
<div id="left">
<a class="sign-link" href="#" onclick="goBack()">Geri</a>
<div id="left-arrow"></div>
</div>
</div>
</div>
CSS:
.navigate{
height: 750px;
width: 750px;
margin-left:1000px;
margin-top: 50px;
padding: auto;
}
.sign-link{
text-decoration: none;
color: white;
font-family: 'arciform',monospace;
}
#direk{
margin: auto;
border-radius: 1vw 1vw 0 0;
height: 80vh;
width: 5.5vw;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
transform: translateY(160px);
min-width: 45px;
background-color: #EB5800;
font-size: 1.5em;
@media (max-height: 400px){
transform: unset;
height: 400px;
}
}
#right{
height: 15.2vh;
transform: translate(-40px, 50px);
width: 24.5vw;
min-width: 200px;
background-color: crimson;
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 10px 50px 50px 10px;
border: 3px outset white;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#left{
@media (min-width: 768px){
transform: translate(-13vw, 80px) ;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
perspective: 2000;
transform: translate(-100px, 80px) ;
width: 26.9vw;
min-width: 200px;
height: 14.2vh;
min-height: 90px;
background-color: teal;
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 50px 10px 10px 50px;
border: 3px outset white;
}
body, html{
height: 100%;
overflow: hidden;
}
Son düzenleyen: Moderatör:
