style.css

html, body {
    box-sizing: border-box;
    background-color:  #ffc8dd;
    margin: 0px;
    }
    
    
    /*header*/
    
    .header{
        background-color: #cdb4db;
    }
    
    
    header > p{
        color: rgb(211, 55, 225);
        cursor: pointer;
        font-size: 1.5rem;
        margin-left:1%;
        width: 100%;
    }
    header > img{
    
        width: 20%;
        height: 100%;
    }
    
    /*navigation*/
    
    .nav{
    background-color: rgb(242, 249, 249);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    border: solid;
    border-radius: 0rem;
    border-color: #eadff3;
    margin-bottom: 1rem;
    
    }
    .ul-nav{
        list-style-type: none;
        border-radius: 0rem;
    }
    .ul-nav a {
        text-decoration:none;
        border-radius: 0rem;
        
    }
    .nav > ul{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-right: 20%;
    }
    .n-link{
        border: solid;
        border-color:  rgb(242, 249, 249);
        padding: 0.5rem;
        background-color: #eadff3;
        border-radius: 1rem;
    
    }
    a:hover{
        background-color: aqua;
    }
    
    /*main*/
    
    .cake-1{
        width: 70%;
        border-radius: 2rem;
        margin-left: 2rem;
        height:80%;
    }
    .section-1{
        font-size: 2rem;
        color: rgb(31, 37, 82);
         height: 20%;
    }
    .section-2{
        margin-top: 15%;
        font-size: 1.5rem;
        margin-right: 5%;
        color: rgb(31, 37, 82);
        height: 20%;
    }
    
    .main-2{
        margin-top: 1rem;
    }
    .cake-a{
        width: 90%;
        height: 90%;
    }
    .cake-b{
        width: 90%;
        height: 90%;
    }
    .cake-c{
        width: 90%;
        height: 90%;
    }
    .cake-d{
        width: 90%;
        height: 90%;
    }
    
    /*footer*/
    
    .footer {
        background-color: #614178;
    }
    .section-a{
        margin-top: 5%;
    }
    .icon-a{
        width: 80%;
    }
    .section-b{
        margin-top: 12%;
        margin-left: 15%;
    }
    .icon-b{
        width: 38%;
    }
    
    .section-c{
        margin-top: 10%;
    }
    .icon-c{
        width: 30%;
    }
    .section-d{
        margin-top: 10%;
        color: aqua;
        cursor: pointer;
        font-size: 1.3rem;
        width: 100%;
    }
    
    /*grid*/
    
    /*header*/
    
    .header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    
    header >p{
        justify-content: end;
        align-self: self-end;
        }
    
    /*main*/
    
    .main-1{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        grid-template-rows: 1fr 1fr ;
    
    }
    .article-1{
    grid-column: 1/4;
    grid-row: 1/3;
    }
    .section-1{
        grid-column: 4;
        grid-row: 1;
    }
    .section-2{
        grid-column: 4/6;
        grid-row: 1/3;
    }
    .main-2{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        grid-template-rows: 1fr;
    }
    .article-a{
        grid-column: 2;
    }
    .article-b{
        grid-column: 3;
    }
    .article-c{
        grid-column: 4;
    }
    .article-d{
        grid-column: 5;
    }
    
    /*footer*/
    
    .footer {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: 1fr 1fr;
    }
    .section-a{
    grid-column: 2;
    width: 40%;
    }
    .section-b{
        grid-column: 3;
    }
    .section-c{
        grid-column: 4;
    }
    .section-d{
        grid-column: 3;
        grid-row: 2;
    }
    
    /*media query*/
    
    @media only screen and (max-width:450px){
    
    .header{
    width: 100%;
    height: 40%;
    } 
    .header >p{
        margin-left: 0.1rem;
    }
    .cake-1{
        margin-top: 15%;
    }
    .section-1{
        font-size: 1rem;
        margin-top: 25%;
    
    
    }
    .section-2{
        margin-top: 30%;
        font-size: 0.5rem;
    }
    nav{
        display: none;
    }
    .icon-a{
        width:40%;
    }
    .icon-b{
        width:2.3rem;
        margin-left: 2rem;
    }
    .icon-c{
        width:2rem;
        margin-top: 0.6rem;
        margin-left: 1rem;
    }
    
    }
    
    @media only screen and (max-width:900px) {
    .contaner{
        width: 100%;
    }  
    }