cba85/index.html

## index.html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
        <script src="scripts.js" defer></script>
    </head>
    <body>
        <div class="notification success" style="display: none">
            ✌️ Votre profil a bien été mis à jour.
        </div>

        <header id="header">x
            <h1>Sam Kebab 🥙</h1>
        </header>

        <main>
            <h2>Votre compte</h2>

            <div id="profile">
                <table>
                    <thead>
                        <tr>
                            <td>Libellé</td>
                            <td>Valeur</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>Nom</th>
                            <td>Samuel Small</td>
                        </tr>
                        <tr>
                            <th>Occupation</th>
                            <td>Maître Kebabier</td>
                        </tr>
                        <tr>
                            <th>Email</th>
                            <td>sam@kebab.fr</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <form id="profile-edit-form" style="display: none">
                <label for="name">Nom</label>
                <input type="text" id="name" value="Samuel Small" />

                <label for="occupation">Occupation</label>
                <input type="text" id="occupation" value="Maître Kebabier" />

                <label for="email">Email</label>
                <input type="text" id="email" value="sam@kebab.fr" />

                <button type="submit" id="profile-edit-submit">
                    Enregistrer
                </button>
            </form>

            <button id="profile-edit-button">Modifier mon compte</button>
        </main>
    </body>
</html>

## style.css
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

body {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  color: #555;
  margin:  0;
  padding:  0;
}

main {
  margin: 0 auto;
  max-width: 50em;
  padding: 4em 1em;
}

h1,
h2,
strong {
  color: #333;
}


a {
  color: #e81c4f;
}

header {
  background-color: #263d36;
  background-image: url("https://images.unsplash.com/photo-1584959370147-fcdd784b2e45?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  line-height: 1.2;
  padding: 7vw 2em;
  text-align: center;
}

header img {
  display: inline-block;
  height: 120px;
  vertical-align: top;
  width: 120px;
}

header h1 {
  color: white;
  font-size: 2.5em;
  font-weight: 700;
  text-shadow: 1px 1px 1px #000;
}

.notification {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 1;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    margin-bottom: 5px;
    padding:  1em;
}

.success {
  background-color:  hsl(171, 100%, 41%);
  color:  white;
}

table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    text-align: left;
}

th,
td {
    padding: 12px 15px;
}

thead tr {
    background-color: #e81c4f;
    color: #ffffff;
}

tbody tr {
    border-bottom: 1px solid #dddddd;
}

tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

tbody tr:last-of-type {
    border-bottom: 2px solid #e81c4f;
}

button {
  background-color:  inherit;
  border: 1px solid #e81c4f;
  border-radius: 290486px;
  color: #e81c4f;
  font-size: 0.6em;
  letter-spacing: 0.2em;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: none 200ms ease-out;
  transition-property: color, background;
  cursor:  pointer;
}

button:hover {
  background:  #e81c4f;
  color: white;
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

button[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button[type=submit]:hover {
  background-color: #45a049;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="style.css" />
	<script src="scripts.js" defer></script>
	</head>
	<body>
	<div class="notification success" style="display: none">
	✌️ Votre profil a bien été mis à jour.
	</div>

	<header id="header">x
	<h1>Sam Kebab 🥙</h1>
	</header>

	<main>
	<h2>Votre compte</h2>

	<div id="profile">
	<table>
	<thead>
	<tr>
	<td>Libellé</td>
	<td>Valeur</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<th>Nom</th>
	<td>Samuel Small</td>
	</tr>
	<tr>
	<th>Occupation</th>
	<td>Maître Kebabier</td>
	</tr>
	<tr>
	<th>Email</th>
	<td>sam@kebab.fr</td>
	</tr>
	</tbody>
	</table>
	</div>

	<form id="profile-edit-form" style="display: none">
	<label for="name">Nom</label>
	<input type="text" id="name" value="Samuel Small" />

	<label for="occupation">Occupation</label>
	<input type="text" id="occupation" value="Maître Kebabier" />

	<label for="email">Email</label>
	<input type="text" id="email" value="sam@kebab.fr" />

	<button type="submit" id="profile-edit-submit">
	Enregistrer
	</button>
	</form>

	<button id="profile-edit-button">Modifier mon compte</button>
	</main>
	</body>
	</html>
	@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

	body {
	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	line-height: 1.5;
	color: #555;
	margin: 0;
	padding: 0;
	}

	main {
	margin: 0 auto;
	max-width: 50em;
	padding: 4em 1em;
	}

	h1,
	h2,
	strong {
	color: #333;
	}


	a {
	color: #e81c4f;
	}

	header {
	background-color: #263d36;
	background-image: url("https://images.unsplash.com/photo-1584959370147-fcdd784b2e45?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1740&q=80");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	line-height: 1.2;
	padding: 7vw 2em;
	text-align: center;
	}

	header img {
	display: inline-block;
	height: 120px;
	vertical-align: top;
	width: 120px;
	}

	header h1 {
	color: white;
	font-size: 2.5em;
	font-weight: 700;
	text-shadow: 1px 1px 1px #000;
	}

	.notification {
	position: fixed;
	right: 10px;
	top: 10px;
	z-index: 1;
	padding: 5px 5px 5px 5px;
	border-radius: 5px;
	margin-bottom: 5px;
	padding: 1em;
	}

	.success {
	background-color: hsl(171, 100%, 41%);
	color: white;
	}

	table {
	border-collapse: collapse;
	margin: 25px 0;
	font-size: 0.9em;
	font-family: sans-serif;
	width: 100%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
	text-align: left;
	}

	th,
	td {
	padding: 12px 15px;
	}

	thead tr {
	background-color: #e81c4f;
	color: #ffffff;
	}

	tbody tr {
	border-bottom: 1px solid #dddddd;
	}

	tbody tr:nth-of-type(even) {
	background-color: #f3f3f3;
	}

	tbody tr:last-of-type {
	border-bottom: 2px solid #e81c4f;
	}

	button {
	background-color: inherit;
	border: 1px solid #e81c4f;
	border-radius: 290486px;
	color: #e81c4f;
	font-size: 0.6em;
	letter-spacing: 0.2em;
	padding: 1em 2em;
	text-transform: uppercase;
	text-decoration: none;
	transition: none 200ms ease-out;
	transition-property: color, background;
	cursor: pointer;
	}

	button:hover {
	background: #e81c4f;
	color: white;
	}

	input[type=text] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	}

	button[type=submit] {
	width: 100%;
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	}

	button[type=submit]:hover {
	background-color: #45a049;
	}