Websitesi telefonda kötü gözüküyor

Hüsnü_Çoban · 7 Ekim 2023

Site telefonda acayip kötü gözüküyor, bunu nasıl düzeltirim? Telefonlara özel site mi yapmam gerek? "View port" ayarlarını değiştirerek denedim ancak hiç bir şey değişmedi.

HTML:

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=120px, initial-scale=1.0">
  <link rel="stylesheet" href="index.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
  <title>Seku Turları</title>
</head>
<header style="box-shadow: 0 0 2px 3px #C2C2C2; border-radius: 22px; padding: 5px;">
  <h1 id="main_label">Seku Turları</h1>
  <i class="fa-solid fa-sailboat fa-lg" style="color: white;"></i>
  <ul style="list-style: none; display: inline; " id="list_model">
    <li class="list_model" style="display: inline; vertical-align: middle;">
      <a class="list_model hover_class" id="nav_margin" href="index.html">Anasayfa</a>
    </li>
    <li class="list_model">
      <a class="list_model hover_class" href="bio.html" style="margin-right: 15px; margin-left: 15px;">Hakkımızda</a>
    </li>
    <li class="list_model">
      <a class="list_model hover_class" href="#">Turlarımız</a>
    </li>
  </ul>
</header>

<body style="background-image: url(4k\ photo.jpg); background-size: contain">
  <h1 id="main_page_label">
    Tatilinizin keyfini çıkarın!
  </h1>
  <h2 id="main_page_as_label">
    Her şeyi bize bırakın Seku Turları size yardımcı olacak.
  </h2>
  <div id="main_div">
    <div style="text-align: center;"> <br><br>
      <i class="fa-regular fa-face-smile-beam" style="font-size: 35px;"></i>
      <h2 id="bottom_label" style="font-size: 25px;">
        Son derece verimli bir tur
      </h2>
      <p style="color: black; font-size: 17px; font-family: 'AR One Sans', sans-serif;" id="bottom_label_p">Müşterilerimize özel hizmet ile son derece keyifli bir tur...</p>
      <br><br>
      <i class="fa-brands fa-slack" style="font-size: 35px;"></i>
      <h2>
        Yüksek verim ile kesintisiz eğlence!
      </h2>
      <p>
        Kesintisiz müzik ile kesintisiz eğlence!
      </p> <br><br>
      <i class="fa-solid fa-utensils" style="font-size: 35px;"></i>
      <h2>
        Leziz yemekler
      </h2>
      <p>
        Leziz yemeklerimizle doygun bir gezintinin keyfini çıkarın.
      </p>
    </div>
  </div> <br>
  <div style="background-color: white; display:inline-flex; border-radius: 16px;">
    <img src="tekne2.png" alt="Tekne fotoğrafı" style="max-width: 75%; height: auto; object-fit: cover; border-radius: 16px;">
    <section class="delikarga">
      <header>
        <iconify-icon icon="iconoir:sea-and-sun" style="font-size: 45px;  margin-top: 19px; "></iconify-icon>    
      </header>
      <ul>
        <li>
          <h3 class="main2_list_it">Teknemiz 10 farklı adayı gezmektedir.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">1 Kahvaltı yapacağımız ada, 1 öğle yemeği Adasıyla beraber toplam 8 ada da mola vereceğiz.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Yolda gördüğünüz adaların tarihi hakkında bilgi verilir.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Adaları gezdiğimiz bu süre zarfında tatlı ikramında bulunulur.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Bebekler için yüzme simiti desteğimiz vardır.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Alkollü içeceklerimiz bulunmaktadır.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Tekne içi hoparlörde popüler pop müziği bulunmaktadır.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Günlere özel köpük partisi bulunmaktadır.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Teknemiz, çevre dostu bir yaklaşım benimsemekte olup, güneş enerjisi ile çalışan özel bir sistemle donatılmıştır.</h3>
        </li>
        <li>
          <h3 class="main2_list_it">Alkollü içeceklerimizin yanı sıra, deneyimli barmenlerimiz tarafından hazırlanan özel kokteylleri de denemenizi tavsiye ederiz.</h3>
        </li>
      </ul>
      <a href="#" id="main2_link">Daha fazla bilgi için tıklayın...</a>
    </section>
  </div>
  <footer style="margin-top: 25px;">
  <div style="margin-left: 480px;">
  <div style="display: inline-block;">
        <i class="fa-solid fa-house" id="footer_icon1"></i>    
        <p id="footer_p1">Ana sayfa</p>
  </div>
  <div style="display: inline-block;">
      <i class="fa-brands fa-instagram" id="footer_icon2"></i>  
      <p id="footer_p2">Instagram hesabımız</p>
  </div>
  <div style="display: inline-block;">
    <i class="fa-brands fa-whatsapp" id="footer_icon3"></i>
    <p id="footer_p3">WhatsApp</p>
  </div>
  <div style="display: inline-block;">
    <i class="fa-solid fa-phone" id="footer_icon4"></i>
    <p id="footer_p4">0555 555 55 55</p>
  </div>
  <div style="display: inline-block;">
    <i class="fa-solid fa-sailboat" id="footer_icon5"></i>
    <p id="footer_p5">Turlarımız</p>
  </div>
  <div style="display: inline-block;">
    <i class="fa-solid fa-closed-captioning" id="footer_icon6"></i>
    <p id="footer_p6">Koşullar</p>
  </div>
