refactor: Dodano folder main_page

style: Dodano szablon strony głównej z przykładową zawartością
This commit is contained in:
Lewy 2022-06-02 00:48:18 +02:00
parent 5462828aba
commit 4e443c6463
16 changed files with 210 additions and 166 deletions

View File

@ -3,6 +3,7 @@ header {
/*Box alignment*/ /*Box alignment*/
display: flex; display: flex;
margin: auto auto 1%; margin: auto auto 1%;
/*height: 8vh;*/
/*Content alignment*/ /*Content alignment*/
flex-flow: row wrap; flex-flow: row wrap;
@ -66,4 +67,11 @@ header {
color: #ffffff; color: #ffffff;
font-family: Montserrat, serif; font-family: Montserrat, serif;
font-size: 18px; font-size: 18px;
text-decoration: none;
} }
/*Link underline fix*/
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

View File

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="11" cy="11" r="6" stroke="#AFAFAF"/>
<path d="M20 20L17 17" stroke="#AFAFAF" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 225 B

View File

@ -0,0 +1,35 @@
.settingsWszystkie {
height: 100%;
width: 10%;
float: left;
text-align: center;
border: 1px #AFAFAF solid;
}
.settingsMoje {
height: 100%;
width: 10%;
float: left;
text-align: center;
border: 1px #AFAFAF solid;
}
.settingsKafle {
height: 100%;
width: 10%;
float: right;
text-align: center;
border: 1px #AFAFAF solid;
}
.settingsLista {
height: 100%;
width: 10%;
float: right;
text-align: center;
border: 1px #AFAFAF solid;
}

View File

