<!DOCTYPE html>
<html>
    <head>
        <title>CSS Box Model</title>
        <meta charset="utf8" />
        <link rel="stylesheet" href="style.css">
       <!-- <link rel="stylesheet" href=" https://unpkg.com/sakura.css@1.0.0/css/sakura.css"> -->
       <link href="https://fonts.googleapis.com/css2?family=Varta:wght@300;400;515;600&display=swap" rel="stylesheet">
    </head>
    <body>
       <div class="block1">
        <h1>photos</h1>
        <button class="previous">Previous Image</button>
        <button class="next">Next image</button>
       </div>
        
    <div class="block2">
        <img src="https://images.unsplash.com/photo-1433888104365-77d8043c9615?ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80" alt="flower1 img">

    </div>

        <div class="block3 row colum">
            <img src="https://images.unsplash.com/photo-1558521958-0a228e77e984?ixlib=rb-1.2.1&auto=format&fit=crop&w=693&q=80" alt="flower1 img">
            <img src=" https://images.unsplash.com/photo-1567538737566-184fdf777891?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80 " alt=" flower2 img  ">
            <img src=" https://images.unsplash.com/photo-1468327768560-75b778cbb551?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80 " alt=" flower3 img  ">
            <img src="https://images.unsplash.com/photo-1588477000993-460d2257f88a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80  " alt=" flower4 img  ">
            <img src=" https://images.unsplash.com/photo-1491929007750-dce8ba76e610?ixlib=rb-1.2.1&auto=format&fit=crop&w=1347&q=80 " alt=" flower5 img  ">
            <img src=" https://images.unsplash.com/photo-1433888104365-77d8043c9615?ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80 " alt=" flower6 img  ">
            <img src=" https://images.unsplash.com/photo-1581272181817-de823773c1b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80 " alt=" flower7 img  ">
            <img src=" https://images.unsplash.com/photo-1557768960-c2d136235503?ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80 " alt=" flower8 img  ">
        </div>
          
    </body>
</html>



body{
    background-image: url("https://coolbackgrounds.io/images/backgrounds/index/disco-dba865f1.png");
    background-size: 100%;
}
h1{
    font-size: 35px;
    font-weight: normal;
    font-family: 'Varta', sans-serif;
    text-align: center;
}

  
  .previous {
    background-color: #492acf;
    color: black;
    margin-left:550px; 
 }
  
  .next {
    background-color: #bd447c;
    color: black;
    margin-left: 550px; 
    
    

  }
  button{
    width: 100px;
    height: 50px;
    padding: 20px;
    border:2px dashed #ca6687;

  }
.block2 img{
    height: calc(70vh); /*70% from size of the web page*/
    margin-left: 440px;
    margin-bottom: 20px;
    margin-top: 20px;
    
}


.block3 img{
  display: inline-block;
  height: 200px;
  width: calc(12.5%);
  margin-left: 6px;
  box-sizing: border-box;

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.