</div>
  </footer>
  <!-- Kodu baştan aşağıya tamamen tasarlayan Ahmet Efe Korkmaz'dır, siteyi sahibinden satın almadı iseniz daha yüksek maliyetten almış olabilir ayrıca dolandırılmış olabilirsiniz. İletişime geçmek için: 05435227817-->
</body>
</html>

CSS:

#main_label{
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-size: 30px;
    text-align: left;
    display: inline;
    color: white;
    vertical-align: middle;
   
}

.list_model{
  text-decoration: none;
  display:inline;
  font-family: 'Roboto', sans-serif;
    color: white;
    vertical-align:middle;
   

}

#nav_margin{
    margin-left: 1160px;
    font-family: 'Roboto', sans-serif;
    color: white;
    vertical-align: middle;
}


#main_page_label{
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 85px;
    text-align: center;
    margin-top: 250px;
    transition: text-shadow 0.3s ease;
}

#main_page_as_label{
    color: white;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    font-size: 20px;
    text-shadow: 2px 2px 2px black;
    margin-bottom: 480px;
}


#main_page_label:hover{
    text-shadow: 1px 1px 2px white;
}

#main_div{
    border: 2px solid white;
    background-color: white;
    border-radius: 16px;
    font-family: 'Raleway', sans-serif;
   
}




#bottom_label_p{
    margin-left: 22px;
}



#tour_check{
    border: 2px solid white;
    border-radius: 16px;
   
}

.hover_class{
    transition: background-color 0.3s ease;
    border-radius: 16px;
    padding: 5px;
 
}

.hover_class:hover{
    background-color: #279EFF;
}


.delikarga header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
 
  .metin2_div {
    margin-left: 5px;
    font-family: 'Roboto', sans-serif;
  }
 
  footer {
    padding: 20px 0;
    height: 100px;
    align-self: flex-end    ;
    border-radius: 16px;
    background: linear-gradient(160deg, #001F3F, #279EFF);
    color: #ffffff;
  }
   

#footer_list{
    list-style: none;
    text-decoration: none;
    color: white;
    font-family: 'Poppins', sans-serif;
}


#footer_p1{
    color: transparent;
    transition: color 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-left: 70px;
}

#footer_icon1{
    font-size: 55px;
    margin-top: 15px;
    margin-left: 75px;
}


#footer_icon1:hover + #footer_p1{
    color: white;
}

#footer_p2{
    color: transparent;
    transition: color 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-left: 15px;
 
}

#footer_icon2{
    font-size: 55px;
    margin-left: 65px;
 
}


