eric
/
YazikTrainer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!DOCTYPE html>

<html>
    <head>
        <title>Un essai de Flexbox</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .flex-container {
                display: flex;
                justify-content: center;
                flex-direction: column;
            }

            .flex-container1 {
                display: flex;
                justify-content: center;
                flex-direction: row;
                flex-wrap: wrap;
                align-content: space-between;
            }

            .flex-container > div {               
                margin: 10px;
                padding: 20px;
                font-size: 30px;
            }

            .ligne1 {              
                margin: 10px;
                padding: 20px;
                font-size: 30px;
                align-self: center;
            }

            .fond1 {
                /*                background: url("../img/F-8.svg")  no-repeat;
                                width: 100%;*/
            }
            .progrès {
                align-content: center;
            }

            .bouton-reponse {
                margin: 5px;
                font-size: 0.8em;
                padding: 5px;
                background:lightgrey;
                border-radius: 10px;
                border-style: groove;
                border-color: white;
                opacity: 0.9;
                width: 30%;
/*                height: 30%;*/
                font-weight: bold;

            }
            .question {
                background: lightgrey;
                border-radius: 15px;
                border-style: groove;
                border-color: white;
                opacity: 0.9;
                font-weight: bold;
                font-size: 1.5em;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="flex-container fond1">
            <div class="flex-container1">
                <div class="ligne1">
                    <button tyle="align-self: center">bouton 01</button> 

                    <button>bouton 02</button> 
                </div>
                <div class="ligne1">
                    <p class="question">La question</p>
                </div>
                <div class="ligne1">
                    <button>bouton 03</button>  
                </div>
            </div>
            <div class="flex-container1"> <progress value="22" max="100" ></progress> </div>
            <div class="flex-container">
                <div class="flex-container1">
                    <button class="bouton-reponse">bouton 1<br />Et un ajout</button>
                    <button class="bouton-reponse">bouton 2</button>
                    <button class="bouton-reponse">bouton 3</button>
                </div>
                <div class="flex-container1">
                    <button class="bouton-reponse">bouton 4 </br > et un ajout</button>
                    <button class="bouton-reponse">bouton 5</button>
                </div>
                <div class="flex-container1">
                    <button class="bouton-reponse">bouton 6</button>
                    <button class="bouton-reponse">bouton 7</button>
                    <button class="bouton-reponse">bouton 8</button>
                </div>
            </div>
        </div> 
    </body>
</html>