Web sitesi nasıl daha güzel hale getirilir?

ErrorCorrection · 5 Mart 2023

muhammetaksu dedi:
Footer'ı daha iyi yapabilirsin, navbar ile uyumlu olursa güzel olur. Mesela kutuların yazı kısımlarının background color'ı olmasa da kutunun shadowu kutuyu ön plana çıkarsa çok daha iyi görünür.

Genel olarak gayet güzel olmuş eline sağlık, hevesinin olup oyun oynamak yerine bununla uğraşman harika. Umarın ilerde JavaScript de öğrenir sayfalarına fonksiyonalite katarsın.

Sana önerim GitHub'da clone projeler mevcut. Onlardan birini seç kopyasını yapmaya çalış. Yapamadığın yerler olacak onları da araştırırken iyice öğreneceksin.

Bazı yerlerde oynadım ve bazı yerleri yeniledim. Bakarsanız çok mutlu olurum. Teşekkrüler şimdiden

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <style type="text/css" media="screen">
        html{
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
}

body{
    font-family:system-ui ;
    max-height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    }
*{box-sizing: border-box;
    margin: 0;
    }
.navbar{
    background-color: white;
    padding: 10px 0 0 10px;
    }
.main-div__item a{
    text-decoration: none;
    color: #4E6E81;
    font-weight: bold;
    font-size: 15px;
    font-family: sans-serif;
    }
.main-div{
    display: inline-block;
    width: calc(100% - 150px);
    text-align: right;
    }
.main-div__items{
    margin: 0;
    padding: 0;
    list-style: none;
    } 
.main-div__item{
    display: inline-block;
    margin-left: 10px;
    box-sizing: border-box;
    }
.main_logo{
    color: #40513B;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    }
.main-div__item a:hover{
    color: #BE6DB7;
    }
.main-div__item::before{
    content: "\2022";
    }
    .main-div__item-login a{
        color: #fff;
        background-color: #3795BD;
        border: 2px solid white;
        padding: 7px 12px;
        /*  border-radius: 10px 30px;   */
        border-radius: 10px;
    }.main-div__item-login a:hover{
        color:#3795BD;
        background-color: white;
        border-color: #3795BD;
    }.main-div__item-login::before{
        content: none;
    }.section{
        height: 650px;
        width: 100%;
        background-image: url(cinema.jpg);
        background-position: bottom;
        background-attachment: fixed;
        background-size: cover;
    }.section h2{
        text-align:left;
        color: #E8D5C4;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        font-size: 25px;
        user-select: none;
        transition:1s;
        padding: 20px;
    }.section h2:hover{
        background-color: rgba(66, 5, 68, 0.24);
        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;
    }
.main-div__header{
    margin: 0 25%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}.main-row{
    display: inline-block;
    width: 25%;
    padding: 30px;
    margin: 15px;
}.main{
    text-align: center;
}.main h3{
    color: #804674;
}.main-texts h3{
    margin-bottom: 30px;
}.main-row p{
    letter-spacing: 0.5px;
}.main-div__header p{
    margin-top: 20px;
}.photo{
    margin-left: 15%;
    display: inline-block;
    width: 30%;
    height: 400px;
    background-image: url(manwoman.jpg); 
    background-repeat: no-repeat;
    background-position: center top;

  
}.aside{
    display: inline-block;
    width: calc(100% - 60%);
    background-color: #DBE2EF;
    min-height: 400px;
    vertical-align: top;
}.product{
    margin-top: 50px;
}.aside h2{
    font-family: system-ui;
    width: 100%;
    text-align: center;
    margin-top: 12%;
}.aside p{
    margin-left: 30px;
    margin-top: 40px;
    text-align: left;
    padding: 5px;
    font-family: system-ui;
    letter-spacing: 0.7px;
    word-spacing: 1px;
}.aside .btn{
    margin-left: 30px;
    background-color: #F38181;
    padding: 10px;
    font-size: 20px;
    color: white;
}.aside .btn a{
    text-decoration: none;
    color: white;
}.opt{
    display: inline-block;
    width: 25%;
    min-height: 200px;
    height: 300px;
    background-color: rgba(168, 169, 178, 0.38);
    text-align: center;
    float: left;
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    text-overflow: ellipsis;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: box-shadow .6s;
}.opt:hover{
    box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px;
}


.premium{
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;
}.premium .title{
    margin-top: 100px;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
} ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}ul li{
    padding-bottom: 10px;
}.opt h3{
    margin-bottom: 30px;
}.price{
    margin-bottom: 20px;
}.buy{
    cursor: pointer;
    border: 3px solid white;
    background-color: #EB455F;
    width: 100px;
    height: 50px;
}.buy a{
    text-decoration: none;
    color: white;
}.rec-pack{
    background-color: #EDF1D6;
    color: tomato;
    padding: 8px;
    border-radius: 5px;

}.standart-pack{
    background-color: #3A98B9;
    color: white;
}.yukari{
            background-color: #898121;
            color: white;
            text-decoration:none;
            padding: 15px;
            border-radius: 100%;
            position: fixed;
            bottom: 20px;
            right:20px;
}.numbers{
    user-select:none;
    margin-top:50px;
    display:inline-block;
    height:200px;
    width: 100%;
    background-color:transparent;
}.film{
    float: left;
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    position: relative;
    transition: .5s;
}.dizi{
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    float: left;
    position: relative;
    transition: .5s;


}.belgesel{
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    float: left;
    position: relative;
    transition: .5s;


}.film-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.film-sayi span{
    font-size: 30px;
}.dizi-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.dizi-sayi span{
    font-size: 30px;
}.belgesel-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.cards h2{
    text-align: center;
    margin: 30px 0 30px 0;
}.cards{
    margin-left: 5%;
    margin-right:5%;
    margin-bottom: 50px;
    display: inline-block;
}
.card-1{
    margin-right:8%;
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    position:relative;
    transition: .2s;
    top: 0;
}
.card-2{
    margin-right:8%;
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    position:relative;
    transition: .2s;
    top:0;
}
.card-3{
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    transition: .2s;
    position:relative;
    top:0;
}
.card-1-resim{
    height: 405px;
    background-image: url(https://m.media-amazon.com/images/M/MV5BYTRhNjcwNWQtMGJmMi00NmQyLWE2YzItODVmMTdjNWI0ZDA2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_.jpg);
    background-size:cover;
    transition:.3s;

}.card-1-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-1-text-d{
    margin: 30px 0 30px 20px;
}.card-1-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
}