#footer_icon2:hover + #footer_p2{
    color: white;
}


#footer_p3{
    color: transparent;
    transition: color 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-left: 5px;
 
}

#footer_icon3{
    font-size: 55px;
    margin-left: 20px;
 
}


#footer_icon3:hover + #footer_p3{
    color: white;
}

#footer_p4{
    color: transparent;
    transition: color 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-left: 20px;
 
}

#footer_icon4{
    font-size: 45px;
    margin-left: 55px;
    vertical-align: center;
 
}


#footer_icon4:hover + #footer_p4{
    color: white;
}

#footer_p5{
    color: transparent;
    transition: color 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-left: 36px;
 
}

#footer_icon5{
    font-size: 45px;
    margin-left: 45px;
    vertical-align: center;
 
}

#footer_icon5:hover + #footer_p5{
    color: white;
}

#footer_icon6:hover + #footer_p6{
    color: white;
}

#footer_p6{
    color: transparent;
    transition: color 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-left: 32px;
 
}

#footer_icon6{
    font-size: 45px;
    margin-left: 35px;
    vertical-align: center;
 
}


#footer_icon6:hover + #footer_p6{
    color: white;
}

.main2_list_it{
    font-family: 'Inter', sans-serif;
}

#main2_link{
    text-decoration: none;
    margin-left: 125px;
    margin-bottom: 15px;
}

artik 72 yasindayim · 7 Ekim 2023

Responsive kavramını araştırabilirsiniz.

spriggan · 7 Ekim 2023

Hüsnü_Çoban dedi:

Site telefonda acayip kötü gözüküyor, bunu nasıl düzeltirim? Telefonlara özel site mi yapmam gerek? "View port" ayarlarını değiştirerek denedim ancak hiçbir şey değişmedi.

HTML:

<!DOCTYPE html>
<html lang="tr">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=120px, initial-scale=1.0">
 <link rel="stylesheet" href="index.css">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/>
 <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
 <title>Seku Turları</title>
</head>
<header style="box-shadow: 0 0 2px 3px #C2C2C2; border-radius: 22px; padding: 5px;">
 <h1 id="main_label">Seku Turları</h1>
 <i class="fa-solid fa-sailboat fa-lg" style="color: white;"></i>
 <ul style="list-style: none; display: inline; " id="list_model">
 <li class="list_model" style="display: inline; vertical-align: middle;">
 <a class="list_model hover_class" id="nav_margin" href="index.html">Anasayfa</a>
 </li>
 <li class="list_model">
 <a class="list_model hover_class" href="bio.html" style="margin-right: 15px; margin-left: 15px;">Hakkımızda</a>
 </li>
 <li class="list_model">
 <a class="list_model hover_class" href="#">Turlarımız</a>
 </li>
 </ul>
</header>

