gaspaonrocks/index.html

## index.html
<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sacha GRASSO</title>
        <link rel="stylesheet" href="stylesheet.css">
    </head>
    <body>
        <div id="header">
            <h1>Sacha GRASSO</h1><h2>Fullstack developper</h2>
        </div>
        <div id="container">
            <div id="left-box">
            <img src="sacha.jpg" alt="Sacha GRASSO"><br>
            Un homme moderne, souhaitant être le meilleur des papas et le plus talentueux des développeurs.<br>
            <ul class="notul">
                <li class="notli">06.95.02.33.95</li>
                <li class="notli">gr.sacha.glgm@gmail.com</li>
                <li class="notli">50 avenue de Bourranville <br>33700 MÉRIGNAC</li>
            </ul>
            </div>
            <div id="right-box">
                <div id="experience-box">
                    <h3>Parcours Professionnel</h3>
                    <div class="experience">
                        <h4>Restauration Rapide - 2 ans 1/2</h4>
                        <ul class="ul">
                            <li>Gestion de l'équipe de cuisine ou comptoir</li>
                            <li>Formation des nouveaux équipiers, contrôle des équipiers confirmés et rédaction de Fiches Contrôles Sécurité/Hygiène (FCS/FCH)</li>
                        </ul>
                    </div>
                    <div class="experience">
                        <h4>Restauration Traditionnelle - 3 ans</h4>
                        <ul class="ul">
                            <li>Prise de commande</li>
                            <li>Service salle et comptoir, au plateau et à l'assiette</li>
                            <li>Gestion d'un carré/d'un rang</li>
                            <li>Bartending : service boissons froides, chaudes, cocktails et mocktails </li>
                        </ul>
                    </div>
                    <div class="experience">
                        <h4>Bowling - Saisonnier - 5 ans</h4>
                        <ul class="ul">
                            <li>Gestion de caisse, gestion des locations de pistes et de billards</li>
                            <li>Maintenance des pistes, petites opérations mécaniques</li>
                            <li>Organisation des anniversaires pour enfants</li>
                        </ul>
                    </div>
                </div>
                <div id="studies-box">
                    <h3>Parcours Scolaire</h3>
                    <div class="study">
                        <ul class="ul">
                            <li>Développeur Logiciel ? (Wild Code School Bordeaux)</li>
                            <li>Licence Sciences du vivant (Paris 5 René Descartes)</li>
                            <li>DEUG Sciences du vivant</li>
                            <li>Baccalauréat S (Lycée Pasteur Neuilly)</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <p>On se revoir au bout des 5 mois avec le sourire ! ;-)</p>
        </footer>
    </body>
</html>

## stylesheet.css
body {
    background-color: rgb(131,188,236);
/*    display: flex;
    flex-direction: column;
    flex-wrap: wrap;*/
}
div {
    border-radius: 4px;
}
#header {
    background-color: rgb(5,80,143);
    text-align: center;
    padding: 15px;
    margin: auto;
}
#container {
    display: flex;
    text-align: justify;
}
h1 {
    font-size: 50px;
}
#left-box {
    padding: 3px;
    margin: 5px;
    background-color: rgb(5,80,143);
    color: white;
    width: 30%;
/*    height: 100%;*/
    word-wrap: break-word;
}
img {
    display: block;
    margin: auto;
    width: 100%;
}
.notul {
    padding: 0;
}
.ul {
    background-color: rgb(0,23,40);
    border-radius: 4px;
}
.notli {
    list-style-type: none;
}
#right-box {
    padding: 3px;
    margin: 5px;
    background-color: rgb(5,80,143);
    color: white;