.card-2-resim{
    height: 405px;
    background-image: url(https://turkcealtyazi.org/images/poster/0121765.jpg);
    background-size:cover;

}.card-2-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-2-text-d{
    margin: 30px 0 30px 20px;
}.card-2-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
}

.card-3-resim{
    height: 405px;
    background-image: url(https://i.pinimg.com/originals/0b/aa/17/0baa17eed74ca8756652ffa02c020020.jpg);
    background-size:cover;

}.card-3-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-3-text-d{
    margin: 30px 0 30px 20px;
}.card-3-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
    transition: .5s;
}.card-3-button a:hover{
    padding: 20px;
    text-align: center;

}.card-3:hover{
    top:-20px;
}.card-2:hover{
    top:-20px;
}.card-1:hover .card-1-resim{
    height: 75%;
}.facebook swg{
    font-size: 10px;
}.bottom-bar{
    height: 100px;
    width: 100%;
    background-color: #3A98B9;
    position: relative;
    bottom: 0;
    left:0;
}.bottom-bar-name{
    position: relative;
    top: 50%;
    width: 50%;
    transform: translate(-50% -50%);
    float: left;
}.bottom-bar-href{
    position: relative;
    top: 50%;
    width: 50%;
    transform: translate(-50% -50%);
    float: left;
}.bottom-bar-href a{
    margin-left: 20px;
    text-decoration:none;
    color: white;
}
    </style>

</head>
<body>
<header class="main-header">
<div class="navbar">
    <a href="Css-sites.html" class="main_logo">GetMovie.com</a>
    <div class="main-div">
    <ul class="main-div__items">
        <li class="main-div__item"><a href="Css-sites.html">Home</a></li>
        <li class="main-div__item"><a href="#">Get Movie</a></li>
        <li class="main-div__item"><a href="#">Say Hello</a></li>
        <li class="main-div__item main-div__item-login"><a href="about.html">About</a></li>
    </ul>
    </div>
</div>
</header>
<div class="section">
<h2>Welcome <br>
What would you like to watch today?</h2>
</div>
<main class="main">
    <div class="main-div__header">
        <h3>How it works</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>

    <div class = "main-texts">
        <div class = "main-row">
        
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
        
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
        
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</main>
<main class="product">
    <div class="photo"></div>
    <div class="aside">
        <h2>Get All Dresses</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
        <button class="btn"><a href="https://www.zara.com/tr/en/man-suits-l808.html" target="_blank">
            Buy Now
        </a></button>
    </div>
    <main class="premium">
              
        <h3 class="title">
            Become a Premium
        </h3>
        <div class="free opt">
            <h3>Free</h3>
            <h4 class="price">Free</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The All Series</li>
                <li>Dowloand 1080p</li>
            </ul>   
            <button class="buy"><a href="#">Be Free User</a></button>

        </div>


        <div class="Recommended opt standart-pack">
            <h3 class="rec-pack">Standart</h3>
            <h4 class="price">9.99 $</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The Some Series</li>
            </ul>   

            <button class="buy"><a href="#">Be Standart User</a></button>


        </div>


        <div class="Premium opt">
                        <h3>Premium</h3>
                <h4 class="price">19.99 $</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The All Series</li>
                <li>Dowloand 1080p</li>
            </ul>   
            <button class="buy"><a href="#">Be Premium User</a></button>

        </div>
    </main>
