Thiết kế website giá rẻ

Question

so i want to swap them with their position any help?? Also some good video or reference with respect to this positioning thing because it is very confusing for me
i tried to position relative then shifting it to bottom but i wasn’t really succesful and confused at all of this stuff in css.

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.main{
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(Untitled-1.png);
    background-size: cover;
    background-position: center;
}
.navbar{
    width: 85%;
    margin: auto;
    padding: 35px ;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.logo{
    width: 120px;
    cursor: pointer;
}
.navbar ul li{
    list-style: none;
    display: inline-block;
    margin:20px;
    margin-top: 10px;
    margin-right: 50px;
}
.ul{
    float: left;
    margin-left: 50px;
    margin-top: 20px;
    align-items: center;
    position: relative;
}

.navbar ul li{
    list-style-type: style none;
    display: inline-block;
    margin: 20px;
    position: relative;

}

.navbar ul li::after{
    content: '';
    height: 3px;
    width: 0%;
    background: #cf1eb2;
    position: absolute;
    left: 0;
    bottom:0;
    transition: 0.2s;

}
.navbar ul li:hover:after{
    width: 100%;
}
ul li a{
    text-decoration: none;
    color: antiquewhite;
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    transition: 0.2s ease-in-out;
    text-transform: uppercase;
  
}

ul li a:hover{
    color: rgb(247, 0, 255);
    
}

.content{
    width: 100%;
    position: absolute;
    top: 50%;
  
    text-align: center;
    color: white;
}
.content h1{
    font-size: 70px;
    margin-top: 80px;
}

.content p{
    margin: auto;
    font-weight: 100;
    line-height: 25px;
}
 
.srch{
    width: 500px;               /*here is the block*/
    height: 40px;
    background: transparent;
    font-family: 'Times New Roman';
    font-size: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-color: aqua;
    border: 4px solid rgb(10, 0, 5);
    
}

.btn{
    width: 80px;
    height: 40px;
    background-color: rgb(144, 197, 59);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: 0.4s;
  
}
.btn:hover{
    cursor: pointer;
    color: rgb(141, 33, 184);
}

.buttn{
    width: 100%;
    position: absolute;
    top: 50%;
    text-align:center;
    color: white;
}
.More{
    width: 80px;                    /*here is the block*/
    height: 50px;
    font-family: sans-serif;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 100;
    color: greenyellow;
    border: 3px solid white;
    margin-left: 100px;
    

}
.donate{
    width: 80px;   /*here is the block*/
    height: 50px;
    font-family: sans-serif;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: rgba(0, 0, 0, 0);
    font-weight: 100;
    color: greenyellow;
    border: 3px solid white;
    transition: 0.4s;
    margin-bottom: 20px;
    margin-top: -20px;
}
.More:hover{
    color: pink;
    cursor: pointer;
}

.donate:hover{
    color: pink;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style1.css">
    <title>Catssssssssss</title>
</head>
<body>
    <div class="main">
        <div class="navbar">
            <img src="catlogo.png" alt="" srcset="" style="width: 100px;">
           
        

            <ul>
                <li><a href="http://">Home</a></li>
                
                <li><a href="http://">Breeds</a></li>
                <li><a href="http://">Vet help</a></li>
                <li><a href="http://">Food</a></li>
            </ul>
        </div>
        <div class="content">
            <h1>Some Silly Cats</h1>
            <p>The cute cat theory of digital activism is a theory concerning Internet <br> activism, Internet censorship, and "cute cats" (a term used for any <br> low-value, but popular online activity) developed by Ethan Zuckerman in 2008.</p>
            <input type="search" class="srch" name="" id="" placeholder="  Search Here  "> <button class="btn">Search</button>
            
        </div>
        <div class="buttn">
            <button type="button" class="More">More Cats</button>
            <button type="button" class="donate">Donation </button>
        </div>

    </div>
    
</body>
</html>

Thiết kế website giá rẻ

Danh mục

How to position buttons and all on webpage perfectly?