Place Your Order



        
       
        
    

    

        
        
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur mollitia, voluptates laudantium adipisci deserunt consequuntur sequi assumenda veritatis quaerat id asperiores saepe est. Unde magnam dolores rem, neque tempora perspiciatis.
        
       
        
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ea, quibusdam est facere, alias rem perferendis animi, architecto nobis at iste aliquam quis adipisci error? Itaque porro quam odit est laboriosam obcaecati soluta sapiente earum quas rerum, tempora magni excepturi maiores saepe aperiam ipsum eaque quasi libero vero corrupti dolorum dolor! Vero magni recusandae cum nesciunt aliquam quo debitis placeat eos reprehenderit harum repellendus, dolore rerum doloribus, accusamus, aliquid corporis laborum praesentium molestias neque porro magnam. Quam corrupti delectus provident cum vitae sed earum nihil nemo. Cupiditate ab, voluptate aspernatur ullam libero dolorum animi qui nisi eaque impedit, a tempora veniam.
         
    

    
    

@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');


body{
    font-family: 'Cookie', cursive;
    margin: 0px;
    box-sizing: border-box;
}

/* navbar ________________ */
nav{

    background-color: pink;
    position: fixed;
    z-index: 12;
    width: 100%;
    top: 0px;
    display: flex;
    justify-content: space-between;
    max-height: 120px;

    
    
    



}

.nav-brand{

width: 100px;
display: inline-block;
}

.nav-brand img{
    width: 100%;
    
}

nav ol{

    display: flex;
    gap: 5px;

    
   
    margin-right: 20px











}

nav li{
    display: inline-block;
    list-style: none;
    
    

    
    

    
    
}

nav li a{
    display: inline-block;
    text-decoration: none;
    color: black;
    font-size: 1em;
    padding:2px;
    padding-top: 30px;
    
    
    
    

}

nav li a:hover{
    color: white;
}


/* video greeting */


.video-greeting{
    margin-top: 90px;
    background-color: pink;
    width: 100%;
    height: 400px;
    
    


}




.video-greeting video {
    width: 100%;
    height: 100%;
    position: relative;

    object-fit: cover;

    


    left: 50%;
    transform: translateX(-50%);
}

.video-greeting a {

    position: absolute;
    z-index: 2;
    font-size: 1em;
    background-color: pink;
    background-color: rgba(251, 231, 239, 1);

    padding: 10px;
    border-radius: 50%;

    top: 43%;
    left: 39%;
    
    text-decoration: none;
    color: black;
    
    

}


.cookie-tab{

  
    background-color: pink;
    padding: 20px 10px;
    display: grid;
    
    grid-template-columns: auto auto;
    gap: 20px;
    
    

}

.cookie-tab img{
    
    border: 2px black solid;
    width: 100%;
    
    
    display: block;

    
}

.cookie-tab p{
    width: 100%;
    display: inline-block;
    text-align: center;
   
    

}

我想让这个页面更具响应性我知道我可以使用@media工具，但我想知道是否有更好的方法来改变单位类型。比如如何随着页面尺寸的增加而缩放字体，或者如何使某些元素（例如视频问候元素）不移动而停留在一个地方。谢谢