</main>
<div class="numbers">
    <div class="film">
        <div class="film-sayi">
            <h3>Film sayısı</h3>
            <span>715</span>
        </div>
    </div>



    <div class="dizi">
        <div class="dizi-sayi">
            <h3>Dizi sayısı</h3>
            <span>196</span>
        </div>
    </div>



    <div class="belgesel">
        <div class="belgesel-sayi">
            <h3> Üye Sayısı</h3>
            <span>15.000</span>
        </div>
    </div>
</div>

<div class="cards">
    <h2>Movie Cards</h2>
    <div class="card-1">
        <div class="card-1-resim"></div>
        <div class="card-1-text">
            <div class="card-1-text-n">Star wars I</div>
            <div class="card-1-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-1-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
    <div class="card-2">
                <div class="card-2-resim"></div>
        <div class="card-2-text">
            <div class="card-2-text-n">Star wars II</div>
            <div class="card-2-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-2-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
    <div class="card-3">
                <div class="card-3-resim"></div>
        <div class="card-3-text">
            <div class="card-3-text-n">Star wars III</div>
            <div class="card-3-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-3-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
</div>

<div class="bottom-bar">
    <div class="bottom-bar-name">
        © 2023 Error Correction INC.
    </div>
    <div class="bottom-bar-href">
        <a href="">Facebook</a>
        <a href="">Twitter</a>
        <a href="">İnstagram</a>
        <a href="">Linkedin</a>
    </div>
</div>
</body>
</html>

@Deva Bulmam @serhatcandev

Deva Bulmam · 5 Mart 2023

Daha güzel hocam öncekine göre. Bence şahane.

muhammetaksu · 5 Mart 2023

ErrorCorrection dedi:

Bazı yerlerde oynadım ve bazı yerleri yeniledim. Bakarsanız çok mutlu olurum. Teşekkrüler şimdiden

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <style type="text/css" media="screen">
        html{
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
}

body{
    font-family:system-ui ;
    max-height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    }
*{box-sizing: border-box;
    margin: 0;
    }
.navbar{
    background-color: white;
    padding: 10px 0 0 10px;
    }
.main-div__item a{
    text-decoration: none;
    color: #4E6E81;
    font-weight: bold;
    font-size: 15px;
    font-family: sans-serif;
    }
.main-div{
    display: inline-block;
    width: calc(100% - 150px);
    text-align: right;
    }
.main-div__items{
    margin: 0;
    padding: 0;
    list-style: none;
    } 
.main-div__item{
    display: inline-block;
    margin-left: 10px;
    box-sizing: border-box;
    }
