diff --git a/www/css/main.css b/www/css/main.css index 46aac95..991dc5e 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -4,7 +4,7 @@ header { align-items: center; padding: 0 20px 0 20px; background-color: #FF8444; - height: 80px; + height: 160px; } body{ margin: 0; @@ -18,35 +18,35 @@ body{ } .header-left img { - width: 50px; - height: 50px; + width: 120px; + height: 120px; } .header-center h2 { + font-size: 30px; margin: 0; } .submit-button { background-color: #34495e; color: white; - padding: 12px 20px; + padding: 18px 30px; border: none; - border-radius: 4px; + border-radius: 6px; cursor: pointer; float: right; - font-size: 16px; - - box-shadow: 3px 3px #1B1B1B; + font-size: 24px; + box-shadow: 4px 4px #1B1B1B; } #teams-section { display: flex; flex-direction: column; - padding: 20px; + padding: 60px; background-color: #f2f2f2; - border-radius: 0 0 10px 10px; - + border-radius: 10px 10px 10px 10px; box-shadow: 5px 5px #1B1B1B; + margin: 10px; } @@ -57,35 +57,76 @@ body{ margin-bottom: 5px; } -#schemas-section { - padding: 20px; - background-color: #f2f2f2; - border-radius: 10px; - margin-top: 20px; +#teams-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + 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 { - text-align: center; - font-size: 24px; - margin-bottom: 20px; +.team-item .team-name { + margin-bottom: 3px; } -.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; - flex-wrap: wrap; - justify-content: center; + flex-direction: column; + 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; flex-direction: row; flex-wrap: wrap; overflow: hidden; + justify-content: center; } -.team-item { +.schema-item { padding: 15px 15px 5px; display: flex; flex-direction: column; @@ -100,27 +141,16 @@ body{ box-shadow: 3px 3px #585858; } -.team-item .team-name { +.schema-item .schema-name { margin-bottom: 3px; } -/* -.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 { + +.schema-name { font-size: 18px; margin-top: 10px; } -.team-item img { +.schema-item img { border-radius: 15px; width: 100%; height: auto; @@ -128,4 +158,7 @@ body{ max-height: 150px; box-shadow: 2px 2px #A7A7A7; -} \ No newline at end of file +} + + + diff --git a/www/img/shema.png b/www/img/schema.png similarity index 100% rename from www/img/shema.png rename to www/img/schema.png diff --git a/www/index.html b/www/index.html index 27ecf49..e737fc1 100644 --- a/www/index.html +++ b/www/index.html @@ -11,7 +11,7 @@ logo
-

Bienvenue, Prénom Nom

+

Hello Prénom Nom !

+
+ +

Schémas 1

-
- -

Shéma 2

+
+ +

Schémas 2

-
- -

Shéma 3

+
+ +

Schémas 3

-
- -

Shéma 3

+
+ +

Schémas 3

-
- -

Shéma 3

+
+ +

Schémas 3

-
- -

Shéma 3

+
+ +

Schémas 3

-
+ +