????

Your IP : 216.73.216.34

Current Path : /home/carpe/public_html/sae 202/
Upload File :
Current File : /home/carpe/public_html/sae 202/page2.php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Partenaires</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
</head>
<style>
    body{
        margin:0;
        padding:0;
        background-color:#f5efe2;
        width:100%;
        height:100vh;
        font-family: "Inter", sans-serif;
    }
    
    #contain{
        width:100%;
        min-height:379vh;
        height:auto;
        overflow:hidden;
        position:relative;
    }
    
    #cont1{
        float:right;
        
        width:40%;
        margin:100px;
        display:flex;
        justify-content:right;
        flex-wrap:wrap;
    }
    
    #titre1{
        font-size:7rem;
        text-align:right;
        margin:0;
        padding:0;
        background:white;
    }
    #titre2{
        font-size:2rem;
        font-style:italic;
        text-align:right;
        margin:0;
        padding:0;
        background:lightgrey;
        width:300px;
        display:flex;
        justify-content:center;
        align-items:center;
        text-align:center;
    }
    
    
    #cont2{
        margin-top:10vh;
        width:90%;
        background:grey;
        min-height:100vh;
        float:right;
        position:relative;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-around;
    }
    
    #cont2_cont1{
        width:60%;
        height:70vh;
    }
    
    #cont2_cont2{
        width:auto;
        height:90vh;
    }
    
    #titre1000{
        background:lightgrey;
        width:461px;
        height:180px;
        float:right;
        display:flex;
        justify-content:center;
    }
    
    #titre1000 h2{
        position:absolute;
        margin:0;
        padding:0;
        font-size:3rem;
        font-style:italic;
        width:300px;
    }
    
    #sous_titre6{
        width:460px;
        margin-top:200px;
        font-size:1.2rem;
        text-align:right;
    }
    
    #cont2_cont1_cont1{
        width:100%;
        background:lightgrey;
        height:60vh;
    }
    

    
    
    
    
    
    
    
    
    #cont3{
        width:90%;
        height:auto;
        float:right;
        padding-bottom:20vh;
    }
    
    
    #form2{
        width:150%;
        height:100%;
        background:grey;
        transform:rotate(2deg);
        position:absolute;
        bottom:-15vh;
        left:-10px;
    }
    
    #titre3{
        background:lightgrey;
        width:620px;
        position:relative;
        font-size:2.8rem;
        height:160px;
        margin:50px;
    }
    
    #titre3 h2{
        position:absolute;
        width:800px;
        margin:O;
        padding:0;
        top:-5vh;
        left:0;
        font-style:italic;
    }
    
    #sous_titre1{
        margin:0;
        padding:0;
        margin-left:50px;
        position:relative;
        top:-30px;
        width:700px;
    }
    #cont3_cont1{
        width:70%;
        height:auto;
        margin:auto;
        display:grid;
        grid-template-rows:1fr 1fr;
        grid-template-columns:1fr 1fr 1fr 1fr;
    }
    
    .cont3_cont1_cont{
        color:grey;
        margin:10px;
        display:flex;
        justify-content:right;
        flex-wrap:wrap;
    }
    
    .cont3_cont1_cont h3{
        width:100%;
        text-align:right;
        font-size:1.8rem;
        margin:0;
        padding:0;
    }
    
    .hey{
        background:lightgrey;
        width:70%;
        display:flex;
        justify-content:center;
        align-items:center;
        
    }
    
    .cont3_cont1_cont img{
        width:100%;
    }
    
    .absolue{
        width:100%;
        height:200px;
        position:absolute;
        top:-20vh;
        overflow:hidden;
    }
    
    #form1{
        width:150%;
        height:100%;
        background:grey;
        transform:rotate(-2deg);
        position:absolute;
        bottom:-15vh;
    }
    
    #cont4{
        background:grey;
        width:90%;
        padding-bottom:10vh;
        float:right;
        position:relative;
        display:flex;
        justify-content:space-around;
        align-items:center;
        flex-wrap:wrap;
    }
    
    #cont4_cont1{
        width:55%;
        height:80%;
    }
    
    #cont4_cont1_form1{
        background:lightgrey;
        width:100%;
        height:58vh;
    }
    
    .cont4_cont1_cont1_form{
        background:lightgrey;
        width:19%;
        height:100%;

    }
    #cont4_cont1_cont1{
        margin-top:2vh;
        width:100%;
        height:20vh;
        display:flex;
        justify-content:space-between;
        
        
    }
    
    #cont4_cont2{
        min-width:26%;
        width:auto;
        height:80vh;
        display:flex;
        flex-direction:column;
    }
    #cont4_cont2 p{
        margin-top:20px;
        width:400px;

        font-size:1.2rem;
    }
    
    #sous_titre4{
        text-align:right;
    }
    
    #titrejsp{
        background:lightgrey;
        width:400px;
        height:120px;
        float:right;
        
    }
    
    #titrejsp h2{
        padding:0;
        margin:0;
        font-size:3.6rem;
        font-style:italic;
        text-align:right;
    }
    
    
    
</style>
<body>
    <div id='contain'>
        <?php include 'header.php'; ?>
        <div id='cont1'>
            <h1 id='titre1'>Partenaires</h1>
            <h2 id='titre2'>Allez plus loin, engagez vous !</h2>
        </div>
        
        <div id='cont2'>
            <div class='absolue'>
                <div id='form1'></div>
            </div>
            <div id='cont2_cont1'>
                <div id='cont2_cont1_cont1'></div>
                <p id='sous_titre7'>Chainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw Man</p>
            </div>
            <div id='cont2_cont2'>
                <div id='titre1000'>
                    <h2>Associations et points de collecte</h2>
                </div>
                <p id='sous_titre6'>Chainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw Man</p>
            </div>
        </div>
        <div id='cont3'>
            <div id='titre3'>
                <h2>Les acteurs qui soutiennent l'initiative</h2>
            </div>
            <p id='sous_titre1'>Chainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw Man</p>
            <div id='cont3_cont1'>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
                <div class='cont3_cont1_cont'>
                    <div class='hey'>
                        <img src='uvsq.png'>
                    </div>
                    <h3>Marque</h3>
                </div>
            </div>
        </div>
        <div id='cont4'>
            <div class='absolue'>
                <div id='form2'></div>
            </div>
            <div id="cont4_cont1">
                <div id="cont4_cont1_form1"></div>
                <div id="cont4_cont1_cont1">
                    <div class="cont4_cont1_cont1_form"></div>
                    <div class="cont4_cont1_cont1_form"></div>
                    <div class="cont4_cont1_cont1_form"></div>
                    <div class="cont4_cont1_cont1_form"></div>
                    <div class="cont4_cont1_cont1_form"></div>
                </div>
            </div>
            <div id="cont4_cont2">
                <div id='titrejsp'>
                    <h2>Réseaux, Influenceurs</h2>
                </div>
                <p id='sous_titre3'>Chainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw Man</p>
                <p id='sous_titre4'>Chainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw ManChainsaw Mna Chaisnaw Man Chainsaw Man</p>
            </div>
            
        </div>
        <?php include 'footer.php'; ?>
    </div>
    
</body>
</html>