.main_logo{
    color: #40513B;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    }
.main-div__item a:hover{
    color: #BE6DB7;
    }
.main-div__item::before{
    content: "\2022";
    }
    .main-div__item-login a{
        color: #fff;
        background-color: #3795BD;
        border: 2px solid white;
        padding: 7px 12px;
        /*  border-radius: 10px 30px;   */
        border-radius: 10px;
    }.main-div__item-login a:hover{
        color:#3795BD;
        background-color: white;
        border-color: #3795BD;
    }.main-div__item-login::before{
        content: none;
    }.section{
        height: 650px;
        width: 100%;
        background-image: url(cinema.jpg);
        background-position: bottom;
        background-attachment: fixed;
        background-size: cover;
    }.section h2{
        text-align:left;
        color: #E8D5C4;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        font-size: 25px;
        user-select: none;
        transition:1s;
        padding: 20px;
    }.section h2:hover{
        background-color: rgba(66, 5, 68, 0.24);
        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;
    }
.main-div__header{
    margin: 0 25%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}.main-row{
    display: inline-block;
    width: 25%;
    padding: 30px;
    margin: 15px;
}.main{
    text-align: center;
}.main h3{
    color: #804674;
}.main-texts h3{
    margin-bottom: 30px;
}.main-row p{
    letter-spacing: 0.5px;
}.main-div__header p{
    margin-top: 20px;
}.photo{
    margin-left: 15%;
    display: inline-block;
    width: 30%;
    height: 400px;
    background-image: url(manwoman.jpg); 
    background-repeat: no-repeat;
    background-position: center top;

  
}.aside{
    display: inline-block;
    width: calc(100% - 60%);
    background-color: #DBE2EF;
    min-height: 400px;
    vertical-align: top;
}.product{
    margin-top: 50px;
}.aside h2{
    font-family: system-ui;
    width: 100%;
    text-align: center;
    margin-top: 12%;
}.aside p{
    margin-left: 30px;
    margin-top: 40px;
    text-align: left;
    padding: 5px;
    font-family: system-ui;
    letter-spacing: 0.7px;
    word-spacing: 1px;
}.aside .btn{
    margin-left: 30px;
    background-color: #F38181;
    padding: 10px;
    font-size: 20px;
    color: white;
}.aside .btn a{
    text-decoration: none;
    color: white;
}.opt{
    display: inline-block;
    width: 25%;
    min-height: 200px;
    height: 300px;
    background-color: rgba(168, 169, 178, 0.38);
    text-align: center;
    float: left;
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    text-overflow: ellipsis;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: box-shadow .6s;
}.opt:hover{
    box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px;
}


.premium{
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;
}.premium .title{
    margin-top: 100px;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
} ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}ul li{
    padding-bottom: 10px;
}.opt h3{
    margin-bottom: 30px;
}.price{
    margin-bottom: 20px;
}.buy{
    cursor: pointer;
    border: 3px solid white;
    background-color: #EB455F;
    width: 100px;
    height: 50px;
}.buy a{
    text-decoration: none;
    color: white;
}.rec-pack{
    background-color: #EDF1D6;
    color: tomato;
    padding: 8px;
    border-radius: 5px;

}.standart-pack{
    background-color: #3A98B9;
    color: white;
}.yukari{
            background-color: #898121;
            color: white;
            text-decoration:none;
            padding: 15px;
            border-radius: 100%;
            position: fixed;
            bottom: 20px;
            right:20px;
}.numbers{
    user-select:none;
    margin-top:50px;
    display:inline-block;
    height:200px;
    width: 100%;
    background-color:transparent;
}.film{
    float: left;
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    position: relative;
    transition: .5s;
}.dizi{
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    float: left;
    position: relative;
    transition: .5s;


}.belgesel{
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    float: left;
    position: relative;
    transition: .5s;


}.film-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.film-sayi span{
    font-size: 30px;
}.dizi-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.dizi-sayi span{
    font-size: 30px;
}.belgesel-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.cards h2{
    text-align: center;
    margin: 30px 0 30px 0;
}.cards{
    margin-left: 5%;
    margin-right:5%;
    margin-bottom: 50px;
    display: inline-block;
}
.card-1{
    margin-right:8%;
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    position:relative;
    transition: .2s;
    top: 0;
}
.card-2{
    margin-right:8%;
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    position:relative;
    transition: .2s;
    top:0;
}
.card-3{
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    transition: .2s;
    position:relative;
    top:0;
}
.card-1-resim{
    height: 405px;
    background-image: url(https://m.media-amazon.com/images/M/MV5BYTRhNjcwNWQtMGJmMi00NmQyLWE2YzItODVmMTdjNWI0ZDA2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_.jpg);
    background-size:cover;
    transition:.3s;

}.card-1-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-1-text-d{
    margin: 30px 0 30px 20px;
}.card-1-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
}


.card-2-resim{
    height: 405px;
    background-image: url(https://turkcealtyazi.org/images/poster/0121765.jpg);
    background-size:cover;

}.card-2-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-2-text-d{
    margin: 30px 0 30px 20px;
}.card-2-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
}

.card-3-resim{
    height: 405px;
    background-image: url(https://i.pinimg.com/originals/0b/aa/17/0baa17eed74ca8756652ffa02c020020.jpg);
    background-size:cover;

}.card-3-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-3-text-d{
    margin: 30px 0 30px 20px;
}.card-3-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
    transition: .5s;
}.card-3-button a:hover{
    padding: 20px;
    text-align: center;

}.card-3:hover{
    top:-20px;
}.card-2:hover{
    top:-20px;
}.card-1:hover .card-1-resim{
    height: 75%;
}.facebook swg{
    font-size: 10px;
}.bottom-bar{
    height: 100px;
    width: 100%;
    background-color: #3A98B9;
    position: relative;
    bottom: 0;
    left:0;
}.bottom-bar-name{
    position: relative;
    top: 50%;
    width: 50%;
    transform: translate(-50% -50%);
    float: left;
}.bottom-bar-href{
    position: relative;
    top: 50%;
    width: 50%;
    transform: translate(-50% -50%);
    float: left;
}.bottom-bar-href a{
    margin-left: 20px;
    text-decoration:none;
    color: white;
}
    </style>

