<header>
        <div class="logo">
            Online shop
        </div>

        <nav>
            <a href="#home">Man</a>
            <a href="#news">Woman</a>
            <a href="#contact">Kids</a>
            <a href="#about">Cats</a>
            <a href="#about">Dogs</a>
        </nav>

    </header>

    <section class="s1">

        <div class="section_2_Content">

            <div class="box">
                <div class="apranq">
                    <img class="apranq_img_size" src="./img/Samsung.jpg"
                        alt="">
                </div>
                <div class="apranq_name">
                    <p>Samsung</p>
                </div>
                <div class="apranq_price">
                    <span>1500</span>$
                </div>
                <div class="apranq_button">
                    <button class="btn">Buy</button>
                </div>
            </div>
    
            <div class="box">
                <div class="apranq">
                    <img class="apranq_img_size" src="./img/Huawei-P30-Lite-Blue-1.jpg"
                        alt="">
                </div>
                <div class="apranq_name">
                    <p>Huawei P30</p>
                </div>
                <div class="apranq_price">
                    <span>500</span>$
                </div>
                <div class="apranq_button">
                    <button class="btn">Buy</button>
                </div>
            </div>
    
            <div class="box">
                <div class="apranq">
                    <img class="apranq_img_size" src="./img/Iphone.jpeg"
                        alt="">
                </div>
                <div class="apranq_name">
                    <p>Iphone 7</p>
                </div>
                <div class="apranq_price">
                    <span>1000</span>$
                </div>
                <div class="apranq_button">
                    <button class="btn">Buy</button>
                </div>
            </div>
    

        </div>
        
    </section>

    <!-- zibil -->

<section class="zibil">

    <div class="zibil_anun">
        Mutq depi zibil
    </div>

    <div class="zibil_tex"></div>

</section>

    

/* header */

header {
    width: 100%;
    height: 85px;
    background-color: rgb(255, 255, 255);
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 50px;
}

.logo {
    font-size: 30px;
    text-transform: uppercase;
}

nav a {
    float: left;
    color: gray;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    transition: all .2s linear;
}

nav a:hover {
    background-color: #ddd;
    color: black;
    border-radius: 10px;
}

/* section */

.section {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 386px; 
    background-size: cover;
    height: 100vh;
}

.section_2_Content{
    display: flex;
    justify-content: space-between;
}

.box{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 250px;
    width: 250px;
    background-color: gray;
}


.apranq{
    width:130px;
    height: 130px;
    margin-top: 15px;
}
.apranq_img_size{
    width: 100%;
    height: 100%;
}
.apranq_name{
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}
.apranq_price{
    margin-top: 5px;
    font-weight: 500;
}

.apranq_button{
    position: absolute;
    bottom: 0;
    width: 100%;
}
.btn{
    width: 100%;
    background-color: #0bee6d;
}

/* zibil */

.zibil_anun {
    font-size: xx-large;
    font-weight: 600;
    text-align: center;
    color: rgb(70, 18, 18);
    margin-top: 50px;
}

.zibil_tex {
    margin-top: 50px ;
    width: 100%;
    height: 400px;
    background-color: rgb(185, 49, 49);
}

var boxes = document.querySelectorAll(".box");
for(var box of boxes) {
  var btn = box.querySelector(".btn");
  var name = box.querySelector(".apranq_name p");
  btn.onclick = function() {
     localStorage.setItem("product", name);
  }
}