Siteye responsive eklemek

Mert Pektaş · 4 Ocak 2024

HTML:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anasayfa</title>
    <link rel="stylesheet" href="css/css.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <script type="text/javascript" src="java/java.js"></script>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
        crossorigin="anonymous"></script>


    <div id="uyegirisidiv">
        <a href="pages/uyegirisi.html"><img id="uyegirisi" src="images/uyegirisi.png"></a>
    </div>

    <div id="sepetdiv">
        <a href="pages/sepet.html"><img id="sepet" src="images/sepet.png"></a>
    </div>

    <div id="telefondiv">
        <a href="pages/telefon.html"><img id="telefon" src="images/telicon.png"></a>

    </div>

    <div id="kutu">

        <a href="index.html"><img src="images/logo.png  "></a>

    </div>


    <!--kayan resim-->
    <div id="galeri" class="carousel slide" data-ride="carousel">
        <ul class="carousel-indicators">
            <li data-target="#galeri" data-slide-to="0" class="active"></li>
            <li data-target="#galeri" data-slide-to="1"></li>
        </ul>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="images/1.jpg" width="100%" height="100%">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="carousel-item">
                <img src="images/2.jpg" width="100%" height="100%">
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#galeri" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#galeri" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    <!--kayan resim-->

    <div id="kitap1div">
        <a href="kitapages/kitap1.html"><img id="kitap1img" src="images/kitap1.png"></a>
        <p id="kitap1fiyat">25,00TL <del style="color: grey;">30,00TL</del></p>
        <button onclick="uyari()" id="kitap1button" type="button" style="background-color: orange; color: white;"><img
                width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>


    <div id="kitap2div">
        <a href="kitapages/kitap2.html"><img id="kitap2img" src="images/kitap2.png"></a>
        <p id="kitap2fiyat">28,90TL <del style="color: grey;">34,00</del></p>
        <button onclick="uyari()" id="kitap2button" type="button" style="background-color: orange; color: white;"><img
                width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>



    <div id="kitap3div">
        <a href="kitapages/kitap3.html"><img id="kitap3img" src="images/kitap3.png"></a>
        <p id="kitap3fiyat">39,00TL <del style="color: grey;">44,00</del></p>
        <button onclick="uyari()" id="kitap3button" type="button" style="background-color: orange; color: white;"><img
                width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>

    <div id="kitap4div">
        <a href="kitapages/kitap4.html"><img id="kitap4img" src="images/kitap4.png"></a>
        <p id="kitap4fiyat">29,00TL <del style="color: grey;">34,00</del></p>
        <button onclick="uyari()" id="kitap4button" type="button" style="background-color: orange; color: white;"><img
                width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>


    <div id="kitap5div">
        <a href="kitapages/kitap5.html"><img id="kitap5img" src="images/kitap5.png"></a>
        <p id="kitap5fiyat">32,00TL <del style="color: grey;">38,00</del></p>
        <button onclick="uyari()" id="kitap5button" type="button" style="background-color: orange; color: white;"><img
                width="15px" height="100%" src="images/sepet2.png"> Sepete Ekle</button>
    </div>

    <br>
    <br>




</body>

</html>

CSS:

#kutu {
    margin-top: -1%;
    margin-bottom: 1%;
}

#uyegirisi {
    width: 10%;
    height: 100%;
}

#sepet {
    width: 35%;
    height: 100%;
}

#telefon {
    width: 12%;
    height: 100%;
}

#uyegirisidiv {

    margin-top: 1%;
    margin-left: 70%;
}

#sepetdiv {
    margin-top: -3%;
    margin-left: 91%;
}

#telefondiv {
    margin-top: -3%;
    margin-left: 81%;
}

#kitap1div {
    margin-left: 10%;
    margin-top: 3%;

}

#kitap1img {
    width: 11%;
    height: 100%;

}

#kitap1fiyat {
    padding-left: 1%;
}

#kitap1button {
    border-radius: 16px;
    padding-left: 1%;
    padding-right: 2%;
}

#kitap2div {
    margin-left: 29%;
    margin-top: -20%;
}

#kitap2img {
    width: 14%;
    height: 100%;
}

#kitap2fiyat {
    padding-left: 2%;
}

#kitap2button {
    border-radius: 16px;
    padding-left: 2%;
    padding-right: 2%;
}

#kitap3div {
    margin-left: 48%;
    margin-top: -19%;
}

#kitap3img {
    width: 19%;
    height: 100%;
}

#kitap3fiyat {
    padding-left: 5%;
}

#kitap3button {
    border-radius: 16px;
    padding-left: 3%;
    padding-right: 3%;
}

#kitap4div {
    margin-left: 66%;
    margin-top: -19%;
}

#kitap4img {
    width: 28%;
    height: 100%;
}

#kitap4fiyat {
    padding-left: 6%;
}

#kitap4button {
    border-radius: 16px;
    padding-left: 4%;
    padding-right: 4%;
}

#kitap5div {
    margin-left: 84%;
    margin-top: -19%;
}

#kitap5img {
    width: 60%;
    height: 100%;
}

#kitap5fiyat {
    padding-left: 12%;
}

#kitap5button {
    border-radius: 16px;
    padding-left: 9%;
    padding-right: 9%;
}

Siteye responsive eklemek

Mert Pektaş

Hectopat