</head>
<body>
<header class="main-header">
<div class="navbar">
    <a href="Css-sites.html" class="main_logo">GetMovie.com</a>
    <div class="main-div">
    <ul class="main-div__items">
        <li class="main-div__item"><a href="Css-sites.html">Home</a></li>
        <li class="main-div__item"><a href="#">Get Movie</a></li>
        <li class="main-div__item"><a href="#">Say Hello</a></li>
        <li class="main-div__item main-div__item-login"><a href="about.html">About</a></li>
    </ul>
    </div>
</div>
</header>
<div class="section">
<h2>Welcome <br>
What would you like to watch today?</h2>
</div>
<main class="main">
    <div class="main-div__header">
        <h3>How it works</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>

    <div class = "main-texts">
        <div class = "main-row">
        
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
        
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
        
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</main>
<main class="product">
    <div class="photo"></div>
    <div class="aside">
        <h2>Get All Dresses</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
        <button class="btn"><a href="https://www.zara.com/tr/en/man-suits-l808.html" target="_blank">
            Buy Now
        </a></button>
    </div>
    <main class="premium">
              
        <h3 class="title">
            Become a Premium
        </h3>
        <div class="free opt">
            <h3>Free</h3>
            <h4 class="price">Free</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The All Series</li>
                <li>Dowloand 1080p</li>
            </ul>   
            <button class="buy"><a href="#">Be Free User</a></button>

        </div>


        <div class="Recommended opt standart-pack">
            <h3 class="rec-pack">Standart</h3>
            <h4 class="price">9.99 $</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The Some Series</li>
            </ul>   

            <button class="buy"><a href="#">Be Standart User</a></button>


        </div>


        <div class="Premium opt">
                        <h3>Premium</h3>
                <h4 class="price">19.99 $</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The All Series</li>
                <li>Dowloand 1080p</li>
            </ul>   
            <button class="buy"><a href="#">Be Premium User</a></button>

        </div>
    </main>
</main>
<div class="numbers">
    <div class="film">
        <div class="film-sayi">
            <h3>Film sayısı</h3>
            <span>715</span>
        </div>
    </div>



    <div class="dizi">
        <div class="dizi-sayi">
            <h3>Dizi sayısı</h3>
            <span>196</span>
        </div>
    </div>



    <div class="belgesel">
        <div class="belgesel-sayi">
            <h3> Üye Sayısı</h3>
            <span>15.000</span>
        </div>
    </div>
</div>

<div class="cards">
    <h2>Movie Cards</h2>
    <div class="card-1">
        <div class="card-1-resim"></div>
        <div class="card-1-text">
            <div class="card-1-text-n">Star wars I</div>
            <div class="card-1-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-1-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
    <div class="card-2">
                <div class="card-2-resim"></div>
        <div class="card-2-text">
            <div class="card-2-text-n">Star wars II</div>
            <div class="card-2-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-2-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
    <div class="card-3">
                <div class="card-3-resim"></div>
        <div class="card-3-text">
            <div class="card-3-text-n">Star wars III</div>
            <div class="card-3-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-3-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
</div>

<div class="bottom-bar">
    <div class="bottom-bar-name">
        © 2023 Error Correction INC.
    </div>
    <div class="bottom-bar-href">
        <a href="">Facebook</a>
        <a href="">Twitter</a>
        <a href="">İnstagram</a>
        <a href="">Linkedin</a>
    </div>
</div>
</body>
</html>

@Deva Bulmam

Gayet iyi. Çok büyük sorunlar yok. Hizalamaları kontrol edip düzeltsen daha iyi olur.

Mesela grid ve flex sistemini öğrensen bu konuda çok iyi sonuçlar alabilirsin. Araştırmaya devam

.

MUNIORR · 5 Mart 2023

Site virüslü gibi girmeyin.

ErrorCorrection · 5 Mart 2023

muhammetaksu dedi:
Gayet iyi. Çok büyük sorunlar yok. Hizalamaları kontrol edip düzeltsen daha iyi olur.

Mesela grid ve flex sistemini öğrensen bu konuda çok iyi sonuçlar alabilirsin. Araştırmaya devam .

Flex ve grid'i öğrenmedim maalesef. O yüzden onları kullanmadım.

MUNIORR dedi:
Site virüslü gibi girmeyin.

Sadece HTML ve CSS var nasıl virüs olsun?

MUNIORR dedi:
Site virüslü gibi girmeyin.

Ayiryeten sadece bir proje yaptım çoğu yazıyı tam yazmadım eğer gördüysen. Sadece taslak.

Deva Bulmam dedi:
Daha güzel hocam öncekine göre. Bence şahane.

Alt tarafı şöyle yaptım.

serhatcandev · 5 Mart 2023

ErrorCorrection dedi:

