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

sanalmaganda dedi:
Açamayan olursa diye direk Css-sites bu siteden girin arkadaşlar.
Genişletmek için tıkla...
Hocam güncellenmiş halini koyar mısınız?
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: white;
    position: relative;
    bottom: 0;
    left:0;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}.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: black;
}
    </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>

Yani kafam biraz karışsada anladım gibi.
 

Css-sites buyrun hocam aynı linkten bakın sizde glitch kullanarak yapabilirsiniz.
 
Son düzenleme:
ErrorCorrection dedi:
Buyrun hocam resimleri düzenledim.


Evet hocam onu sormuştum
Genişletmek için tıkla...
Resimleri webp formatına dönüştür çok daha hızlı açılır siteler. Bu bir kural gibi bir şey sana söyleyeyim. Google'a jpg to webp yaz. Oradan hepsini dönüştür ve sadece uzantılarını değiştir.

Butonlara ise :active ver ve içlerine scale: 0.95; yaz. Güzel bir efekt olur.
 
Ne efekti oluyor.
 
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…