Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="HelpNature.css">
    <title>Help Nature Roza</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style>
*{
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}
img {
    width: 100%;
}
body,html,h1,h2,h3,h6 {
    padding: 0;
    margin: 0;
    height: 100%;
}
ul, li {
    padding: 0;
    margin: 0;
}

.clear-fix {
    clear: both;
}
/**Header**/
.header {
    background-image: url('/ExamRozalinaSh/img/header.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    margin: auto;
    padding: 50px 100px;
    color: white;
}
.h-menu,ul li {
    border: 3px solid #080808;
    background-color: black;
    opacity: 0.5;
    text-align: right;
    border-radius: 20px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 0;
    padding: 3px 0px 0px 3px;

}
.h-menu, ul, li a {
    color: white;
    font-weight: 700;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;

}
.info {
    overflow: hidden;
    background-color: black;
    opacity: 0.5;
    border-radius: 20px;
    border: 3px solid #080808;
    width: 80%;
    text-align: center;
    margin:80px auto;
    padding: 10px 80px;
}
.Nat{
    font-weight:800;
    margin: 20px;
}
.Nat-text {
    font-style:italic;
    font-weight: 700 ;
}
.btn-1 {
    background: #198754;
    padding:8px 20px;
    cursor: pointer;
    color: white;
    border-color:#198754;
    border-radius:7px;
    font-weight: bolder;
    font-variant-caps:petite-caps;
}

/**Header end**/

/**Second**/
.second-p {
    width: auto;
}
.sp-text {
    overflow: hidden;
    width: 60%;
    text-align: center;
    margin: 40px auto;
    padding: 30px 80px;
}
.sp-text, h3 {
    color: #198754;
    text-shadow: 1px 1px black;
}
.sp-autor {
    color: white;
    margin-bottom: 50px;
}
/**Second end**/

/**Help nature**/
.help {
    background: #198754;
    color: white;
    padding: 40px;

}
.title{
    width: 80%;
    text-align: center;
    margin: 20px auto;
    padding: 10px 60px;
}
.title p{
    font-variant-caps: all-small-caps;
    margin-top: 0;
    margin-bottom: 0;
}
.title h2{
    font-size: x-large;
    margin-top: 0;
}
.h-box i {
    background-color: #ae9e9e;
    padding: 20px;
    border-radius: 40px;
    border: 3px solid white;
    margin: 10px;
}
.h-box {
    border-radius: 10px;
    float: left;
    width: 20%;
    margin: 0px auto;
    text-align: center;
    margin-bottom: 50px;

}
.h-box:nth-child(2), .h-box:nth-child(3) ,.h-box:nth-child(4) {
    margin-left: 5% ;
}
/**Help nature end**/
/**Get subscribe**/
.subscribe{
    background-image: url('/ExamRozalinaSh/img/beach.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    background-position: bottom left;
    margin: auto;
    padding: 50px 100px;
}
.s-text{
    color: white;
    width: 50%;
    margin:160px auto;
}
.s-text h1 {
    text-align: center;
    padding: 30px;
    text-shadow: 0.5px 0.5px black;
}
.subscribe, btn-1 {
    text-align: center;
}
/**Get subscribe end**/
/**Last activities**/
.activity {
    margin: 50px;
}
.l-text h2{
    margin: 20px;
    color: #198754;
    text-shadow: 1px 1px black;
}
.a-img {
    width: 100%;

}
.i1{
    width: 50%;
    float: left;
    position: relative;
    color: rgb(158, 18, 18);
}
.i2{
    width: 50%;
    float: right;
}
.i3{
    width: 50%;
    float: left;
}
.i4{
    width: 50%;
    float: right;
}
</style>
</head>

<body>
    <!--Header-->
    <div class="header">
        <div class="h-menu">
            <ul>
                <li>
                    <a href="http://">НАЧАЛО</a>
                </li>
                <li>
                    <a href="http://">ЗА НАС</a>
                </li>
                <li>
                    <a href="http://">КОНТАКТИ</a>
                </li>
                <li>
                    <a href="http://">ПОМОГНИ</a>
                </li>
            </ul>
        </div>
        <br>

        <div class="info">
            <div class="i-text">
                <h1 class="Nat">Природа</h1>
                <p class="Nat-text">Всичко в
                    природата ни кани постоянно да бъдем това,
                    което сме</p>
                <button class="btn-1">
                    Научи повече
                </button>

            </div>
        </div>
    </div>
    <!--Header end-->
    <!--Second -->
    <div class="second-p">
        <div class="sp-text">
            <h3 class="">Природата може без човек, но той
                не може без природата</h3>
            <p class="sp-autor">Али Абшерони</p>
            <button class="btn-1">
                Още фрази
            </button>
    </div>
    <!--Second end-->
    <!--Help Nature-->
    <div class="help">
        <div class="title">
            <p class="">НАШИТЕ ЦЕЛИ</p>
            <h2>ДА ПОМОГНЕМ НА ПРИРОДАТА</h2>
        </div>
        <div class="icons">
            <div class="clear-fix"></div>
            <div class="h-box">
                <i class="fa-regular fa-heart"></i>
                <h6>ДЪРВЕТА</h6>
            </div>
            <div class="h-box">
                <i class="fa-solid fa-pen"></i>
                <h6>ПОСТАВЯНЕ НА ЦЕЛИ</h6>
            </div>
            <div class="h-box">
                <i class="fa-solid fa-bolt"></i>
                <h6>ПРИЮТ ЗА ЖИВОТНИ</h6>
            </div>
            <div class="h-box">
                <i class="fa-regular fa-map"></i>
                <h6>РАЗВИТИЕ</h6>
            </div>
            <div class="clear-fix"></div>
        </div>
    </div>
    <!--Help Nature end-->
    <!--Get subscribe-->
    <div class="subscribe">
        <div class="s-text">
            <h1 class="">Включи се и ти!</h1>
            <button class="btn-1">
                Запиши се!
            </button>
    </div>
    <!--Get subscribe end-->
    <!--Last activities-->
    <div class="activity">
        <div class="l-text">
            <h2 class="">Последната ни дейност</h2>
        </div>
        <div class="a-img">
            <div class="i1">
                <img src="/ExamRozalinaSh/img/1.jpg" alt="">
                <div class="bottom-left">
                     <h10> Засадихме 50 000 дървета!</h10>
                     <p>С много услилия го направихме!</p>
                </div>
            </div>
            <div class="i2">
                <img src="/ExamRozalinaSh/img/2.jpg" alt="">
            </div>
            <div class="i3">
                <img src="/ExamRozalinaSh/img/3.jpg" alt="">
            </div>
            <div class="i4">
                <img src="/ExamRozalinaSh/img/4.jpg" alt="">
            </div>
        </div>
    </div>
    <!--Last activities end-->


    <div style="height: 1000px;"></div>
</body>
</html>