Bazı yerlerde oynadım ve bazı yerleri yeniledim. Bakarsanız çok mutlu olurum. Teşekkrüler şimdiden

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <style type="text/css" media="screen">
        html{
    scroll-behavior: smooth;
    padding: 0;
    margin: 0;
}

body{
    font-family:system-ui ;
    max-height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    }
*{box-sizing: border-box;
    margin: 0;
    }
.navbar{
    background-color: white;
    padding: 10px 0 0 10px;
    }
.main-div__item a{
    text-decoration: none;
    color: #4E6E81;
    font-weight: bold;
    font-size: 15px;
    font-family: sans-serif;
    }
.main-div{
    display: inline-block;
    width: calc(100% - 150px);
    text-align: right;
    }
.main-div__items{
    margin: 0;
    padding: 0;
    list-style: none;
    }
.main-div__item{
    display: inline-block;
    margin-left: 10px;
    box-sizing: border-box;
    }
.main_logo{
    color: #40513B;
    text-decoration: none;
    font-size: 15px;
    font-weight: bolder;
    }
.main-div__item a:hover{
    color: #BE6DB7;
    }
.main-div__item::before{
    content: "\2022";
    }
    .main-div__item-login a{
        color: #fff;
        background-color: #3795BD;
        border: 2px solid white;
        padding: 7px 12px;
        /*  border-radius: 10px 30px;   */
        border-radius: 10px;
    }.main-div__item-login a:hover{
        color:#3795BD;
        background-color: white;
        border-color: #3795BD;
    }.main-div__item-login::before{
        content: none;
    }.section{
        height: 650px;
        width: 100%;
        background-image: url(cinema.jpg);
        background-position: bottom;
        background-attachment: fixed;
        background-size: cover;
    }.section h2{
        text-align:left;
        color: #E8D5C4;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        font-size: 25px;
        user-select: none;
        transition:1s;
        padding: 20px;
    }.section h2:hover{
        background-color: rgba(66, 5, 68, 0.24);
        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;
    }
.main-div__header{
    margin: 0 25%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 50px;
}.main-row{
    display: inline-block;
    width: 25%;
    padding: 30px;
    margin: 15px;
}.main{
    text-align: center;
}.main h3{
    color: #804674;
}.main-texts h3{
    margin-bottom: 30px;
}.main-row p{
    letter-spacing: 0.5px;
}.main-div__header p{
    margin-top: 20px;
}.photo{
    margin-left: 15%;
    display: inline-block;
    width: 30%;
    height: 400px;
    background-image: url(manwoman.jpg);
    background-repeat: no-repeat;
    background-position: center top;

 
}.aside{
    display: inline-block;
    width: calc(100% - 60%);
    background-color: #DBE2EF;
    min-height: 400px;
    vertical-align: top;
}.product{
    margin-top: 50px;
}.aside h2{
    font-family: system-ui;
    width: 100%;
    text-align: center;
    margin-top: 12%;
}.aside p{
    margin-left: 30px;
    margin-top: 40px;
    text-align: left;
    padding: 5px;
    font-family: system-ui;
    letter-spacing: 0.7px;
    word-spacing: 1px;
}.aside .btn{
    margin-left: 30px;
    background-color: #F38181;
    padding: 10px;
    font-size: 20px;
    color: white;
}.aside .btn a{
    text-decoration: none;
    color: white;
}.opt{
    display: inline-block;
    width: 25%;
    min-height: 200px;
    height: 300px;
    background-color: rgba(168, 169, 178, 0.38);
    text-align: center;
    float: left;
    margin: 40px;
    padding: 20px;
    border-radius: 20px;
    text-overflow: ellipsis;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transition: box-shadow .6s;
}.opt:hover{
    box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px;
}


