v2 login.css
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
44a2078a9f
commit
8ea65a8218
@ -0,0 +1,111 @@
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #FF8444;
|
||||
height: 80px;
|
||||
}
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
background: #34495e;
|
||||
}
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.header-center h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: #34495e;
|
||||
color: white;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#teams-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#teams-section h2 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#schemas-section {
|
||||
padding: 20px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#schemas-section h2 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.teams-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
#team-list{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.team-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 10px;
|
||||
background-color: #ccc;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*
|
||||
.team-item {
|
||||
display: block;
|
||||
width: calc(100% * (1/4) - 10px - 1px);
|
||||
margin: 10px;
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
float: left;
|
||||
margin: 10px;
|
||||
}
|
||||
*/
|
||||
.team-name {
|
||||
font-size: 18px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.team-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.3 MiB |
@ -1,16 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="index.js"></script>
|
||||
<title>hello</title>
|
||||
<title>Accueil</title>
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css">
|
||||
</head>
|
||||
<body onload="">
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-left">
|
||||
<img src="logo2.png" alt="logo">
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<h2>Bienvenue, Prénom Nom</h2>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<!-- <button>
|
||||
<img src="deconnection.png" alt="Déconnection">
|
||||
<span>Déconnection</span>
|
||||
</button>-->
|
||||
<button class="submit-button">Déconnexion</button>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div id="teams-section">
|
||||
<div id="team-list-h">
|
||||
<h2>Mes équipes</h2>
|
||||
</div>
|
||||
<div id="teams-list">
|
||||
<!-- afficher la liste des équipes -->
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 1</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 2</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 3</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 3</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 3</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 3</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 3</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 3</p>
|
||||
</div>
|
||||
<div class="team-item">
|
||||
<img src="img/logo2.png">
|
||||
<p class="team-name">Equipe 3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="page">
|
||||
<button onclick="window.location.href = 'counter/index.html'">aller au compteur</button>
|
||||
</div>
|
||||
|
||||
<script src="/cordova.js"></script>
|
||||
<div id="schemas-section">
|
||||
<h2>Mes schémas</h2>
|
||||
<div id="schemas-list">
|
||||
<!-- afficher la liste des schémas
|
||||
<div class="shema-item">
|
||||
<img src="logo.png">
|
||||
<p class="shema-name">Shéma 1</p>
|
||||
</div>
|
||||
<div class="shema-item">
|
||||
<img src="logo2.png">
|
||||
<p class="shema-name">Shéma 2</p>
|
||||
</div>
|
||||
<div class="shema-item">
|
||||
<img src="logo2.png">
|
||||
<p class="shema-name">Shéma 3</p>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in new issue