clement.freville2
/
Application
forked from IQBall/Application
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v2 login.css

Browse Source
dev
Leo TUAILLON 2 years ago
parent 0d6330b968
commit 4dd3fa4c54
3 changed files with 101 additions and 67 deletions
Show Stats Download Patch File Download Diff File

117
www/css/main.css
Unescape View File

@ -4,7 +4,7 @@ header {
align-items: center; align-items: center;
padding: 0 20px 0 20px; padding: 0 20px 0 20px;
background-color: #FF8444; background-color: #FF8444;
height: 80px; height: 160px;
} }
body{ body{
margin: 0; margin: 0;
@ -18,35 +18,35 @@ body{
} }
.header-left img { .header-left img {
width: 50px; width: 120px;
height: 50px; height: 120px;
} }
.header-center h2 { .header-center h2 {
font-size: 30px;
margin: 0; margin: 0;
} }
.submit-button { .submit-button {
background-color: #34495e; background-color: #34495e;
color: white; color: white;
padding: 12px 20px; padding: 18px 30px;
border: none; border: none;
border-radius: 4px; border-radius: 6px;
cursor: pointer; cursor: pointer;
float: right; float: right;
font-size: 16px; font-size: 24px;
box-shadow: 4px 4px #1B1B1B;
box-shadow: 3px 3px #1B1B1B;
} }
#teams-section { #teams-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 60px;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 0 0 10px 10px; border-radius: 10px 10px 10px 10px;
box-shadow: 5px 5px #1B1B1B; box-shadow: 5px 5px #1B1B1B;
margin: 10px;
} }
@ -57,35 +57,76 @@ body{
margin-bottom: 5px; margin-bottom: 5px;
} }
#schemas-section { #teams-list {
padding: 20px; display: flex;
background-color: #f2f2f2; flex-direction: row;
border-radius: 10px; flex-wrap: wrap;
margin-top: 20px; overflow: hidden;
justify-content: center;
}
.team-item {
padding: 15px 15px 5px;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
min-width: 150px;
margin: 10px;
background-color: #ccc;
border-radius: 15px;
box-shadow: 5px 5px #1B1B1B; overflow: hidden;
box-shadow: 3px 3px #585858;
} }
#schemas-section h2 { .team-item .team-name {
text-align: center; margin-bottom: 3px;
font-size: 24px;
margin-bottom: 20px;
} }
.teams-container { .team-name {
font-size: 18px;
margin-top: 10px;
}
.team-item img {
border-radius: 15px;
width: 100%;
height: auto;
max-width: 150px;
max-height: 150px;
box-shadow: 2px 2px #A7A7A7;
}
#schema-section {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
justify-content: center; padding: 60px;
background-color: #f2f2f2;
border-radius: 10px 10px 10px 10px;
margin: 10px;
box-shadow: 5px 5px #1B1B1B;
} }
#schema-section h2 {
text-align: center;
font-size: 24px;
margin-top: 0;
margin-bottom: 5px;
}
#teams-list {
#schema-list {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
overflow: hidden; overflow: hidden;
justify-content: center;
} }
.team-item { .schema-item {
padding: 15px 15px 5px; padding: 15px 15px 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -100,27 +141,16 @@ body{
box-shadow: 3px 3px #585858; box-shadow: 3px 3px #585858;
} }
.team-item .team-name { .schema-item .schema-name {
margin-bottom: 3px; margin-bottom: 3px;
} }
/*
.team-item { .schema-name {
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; font-size: 18px;
margin-top: 10px; margin-top: 10px;
} }
.team-item img { .schema-item img {
border-radius: 15px; border-radius: 15px;
width: 100%; width: 100%;
height: auto; height: auto;
@ -128,4 +158,7 @@ body{
max-height: 150px; max-height: 150px;
box-shadow: 2px 2px #A7A7A7; box-shadow: 2px 2px #A7A7A7;
} }

0
www/img/shema.png → www/img/schema.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 324 KiB

51
www/index.html
Unescape View File

@ -11,7 +11,7 @@
<img src="img/logo2.png" alt="logo"> <img src="img/logo2.png" alt="logo">
</div> </div>
<div class="header-center"> <div class="header-center">
<h2>Bienvenue, Prénom Nom</h2> <h2>Hello Prénom Nom !</h2>
</div> </div>
<div class="header-right"> <div class="header-right">
<!-- <button> <!-- <button>
@ -54,39 +54,40 @@
</div> </div>
</div> </div>
</div> </div>
<div id="schema-section">
<div id="schemas-section"> <div id="schema-list-h">
<div id="schemas-list-h"> <h2>Mes Schémas</h2>
<h2>Mes schémas</h2>
</div> </div>
<div id="schemas-list"> <div id="schema-list">
<div class="shema-item"> <!-- afficher la liste des équipes -->
<img src="img/shema.png"> <div class="schema-item">
<p class="shema-name">Shéma 1</p> <img src="img/schema.png">
<p class="schema-name">Schémas 1</p>
</div> </div>
<div class="shema-item"> <div class="schema-item">
<img src="img/shema.png"> <img src="img/schema.png">
<p class="shema-name">Shéma 2</p> <p class="schema-name">Schémas 2</p>
</div> </div>
<div class="shema-item"> <div class="schema-item">
<img src="img/shema.png"> <img src="img/schema.png">
<p class="shema-name">Shéma 3</p> <p class="schema-name">Schémas 3</p>
</div> </div>
<div class="shema-item"> <div class="schema-item">
<img src="img/shema.png"> <img src="img/schema.png">
<p class="shema-name">Shéma 3</p> <p class="schema-name">Schémas 3</p>
</div> </div>
<div class="shema-item"> <div class="schema-item">
<img src="img/shema.png"> <img src="img/schema.png">
<p class="shema-name">Shéma 3</p> <p class="schema-name">Schémas 3</p>
</div> </div>
<div class="shema-item"> <div class="schema-item">
<img src="img/shema.png"> <img src="img/schema.png">
<p class="shema-name">Shéma 3</p> <p class="schema-name">Schémas 3</p>
</div> </div>
</div> </div>
</div>
</div> </div>
</main> </main>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save