.premium{
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;
}.premium .title{
    margin-top: 100px;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
} ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}ul li{
    padding-bottom: 10px;
}.opt h3{
    margin-bottom: 30px;
}.price{
    margin-bottom: 20px;
}.buy{
    cursor: pointer;
    border: 3px solid white;
    background-color: #EB455F;
    width: 100px;
    height: 50px;
}.buy a{
    text-decoration: none;
    color: white;
}.rec-pack{
    background-color: #EDF1D6;
    color: tomato;
    padding: 8px;
    border-radius: 5px;

}.standart-pack{
    background-color: #3A98B9;
    color: white;
}.yukari{
            background-color: #898121;
            color: white;
            text-decoration:none;
            padding: 15px;
            border-radius: 100%;
            position: fixed;
            bottom: 20px;
            right:20px;
}.numbers{
    user-select:none;
    margin-top:50px;
    display:inline-block;
    height:200px;
    width: 100%;
    background-color:transparent;
}.film{
    float: left;
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    position: relative;
    transition: .5s;
}.dizi{
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    float: left;
    position: relative;
    transition: .5s;


}.belgesel{
    display: inline-block;
    height: 200px;
    width: 33.3%;
    background-color: #EB455F;
    float: left;
    position: relative;
    transition: .5s;


}.film-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.film-sayi span{
    font-size: 30px;
}.dizi-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.dizi-sayi span{
    font-size: 30px;
}.belgesel-sayi{
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left:50%;
    transform:translate(-50% ,-50%);
    text-align: center;
    transition: .5s;
}.cards h2{
    text-align: center;
    margin: 30px 0 30px 0;
}.cards{
    margin-left: 5%;
    margin-right:5%;
    margin-bottom: 50px;
    display: inline-block;
}
.card-1{
    margin-right:8%;
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    position:relative;
    transition: .2s;
    top: 0;
}
.card-2{
    margin-right:8%;
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    position:relative;
    transition: .2s;
    top:0;
}
.card-3{
    float: left;
    width:27.5%;
    height: 750px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    transition: .2s;
    position:relative;
    top:0;
}
.card-1-resim{
    height: 405px;
    background-image: url(https://m.media-amazon.com/images/M/MV5BYTRhNjcwNWQtMGJmMi00NmQyLWE2YzItODVmMTdjNWI0ZDA2XkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_.jpg);
    background-size:cover;
    transition:.3s;

}.card-1-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-1-text-d{
    margin: 30px 0 30px 20px;
}.card-1-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
}


.card-2-resim{
    height: 405px;
    background-image: url(https://turkcealtyazi.org/images/poster/0121765.jpg);
    background-size:cover;

}.card-2-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-2-text-d{
    margin: 30px 0 30px 20px;
}.card-2-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
}

