Untitled

unknown
plain_text
a year ago
5.6 kB
Indexable
Never
<html>
    <head>
        <title> Page</title>
        <meta charset="utf-8">
        <!-- Fonts -->

<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<!-- headers -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        
        <!-- header  -->
        <div class="header">
            <div class="contener">
                <div class="logo">
                    <img src="images/Template_1/logo-alt.png" alt="logo-img" draggable="false"/>
                </div>

                <ul class="nav">
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Prtofolio</a></li>
                    <li><a href="#">Servece</a></li>
                    <li><a href="#">Price</a></li>
                    <li><a href="#">Team</a></li>
                    <li class="down">
                        <a href="#">Blog</a>
                        <ul class="down-minu">
                            <li>blog down</li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <div class="clear"></div>
            </div>
        </div>
  

<!-- Home section -->

    <div class="home">
        <div class="opacitiy">
            <div class="home-contente">
                <h1 class="title"> We change everything </h1>
                <p class="home-description">
                    paragraphe sectionparagraphe sectionparagraphe sectionparagraphe sectionparagraphe section paragraphe sectionparagraphe sectionp
                </p>
                <button class="btn btn-start hover-opacity">Get start</button>
                <button class="btn btn-lern hover-opacity">Lern More</button>
            </div>
        </div>
    </div>





    </body>
</html>

==================================================================================




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* pour arret l'ajout de padding juste move l'element deans dive*/
}
h1 , h2 ,h3 ,h4 ,h5 ,h6{
    font-family: Georgia, 'Times New Roman', Times, serif;

}
button{
    font-family: inherit;
}
.hover-opacity{
    transition: opacity .5s;
}
.hover-opacity:hover{
    opacity: 0.5;
}


.header{

    position: fixed;
    width: 100%;
    z-index: 10;
}


body{
    font-family: 'Varela Round', sans-serif;
}




.contener{

    width: 80%;
    margin: auto;
}


.header .logo{
    width:44%;
    float: left;
}

.header .logo img{
    width: 22%;
    margin-top: 12px;
}



.header .nav{
    width: 56%;
    float: left;
    text-align: right;

}

.header .nav li{
    list-style: none;
    display: inline-block;
    margin-right: 5px;
    

    
}
.header .nav li a{
    text-decoration: none;
    color: aliceblue;
    display: block;
    padding: 25px 20px 0px 0px;
    font-size: 14.5px;
    
}


/*le style de bar sous lien de #a*/
.header .nav li a:after,.header .nav li a.active:after{
    content: "";
    display: block;
    background-color: rgb(48, 127, 247);
    width: 0;
    margin-top: 2px;
    height: 3px;
    transition: width .5s;
    
    

}

.header .nav li a.active:after{
    width: 100%;
    

}
.header .nav li a:hover:after{
    width: 100%;
}

.clear{
    clear: both;
}


/* Home section Css*/
.home{
    height: 100vh;
    background-image:url("../images/Template_1/background1.jpg");
    /*background-position: center; centralise l'image */
    background-size: cover; /* la talle de l'image = taye de ecran 5/5 */
    position: relative;
    background-position: center;
}
/*pour cree opacety c-a-dire cree un plan fils sue le pere puet minimisi le niveu de opacity */
.opacitiy{
 width: 100%;
 height: 100%;
 position: absolute;
 top:0;
 left: 0;
 background-color: rgba(24, 23, 23, 0.77);

}

/*le contenu de contener avec la methode de fixde dans le centre*/
.home-contente{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    margin: 10px 0px;
    color: white;
    width: 880px;
}

/* le style de titre de section de home*/
.home .title{
    color :rgb(255, 255, 255);
    text-align: center;
    text-transform: uppercase;
    font-size: 2.9rem;
    margin-bottom: 5px;
}


/*pour le paragraphe */

.home .opacitiy .home-contente .home-description{
padding-bottom: 10px;
letter-spacing: 1px;
word-spacing: 3px;
margin: 10px 0px;
line-height: 29px;
}

/* pour le style partage entre les boton de cette*/

.home .btn{
    width:170px;
    padding: 15px 0px;
    cursor: pointer; /*change le style de suree pendent mette la sure sur le botone (surre => la mane )*/
    font-size: 14px;
    border-radius: 5px 5px 5px 5px;
    margin-top: 20px;
}

/* pour le style de boton de start*/
.home .btn-start{
    margin-right: 14px;
    background-color: white;
    border: none;
}

/* pour le style de boton de lern*/
.home .btn-lern{
    background-color: rgb(38, 132, 210);
    border: none;
    color :white;
}



.down{
    position: relative;
}
.down-minu{
    position: absolute;
    width: 90px;
    background-color: rgb(38, 132, 210);
    border-radius: 5px 5px 5px 5px ;
    
}