HTML&CSS div etiketi ile yapılan bir apartman ;

Katılım
9 Ara 2020
Konular
71
Mesajlar
255
Çözümler
1
Tepki puanı
218
Puanları
2,110
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>css deniyorum6</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
<style>
    
    .apartman{
        width: 350px;
        height:auto;
        margin: 70px auto;
    }
    .baca{
        width: 25px;
        height: 50px;
        background: #960;
        margin:0 0 0 250px;
    }
    .cati{
        width: 250px;
        height:250px;
        background: #930;
        transform: rotate(45deg);
        margin:-50px 0 0 50px;
        z-index: 1;
        position: relative;

    }
    .duvar{
        width:330px;
        height:470px;
        background:#0cf;
        margin:-125px 0;
        z-index: 2;
        position: relative;
        padding-top: 30px;
        padding-left: 20px;

    }
    .pencere1{
        width: 58px;
        height:58px;
        background: #ff9;
        border: 1px solid black;
        float: left;
        margin-bottom: 65px;
    }
    .pencere2{
        width: 58px;
        height:58px;
        background: #ff9;
        border: 1px solid black;
        float: left;
        margin-left: 65px;
        margin-bottom: 65px;

    }
    .pencere3{
        width: 58px;
        height:58px;
        background: #ff9;
        border: 1px solid black;
        float: left;
        margin-left: 65px;
        margin-bottom: 65px;

    }
    .pencere4{
        width: 58px;
        height:58px;
        background: #ff9;
        border: 1px solid black;
        float: left;
        margin-left: 52px;

    }
    .perde{
        width: 22px;
        height: 58px;
        background: white;
        border-radius: 0 0 20px 0;
        float: left;
        border-right: 1px solid black;
    }
    .perde2{
        width: 22px;
        height: 58px;
        background: white;
        border-radius: 0 0 0 20px;
        float: left;
        border-left: 1px solid black;
        margin-left: 11px;
    }
    .kapivetabela{
        width: 90px;
        height: 152px;
        float: left;
        margin-left: 50px;
        margin-top: -60px;
    }
    .tabela{
        width: 88px;
        height: 25px;
        background: white;
        border: 1px solid black;
        font: bold 10px tahoma;
        text-align: center;
    }
    .kapi{
        width: 86px;
        height: 118px;
        background:#330;
        border-left: 2px solid black;
        border-top: 2px solid black;
        border-right: 2px solid black;
        margin-top: 5px;

    }
    .kapikolu{
        width: 15px;
        height: 3px;
        background: black;
        margin-top: 59px;
        margin-left: 5px;
    }
</style>

</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <script src="" async defer></script>
    
    <div class="apartman">
        <div class="baca"></div>
        <div class="cati"></div>
        <div class="duvar">
            <div class="pencere1"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere2"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere3"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere1"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere2"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere3"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere1"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere2"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere3"><div class="perde"></div><div class="perde2"></div></div>
            <div class="pencere1"><div class="perde"></div><div class="perde2"></div></div>
            <div class="kapivetabela"><div class="tabela">KARDEŞLER APARTMANI</div><div class="kapi"><div class="kapikolu"></div></div></div>
            <div class="pencere4""><div class="perde"></div><div class="perde2"></div></div>

        </div>
    </div>

</body>

</html>

resim_2021-01-04_125004.png
 

avnnn

Genel Moderatör
Katılım
16 Şub 2020
Konular
271
Mesajlar
875
Çözümler
2
Tepki puanı
1,138
Puanları
7,910
Gayet başarılı bir kod olmuş, ellerine sağlık.
 
Katılım
18 Kas 2020
Konular
35
Mesajlar
536
Çözümler
1
Tepki puanı
262
Puanları
3,460
Bir gün bu kodları öğreneceğim.