/*    height: 100%;*/
    width: 70%;
}
#experience-box {
    padding: 3px;
    margin: 5px;
    background-color: rgb(0,48,85)
}
.experience {
    padding: 3px;
    margin: auto;
}
#studies-box {
    margin: 5px;
    padding: 3px;
    background-color: rgb(0,48,85)

}
footer {
    padding: 15px;
    text-align: center;
    background-color: rgb(5,80,143);
    border-radius: 4px;
}
	<!DOCTYPE>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Sacha GRASSO</title>
	<link rel="stylesheet" href="stylesheet.css">
	</head>
	<body>
	<div id="header">
	<h1>Sacha GRASSO</h1><h2>Fullstack developper</h2>
	</div>
	<div id="container">
	<div id="left-box">
	<img src="sacha.jpg" alt="Sacha GRASSO"><br>
	Un homme moderne, souhaitant être le meilleur des papas et le plus talentueux des développeurs.<br>
	<ul class="notul">
	<li class="notli">06.95.02.33.95</li>
	<li class="notli">gr.sacha.glgm@gmail.com</li>
	<li class="notli">50 avenue de Bourranville <br>33700 MÉRIGNAC</li>
	</ul>
	</div>
	<div id="right-box">
	<div id="experience-box">
	<h3>Parcours Professionnel</h3>
	<div class="experience">
	<h4>Restauration Rapide - 2 ans 1/2</h4>
	<ul class="ul">
	<li>Gestion de l'équipe de cuisine ou comptoir</li>
	<li>Formation des nouveaux équipiers, contrôle des équipiers confirmés et rédaction de Fiches Contrôles Sécurité/Hygiène (FCS/FCH)</li>
	</ul>
	</div>
	<div class="experience">
	<h4>Restauration Traditionnelle - 3 ans</h4>
	<ul class="ul">
	<li>Prise de commande</li>
	<li>Service salle et comptoir, au plateau et à l'assiette</li>
	<li>Gestion d'un carré/d'un rang</li>
	<li>Bartending : service boissons froides, chaudes, cocktails et mocktails </li>
	</ul>
	</div>
	<div class="experience">
	<h4>Bowling - Saisonnier - 5 ans</h4>
	<ul class="ul">
	<li>Gestion de caisse, gestion des locations de pistes et de billards</li>
	<li>Maintenance des pistes, petites opérations mécaniques</li>
	<li>Organisation des anniversaires pour enfants</li>
	</ul>
	</div>
	</div>
	<div id="studies-box">
	<h3>Parcours Scolaire</h3>
	<div class="study">
	<ul class="ul">
	<li>Développeur Logiciel ? (Wild Code School Bordeaux)</li>
	<li>Licence Sciences du vivant (Paris 5 René Descartes)</li>
	<li>DEUG Sciences du vivant</li>
	<li>Baccalauréat S (Lycée Pasteur Neuilly)</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	<footer>
	<p>On se revoir au bout des 5 mois avec le sourire ! ;-)</p>
	</footer>
	</body>
	</html>
	body {
	background-color: rgb(131,188,236);
	/* display: flex;
	flex-direction: column;
	flex-wrap: wrap;*/
	}
	div {
	border-radius: 4px;
	}
	#header {
	background-color: rgb(5,80,143);
	text-align: center;
	padding: 15px;
	margin: auto;
	}
	#container {
	display: flex;
	text-align: justify;
	}
	h1 {
	font-size: 50px;
	}
	#left-box {
	padding: 3px;
	margin: 5px;
	background-color: rgb(5,80,143);
	color: white;
	width: 30%;
	/* height: 100%;*/
	word-wrap: break-word;
	}
	img {
	display: block;
	margin: auto;
	width: 100%;
	}
	.notul {
	padding: 0;
	}
	.ul {
	background-color: rgb(0,23,40);
	border-radius: 4px;
	}
	.notli {
	list-style-type: none;
	}
	#right-box {
	padding: 3px;
	margin: 5px;
	background-color: rgb(5,80,143);
	color: white;
	/* height: 100%;*/
	width: 70%;
	}
	#experience-box {
	padding: 3px;
	margin: 5px;
	background-color: rgb(0,48,85)
	}
	.experience {
	padding: 3px;
	margin: auto;
	}
	#studies-box {
	margin: 5px;
	padding: 3px;
	background-color: rgb(0,48,85)

	}
	footer {
	padding: 15px;
	text-align: center;
	background-color: rgb(5,80,143);
	border-radius: 4px;
	}