<body style="background-image: url(4k\ photo.jpg); background-size: contain">
 <h1 id="main_page_label">
 Tatilinizin keyfini çıkarın!
 </h1>
 <h2 id="main_page_as_label">
 Her şeyi bize bırakın Seku Turları size yardımcı olacak.
 </h2>
 <div id="main_div">
 <div style="text-align: center;"> <br><br>
 <i class="fa-regular fa-face-smile-beam" style="font-size: 35px;"></i>
 <h2 id="bottom_label" style="font-size: 25px;">
 Son derece verimli bir tur
 </h2>
 <p style="color: black; font-size: 17px; font-family: 'AR One Sans', sans-serif;" id="bottom_label_p">Müşterilerimize özel hizmet ile son derece keyifli bir tur...</p>
 <br><br>
 <i class="fa-brands fa-slack" style="font-size: 35px;"></i>
 <h2>
 Yüksek verim ile kesintisiz eğlence!
 </h2>
 <p>
 Kesintisiz müzik ile kesintisiz eğlence!
 </p> <br><br>
 <i class="fa-solid fa-utensils" style="font-size: 35px;"></i>
 <h2>
 Leziz yemekler
 </h2>
 <p>
 Leziz yemeklerimizle doygun bir gezintinin keyfini çıkarın.
 </p>
 </div>
 </div> <br>
 <div style="background-color: white; display:inline-flex; border-radius: 16px;">
 <img src="tekne2.png" alt="Tekne fotoğrafı" style="max-width: 75%; height: auto; object-fit: cover; border-radius: 16px;">
 <section class="delikarga">
 <header>
 <iconify-icon icon="iconoir:sea-and-sun" style="font-size: 45px; margin-top: 19px; "></iconify-icon> 
 </header>
 <ul>
 <li>
 <h3 class="main2_list_it">Teknemiz 10 farklı adayı gezmektedir.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">1 Kahvaltı yapacağımız ada, 1 öğle yemeği Adasıyla beraber toplam 8 ada da mola vereceğiz.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Yolda gördüğünüz adaların tarihi hakkında bilgi verilir.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Adaları gezdiğimiz bu süre zarfında tatlı ikramında bulunulur.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Bebekler için yüzme simiti desteğimiz vardır.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Alkollü içeceklerimiz bulunmaktadır.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Tekne içi hoparlörde popüler pop müziği bulunmaktadır.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Günlere özel köpük partisi bulunmaktadır.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Teknemiz, çevre dostu bir yaklaşım benimsemekte olup, güneş enerjisi ile çalışan özel bir sistemle donatılmıştır.</h3>
 </li>
 <li>
 <h3 class="main2_list_it">Alkollü içeceklerimizin yanı sıra, deneyimli barmenlerimiz tarafından hazırlanan özel kokteylleri de denemenizi tavsiye ederiz.</h3>
 </li>
 </ul>
 <a href="#" id="main2_link">Daha fazla bilgi için tıklayın...</a>
 </section>
 </div>
 <footer style="margin-top: 25px;">
 <div style="margin-left: 480px;">
 <div style="display: inline-block;">
 <i class="fa-solid fa-house" id="footer_icon1"></i> 
 <p id="footer_p1">Ana sayfa</p>
 </div>
 <div style="display: inline-block;">
 <i class="fa-brands fa-instagram" id="footer_icon2"></i> 
 <p id="footer_p2">Instagram hesabımız</p>
 </div>
 <div style="display: inline-block;">
 <i class="fa-brands fa-whatsapp" id="footer_icon3"></i>
 <p id="footer_p3">WhatsApp</p>
 </div>
 <div style="display: inline-block;">
 <i class="fa-solid fa-phone" id="footer_icon4"></i>
 <p id="footer_p4">0555 555 55 55</p>
 </div>
 <div style="display: inline-block;">
 <i class="fa-solid fa-sailboat" id="footer_icon5"></i>
 <p id="footer_p5">Turlarımız</p>
 </div>
 <div style="display: inline-block;">
 <i class="fa-solid fa-closed-captioning" id="footer_icon6"></i>
 <p id="footer_p6">Koşullar</p>
 </div>
</div>
 </footer>
 <!-- Kodu baştan aşağıya tamamen tasarlayan Ahmet Efe Korkmaz'dır, siteyi sahibinden satın almadı iseniz daha yüksek maliyetten almış olabilir ayrıca dolandırılmış olabilirsiniz. İletişime geçmek için: 05435227817-->
</body>
</html>

CSS:

#main_label{
 text-align: center;
 font-family: 'Lato', sans-serif;
 font-size: 30px;
 text-align: left;
 display: inline;
 color: white;
 vertical-align: middle;

}

.list_model{
 text-decoration: none;
 display:inline;
 font-family: 'Roboto', sans-serif;
 color: white;
 vertical-align:middle;

}

#nav_margin{
 margin-left: 1160px;
 font-family: 'Roboto', sans-serif;
 color: white;
 vertical-align: middle;
}

#main_page_label{
 color: white;
 font-family: 'Roboto', sans-serif;
 font-size: 85px;
 text-align: center;
 margin-top: 250px;
 transition: text-shadow 0.3s ease;
}

#main_page_as_label{
 color: white;
 font-family: 'Open Sans', sans-serif;
 text-align: center;
 font-size: 20px;
 text-shadow: 2px 2px 2px black;
 margin-bottom: 480px;
}

#main_page_label:hover{
 text-shadow: 1px 1px 2px white;
}

#main_div{
 border: 2px solid white;
 background-color: white;
 border-radius: 16px;
 font-family: 'Raleway', sans-serif;

}

#bottom_label_p{
 margin-left: 22px;
}

#tour_check{
 border: 2px solid white;
 border-radius: 16px;

}

.hover_class{
 transition: background-color 0.3s ease;
 border-radius: 16px;
 padding: 5px;

}

.hover_class:hover{
 background-color: #279EFF;
}

.delikarga header {
 display: flex;
 flex-direction: column;
 align-items: center;
 }

 .metin2_div {
 margin-left: 5px;
 font-family: 'Roboto', sans-serif;
 }

 footer {
 padding: 20px 0;
 height: 100px;
 align-self: flex-end ;
 border-radius: 16px;
 background: linear-gradient(160deg, #001F3F, #279EFF);
 color: #ffffff;
 }

#footer_list{
 list-style: none;
 text-decoration: none;
 color: white;
 font-family: 'Poppins', sans-serif;
}

#footer_p1{
 color: transparent;
 transition: color 0.3s ease;
 font-family: 'Roboto', sans-serif;
 margin-left: 70px;
}

#footer_icon1{
 font-size: 55px;
 margin-top: 15px;
 margin-left: 75px;
}

#footer_icon1:hover + #footer_p1{
 color: white;
}

#footer_p2{
 color: transparent;
 transition: color 0.3s ease;
 font-family: 'Roboto', sans-serif;
 margin-left: 15px;

}

#footer_icon2{
 font-size: 55px;
 margin-left: 65px;

}

#footer_icon2:hover + #footer_p2{
 color: white;
}

#footer_p3{
 color: transparent;
 transition: color 0.3s ease;
 font-family: 'Roboto', sans-serif;
 margin-left: 5px;

}

#footer_icon3{
 font-size: 55px;
 margin-left: 20px;

}

#footer_icon3:hover + #footer_p3{
 color: white;
}

#footer_p4{
 color: transparent;
 transition: color 0.3s ease;
 font-family: 'Roboto', sans-serif;
 margin-left: 20px;

}

#footer_icon4{
 font-size: 45px;
 margin-left: 55px;
 vertical-align: center;

}

#footer_icon4:hover + #footer_p4{
 color: white;
}

#footer_p5{
 color: transparent;
 transition: color 0.3s ease;
 font-family: 'Roboto', sans-serif;
 margin-left: 36px;

}

#footer_icon5{
 font-size: 45px;
 margin-left: 45px;
 vertical-align: center;

}

#footer_icon5:hover + #footer_p5{
 color: white;
}

#footer_icon6:hover + #footer_p6{
 color: white;
}

#footer_p6{
 color: transparent;
 transition: color 0.3s ease;
 font-family: 'Roboto', sans-serif;
 margin-left: 32px;

}

#footer_icon6{
 font-size: 45px;
 margin-left: 35px;
 vertical-align: center;

}

#footer_icon6:hover + #footer_p6{
 color: white;
}

.main2_list_it{
 font-family: 'Inter', sans-serif;
}

#main2_link{
 text-decoration: none;
 margin-left: 125px;
 margin-bottom: 15px;
}

Bootstrap ile responsive site yapımı diye YouTube'da araştır.

Gonuldagi · 7 Ekim 2023

W3school.com html bolumunu bastan sona guzelce calis yok ben ugrasamam dersen sayfayi otomatik turkceye cevir duyarli html bumunu oku orneklere bak.

Websitesi telefonda kötü gözüküyor

Ayrıntılı düzenleme

Hüsnü_Çoban

Hectopat

artik 72 yasindayim

Hectopat

spriggan

Hectopat

Gonuldagi

Kilopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz