/*
$darkgreen:#1db954;
$lightgreen:#1ed760;
*/
body {
margin:0;
padding:0;
font-family:Circular,Helvetica,Arial,sans-serif;
background-image:url("https://www.xmple.com/wallpaper/blue-pink-gradient-linear-1920x1080-c2-ff69b4-87ceeb-a-15-f-14.svg");
background-size:cover;
overflow-x:hidden;
}
h1 {
color:white;
font-size:80px;
cursor:default;
}
h2 {
font-size:3em;
}
h3 {
font-size:1.5em;
}
p {
font-size:18px;
line-height: 25px;
}
td {
width:50%;
}
nav ul {
width:100%;
top:0;
position:fixed;
margin:0;
padding:5px;
background-color:rgba(21,21,21,.65);
height:70px;
}
nav ul li:not(.image){
float:right;
list-style-type:none;
margin:15px 10px 10px 10px;
padding:12.5px;
height:25px;
color:white;
font-size:14px;
font-family: Circular,Helvetica,Arial,sans-serif;
}
nav ul li a {
color:white;
text-decoration:none;
}
nav ul li a.login {
color:rgb(220,220,220);
}
nav ul li:first-child {
float:left;
}
nav ul li.rightend {
margin-right:50px;
}
nav ul li img {
height:40px;
margin:17.5px;
margin-left:75px;
}
nav ul li a {
cursor:pointer;
transition-duration:250ms
}
nav ul li a:hover {
transition-duration:250ms;
color:#1e60d7;
}
nav ul li a div.list-border {
cursor:default;
width:1px;
height:25px;
background-color:white;
margin-top:-5px;
}
div.header {
width:100%;
height:440px;
text-align:center;
padding:215px 5px 5px 5px;
margin:0;
}
.arrow {
font-family:'IBM Plex Serif', serif;
color:white;
font-size:68px;
display:inline-block;
position:absolute;
top:230px;
cursor:pointer;
}
.right-arrow{
float:right;
right:50px;
}
.left-arrow {
float:left;
left:50px;
}
.button {
font-size: 14px;
letter-spacing:2px;
color:white;
padding:15px 50px;
width:250px;
border-radius: 90px;
margin:10px;
cursor:pointer;
transition-duration:500ms;
}
.btn-green {
background-color:#1d54b9;
border:3px #1d54b9 solid;
}
.btn-white {
background-color:rgba(0,0,0,0);
border:3px white solid;
}
.btn-green:hover {
transition-duration:500ms;
background-color:#1e60d7;
border-color:#1e60d7;
}
.btn-white:hover {
transition-duration:500ms;
background-color:white;
color:black;
}
table {
width:100%;
height:auto;
font-family: 'Source Sans Pro', sans-serif;
}
table.about {
background-color:white;
padding:50px 75px;
}
table.easy {
color:white;
padding:50px 75px;
}
table.account {
background-color:white;
padding:50px 75px;
}
.phone {
background-color:rgba(255,255,255,.5);
width:315px;
height:500px;
border-radius:30px;
border-style:solid;
border-color:white;
border-width:3px 3px 0 3px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
margin-bottom:-120px;
}
.album {
height:555px;
width:555px;
padding:0;
margin:0;
box-shadow:0px 0px 2px black;
float:right;
}
.account-list {
list-style-type:disc;
}
.platform li, .device li {
transition-duration:250ms;
color:rgb(220,220,220);
float:left;
margin:15px;
}
.platform li b {
color:#1d54b9;
cursor:pointer;
}
.platform li:first-child, .device li:first-child{
list-style-type: none;
display:block;
margin-left:-25px;
}
.platform li b:hover {
transition-duration:250ms;
color:#1e60d9;
}
.device li b {color:black;}
Nasıl Mobil Uyumlu Hale Getirebilirim? |
4 Mesajlar | 666 Okunma | ||
- Üyelik 06.03.2017
- Yaş/Cinsiyet 26 / E
- Meslek Öğrenci
- Konum KKTC
- Ad Soyad V** S**
- Mesajlar 3084
- Beğeniler 1387 / 910
- Ticaret 29, (%100)
css kodları aşağıdaki gibi bunu nasıl mobil uyumlu hale getirebilirim
- Üyelik 29.10.2016
- Yaş/Cinsiyet 33 / E
- Meslek Öğretmen
- Konum Konya
- Ad Soyad O** K**
- Mesajlar 1116
- Beğeniler 499 / 498
- Ticaret 16, (%100)
@media (max-width:600px){
kodları buraya yazacaksınız
}
600px alanını dilediğin gibi değiştirerek farklı ekran boyutlarında farklı css komutları yazabilirsin. Bunu canli olarak test ederek kendine göre en uygun font büyüklüğü, listeleme ve hidden değerlerini verebilirsin.
kodları buraya yazacaksınız
}
600px alanını dilediğin gibi değiştirerek farklı ekran boyutlarında farklı css komutları yazabilirsin. Bunu canli olarak test ederek kendine göre en uygun font büyüklüğü, listeleme ve hidden değerlerini verebilirsin.
- Üyelik 29.10.2016
- Yaş/Cinsiyet 33 / E
- Meslek Öğretmen
- Konum Konya
- Ad Soyad O** K**
- Mesajlar 1116
- Beğeniler 499 / 498
- Ticaret 16, (%100)
Kod yapında gördüğüm kadarıyla sabit değerler verilmiş bunlar sıkıntı oluşturuyordu. width ve height değerleri px cinsinden verilmiş. Em ya da percent kullanılabilir. Ölçü birimleri hakkında bilgin yoksa linkini verdiğim makalede farklarını görebilirsin. Kolay gelsin.
http://www.gozdeberberoglu.com/2009/02/17/em-px-pt/
http://www.gozdeberberoglu.com/2009/02/17/em-px-pt/
Konuyu toplam 6 kişi okuyor. (0 kullanıcı ve 6 misafir)