@ -0,0 +1,71 @@
.tournamentBox {
/*Box align*/
flex-direction: column;
flex-wrap: nowrap;
/*Visual*/
background-color: #ffffff;
color: white;
border: 1px #AFAFAF solid;
height: 15vh;
width: 100%;
}
/**/
.tournamentIconBox {
width: 10%;
height: 100%;
float: left;
/*padding: 25px;*/
top: 50%;
left: 50%;
}
.tournamentIcon {
margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/**/
.tournamentDataBox {
width: 90%;
height: 100%;
float: right;
}
.tournamentData {
margin-top: 1%;
text-align: left;
/*padding-left: 10%;*/
color: #282828E5;
}
.tournamentOpen {
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 15px;
gap: 10px;
/*position: absolute;*/
width: 73px;
height: 29px;
/* PFP GREEN */
background: #007C36;
border-radius: 15px;
border: 1px solid;
font-family: Montserrat, serif;
color: white;
}

View File

@ -0,0 +1,53 @@
@import "../_global/header.css";
@import "single_tournament.css";
@import "settings.css";
/*main*/
body {
margin: 0;
}
.container {
height: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
}
/*2'nd layer*/
.searchBox {
height: 100vh;
width: 5vh;
float: left;
padding: 1%;
border: 1px #AFAFAF solid;
}
.contentBox {
height: 100%;
width: 95%;
float: right;
position: relative;
}
/*3'rd layer*/
.filterBox {
height: 10vh;
width: 100%;
background-color: #C0C0C0;
}
.settingsBox {
height: 5vh;
width: 100%;
border: 1px #AFAFAF solid;
}
/*items*/
.search {
display: block;
margin-left: auto;
margin-right: auto;
}

View File

@ -12,7 +12,7 @@
<body> <body>
<header> <header>
<div class="logoBox"> <div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a> <a class="header_link" href="../main%20page/index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div> </div>
<div class="linkBox"> <div class="linkBox">
<!-- <span class="dot">JM</span>--> <!-- <span class="dot">JM</span>-->

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@ -15,7 +15,7 @@
<header> <header>
<div class="logoBox"> <div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a> <a class="header_link" href="../main%20page/index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div> </div>
<div class="linkBox"> <div class="linkBox">
<!-- <span class="dot">JM</span>--> <!-- <span class="dot">JM</span>-->

View File

@ -1,43 +0,0 @@
.eventHeader {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.event {
background-color: #0f64f2;
color: white;
border-style: solid;
border-width: 2px;
margin-top: 25px;
margin-right: 25px;
flex-direction: column;
flex-wrap: wrap;
height: auto;
}
.eventInside {
background-color: white;
color: #4C8BF5;
height: auto;
border: solid;
border-color: lightgray;
padding: 10px;
}
.eventInside>p {
color: lightgray;
}
.myButton {
background-color: #4C8BF5;
border-radius: 28px;
border: 1px solid #4C8BF5;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 9px;
padding: 8px 13px;
text-decoration: none;
}

View File

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Padel Tournaments System</title> <title>Padel Tournaments System</title>
<link href="style.css" rel="stylesheet"> <link href="_main%20page/style.css" rel="stylesheet">
</head> </head>
<body> <body>
@ -22,39 +22,48 @@
</div> </div>
</header> </header>
<!-- --> <!-- -->
<!-- TEST BOX SINGLE_TOURNAMENT--> <!-- -->
<!-- --> <!-- -->
<div class="container"> <div class="container">
<div class="tournamentBox"> <!-- Filtr -->
<div class="tournamentIconBox"> <div class="searchBox">
<img class="tournamentIcon" src="cup.svg"> <img src="_main%20page/search.svg" class="search" alt="">
</div>
<!-- -->
<div class="contentBox">
<div class="filterBox">
</div> </div>
<div class="tournamentDataBox"> <div class="settingsBox">
<div class="tournamentData"> <div class="settingsWszystkie">WSZYSTKIE</div>
Tu jest text <div class="settingsMoje">MOJE</div>
<div class="settingsLista">LISTA</div>
<div class="settingsKafle">Kafle</div>
</div>
<div class="tournamentBox">
<div class="tournamentIconBox">
<img class="tournamentIcon" src="_main%20page/cup.svg">
</div> </div>
</div>
<div class="tournamentDataBox">
<div class="tournamentData">
<h4>Turniej majowy 2022</h4>
Propadel, Warszawa</br>
13/05/2022 do 15/05/2022
<button class="tournamentOpen">OPEN</button>
</div>
</div>
</div>
</div> </div>
<div class="event">
<div class="eventHeader">Nadchodzące turnieje</div>
<div class="eventInside">Turniej majowy 2022
<p> Propadel|Warszawa</p>
<p>13/05/2022 do 15/05/2022</p>
<button class="myButton">Open</button>
</div>
<div class="eventInside">Trójmiasto Cup 2022
<p> Padbox | Gdańsk</p>
<p> 03/06/2022 do 05/06/2022</p>
<button class="myButton">Open</button>
</div>
<div class="lastevent"></div>
</div>

View File

@ -9,7 +9,7 @@
<body> <body>
<header> <header>
<div class="logoBox"> <div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a> <a class="header_link" href="../main%20page/index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div> </div>
<div class="linkBox"> <div class="linkBox">
<!-- <span class="dot">JM</span>--> <!-- <span class="dot">JM</span>-->

View File

@ -1,79 +0,0 @@
.tournamentBox {
background-color: #0f64f2;
color: white;
border-style: solid;
border-width: 2px;
margin-top: 25px;
/*Sztuczny margin od drugiego boxa*/
margin-right: 1000px;
flex-direction: column;
flex-wrap: nowrap;
height: 160px;
width: 600px
}
/**/
.tournamentIconBox {
width: 20%;
height: 100%;
float: left;
/*padding: 25px;*/
top: 50%;
left: 50%;
}
.tournamentIcon {
margin: 0;
position: relative;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/**/
.tournamentDataBox {
width: 80%;
height: 100%;
float: right;
}
.tournamentData {
margin-top: 5%;
align-items: center;
text-align: left;
/*padding-left: 10%;*/
}
/**/
.eventHeader {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.eventInside {
background-color: white;
color: #4C8BF5;
height: auto;
border: solid;
border-color: lightgray;
padding: 10px;
}
.eventInside>p {
color: lightgray;
}
.myButton {
background-color: #4C8BF5;
border-radius: 28px;
border: 1px solid #4C8BF5;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 9px;
padding: 8px 13px;
text-decoration: none;
}

View File

@ -1,14 +0,0 @@
@import "_global/header.css";
@import "event.css";
@import "single_tournament.css";
body {
margin: 0;
}
.container {
height: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
}

View File

@ -12,7 +12,7 @@
<body> <body>
<header> <header>
<div class="logoBox"> <div class="logoBox">
<a class="header_link" href="../index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a> <a class="header_link" href="../main%20page/index.html"><img class="logo" src="../_global/logo.svg" alt="Logo error"></a>
</div> </div>
<div class="linkBox"> <div class="linkBox">
<!-- <span class="dot">JM</span>--> <!-- <span class="dot">JM</span>-->