.card-3-resim{
    height: 405px;
    background-image: url(https://i.pinimg.com/originals/0b/aa/17/0baa17eed74ca8756652ffa02c020020.jpg);
    background-size:cover;

}.card-3-text-n{
    margin: 30px 0 30px 20px;
    font-weight: bolder;
    font-size: 20px;
}.card-3-text-d{
    margin: 30px 0 30px 20px;
}.card-3-button a{
    margin: 30px 0 30px 20px;
    text-decoration: none;
    padding:7px;
    background-color: #EB455F;
    color:white;
    transition: .5s;
}.card-3-button a:hover{
    padding: 20px;
    text-align: center;

}.card-3:hover{
    top:-20px;
}.card-2:hover{
    top:-20px;
}.card-1:hover .card-1-resim{
    height: 75%;
}.facebook swg{
    font-size: 10px;
}.bottom-bar{
    height: 100px;
    width: 100%;
    background-color: #3A98B9;
    position: relative;
    bottom: 0;
    left:0;
}.bottom-bar-name{
    position: relative;
    top: 50%;
    width: 50%;
    transform: translate(-50% -50%);
    float: left;
}.bottom-bar-href{
    position: relative;
    top: 50%;
    width: 50%;
    transform: translate(-50% -50%);
    float: left;
}.bottom-bar-href a{
    margin-left: 20px;
    text-decoration:none;
    color: white;
}
    </style>

</head>
<body>
<header class="main-header">
<div class="navbar">
    <a href="Css-sites.html" class="main_logo">GetMovie.com</a>
    <div class="main-div">
    <ul class="main-div__items">
        <li class="main-div__item"><a href="Css-sites.html">Home</a></li>
        <li class="main-div__item"><a href="#">Get Movie</a></li>
        <li class="main-div__item"><a href="#">Say Hello</a></li>
        <li class="main-div__item main-div__item-login"><a href="about.html">About</a></li>
    </ul>
    </div>
</div>
</header>
<div class="section">
<h2>Welcome <br>
What would you like to watch today?</h2>
</div>
<main class="main">
    <div class="main-div__header">
        <h3>How it works</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </div>

    <div class = "main-texts">
        <div class = "main-row">
       
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
       
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div class = "main-row">
       
            <h3>Register</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>
</main>
<main class="product">
    <div class="photo"></div>
    <div class="aside">
        <h2>Get All Dresses</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
        <button class="btn"><a href="https://www.zara.com/tr/en/man-suits-l808.html" target="_blank">
            Buy Now
        </a></button>
    </div>
    <main class="premium">
             
        <h3 class="title">
            Become a Premium
        </h3>
        <div class="free opt">
            <h3>Free</h3>
            <h4 class="price">Free</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The All Series</li>
                <li>Dowloand 1080p</li>
            </ul>  
            <button class="buy"><a href="#">Be Free User</a></button>

        </div>


        <div class="Recommended opt standart-pack">
            <h3 class="rec-pack">Standart</h3>
            <h4 class="price">9.99 $</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The Some Series</li>
            </ul>  

            <button class="buy"><a href="#">Be Standart User</a></button>


        </div>


        <div class="Premium opt">
                        <h3>Premium</h3>
                <h4 class="price">19.99 $</h4>
            <ul>
                <li>Get Video</li>
                <li>Access The All Series</li>
                <li>Dowloand 1080p</li>
            </ul>  
            <button class="buy"><a href="#">Be Premium User</a></button>

        </div>
    </main>
</main>
<div class="numbers">
    <div class="film">
        <div class="film-sayi">
            <h3>Film sayısı</h3>
            <span>715</span>
        </div>
    </div>



    <div class="dizi">
        <div class="dizi-sayi">
            <h3>Dizi sayısı</h3>
            <span>196</span>
        </div>
    </div>



    <div class="belgesel">
        <div class="belgesel-sayi">
            <h3> Üye Sayısı</h3>
            <span>15.000</span>
        </div>
    </div>
</div>

<div class="cards">
    <h2>Movie Cards</h2>
    <div class="card-1">
        <div class="card-1-resim"></div>
        <div class="card-1-text">
            <div class="card-1-text-n">Star wars I</div>
            <div class="card-1-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-1-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
    <div class="card-2">
                <div class="card-2-resim"></div>
        <div class="card-2-text">
            <div class="card-2-text-n">Star wars II</div>
            <div class="card-2-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-2-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
    <div class="card-3">
                <div class="card-3-resim"></div>
        <div class="card-3-text">
            <div class="card-3-text-n">Star wars III</div>
            <div class="card-3-text-d">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</div>
            <div class="card-3-button"><a href="#">Buy Now</a></div>
        </div>
    </div>
</div>

<div class="bottom-bar">
    <div class="bottom-bar-name">
        © 2023 Error Correction INC.
    </div>
    <div class="bottom-bar-href">
        <a href="">Facebook</a>
        <a href="">Twitter</a>
        <a href="">İnstagram</a>
        <a href="">Linkedin</a>
    </div>
</div>
</body>
</html>

@Deva Bulmam @serhatcandev

Bende sayfanın en başı böyle sanırsam resim vardı. Fena durmuyor gelişir. CSS'i artık ayır çok basit bir işlem zaten.

ErrorCorrection · 5 Mart 2023

serhatcandev dedi:
Bende sayfanın en başı böyle sanırsam resim vardı. Fena durmuyor gelişir. CSS'i artık ayır çok basit bir işlem zaten.

Eki Görüntüle 1691508

Ayrı yaptımda bazı arkadaşlar kopyalarken boşuna css dosyası oluiturmasınlar diye html içine kodyum

serhatcandev · 5 Mart 2023

ErrorCorrection dedi:
Ayrı yaptımda bazı arkadaşlar kopyalarken boşuna css dosyası oluiturmasınlar diye html içine kodyum

Yok ya sen yap en azından temiz duruyor. Ve şimdi yaptığını bırakıp Flex öğreniyorsun. Float nedir? Float artık günümüzde asla ve asla kullanılmıyor. Hemen kalk ve Flex öğren evlat.

ErrorCorrection · 5 Mart 2023

serhatcandev dedi:
Yok ya sen yap en azından temiz duruyor. Ve şimdi yaptığını bırakıp Flex öğreniyorsun. Float nedir? Float artık günümüzde asla ve asla kullanılmıyor. Hemen kalk ve Flex öğren evlat.

Float zaten hiç sevmemiştim.
Az kaldı bunlardan sonra flex var zaten

serhatcandev · 5 Mart 2023

ErrorCorrection dedi:
Float zaten hiç sevmemiştim.
Az kaldı bunlardan sonra flex var zaten

Eki Görüntüle 1691516

Tamamdır. Bak göreceğin şeyler önemli onları iyi kavra. Sana em ve rem konusunda bir trick vereyim. Şimdi em ve rem, piksel yerine kullanılıyor. px kullanmıyoruz yani aslında. Nedenini izleyince anlarsın. Şimdi 1 em veya rem = 16px. Şimdi 5 rem dediğim zaman 5x16 yapman gerekecek ve boş bir matematik ilişkisine gireceksin. Bundan kurtulmak için ise html {font-size:10px} yap. Bunu sayesinde 1 rem = 10px. 5 rem = 50px anlatabilmişimdir umarım.

Web sitesi nasıl daha güzel hale getirilir?

Ayrıntılı düzenleme

ErrorCorrection

Decipat

Deva Bulmam

Decapat

muhammetaksu

Decapat

MUNIORR

Hectopat

ErrorCorrection

Decipat

serhatcandev

Megapat

ErrorCorrection

Decipat

serhatcandev

Megapat

ErrorCorrection

Decipat

serhatcandev

Megapat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz