fr/web-semprace
1
0
Fork 0
Code Pull Requests Activity

added: aside infotable, fixed: nav and others

Browse Source
This commit is contained in:
Filip Rojek 2023-11-20 20:11:14 +01:00
parent 3c7901ff7a
commit 6344aa902a
14 changed files with 90 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
sass/footer.scss
View File

@ -1,10 +0,0 @@
footer {
display: flex;
justify-content: center;
padding: 1rem;
a {
color: blue;
text-decoration: none;
}
}

1
sass/global.scss
View File

@ -6,6 +6,7 @@
body {
font-family: 'Kanit', sans-serif;
background-color: var(--clr-lavender);
}
main {

4
sass/header.scss
View File

@ -9,7 +9,9 @@ nav {
align-items: center;
gap: 2rem;
}
.nav-right > a {
display: flex;
}
a {
text-decoration: none;
font-size: 1.5rem;

54
sass/main.scss
View File

@ -1,27 +1,73 @@
main {
display: flex;
gap: 2rem;
margin-top: 2rem;
section#news {
width: 60vw;
}
aside {
aside{
width: 40vw;
display: flex;
flex-direction: column;
align-items: center;
margin: 2rem 0;
padding: 2rem;
background-color: var(--clr-cards);
border-radius: 15px;
section#vstupenky-wrapper {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 2rem;
}
a.vstupenky {
background-color: orange;
width: 80%;
background-color: orange;
padding: 1rem 2rem;
color: var(--clr-murrey);
text-decoration: none;
font-weight: bold;
font-size: 3rem;
font-size: 2rem;
text-align: center;
border-color: var(--clr-murrey);
border-radius: 15px;
border-style: solid;
border-width: 3px;
}
.infotable {
display: flex;
flex-direction: column;
gap: 2rem;
}
.info-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: 4rem;
color: var(--clr-murrey);
text-align: left;
img {
width: 100px;
}
}
.info-wrapper:nth-child(even) {
flex-direction: row-reverse;
text-align: right;
}
}
footer {
display: flex;
justify-content: center;
a {
color: blue;
text-decoration: none;
}
}
}

3
sass/vars.scss
View File

@ -4,5 +4,6 @@
--clr-murrey: #79214c;
--clr-blush: #cf6379;
--clr-melon: #ffadad;
--container-size: 40rem;
--clr-cards: #e4e3ff;
--container-size: 10vw;
}

BIN
static/img/beerpong.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/img/doleva.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/img/doprava.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
static/img/fotokoutek.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/img/muzika.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
static/img/prekvapeni.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/img/tombola.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
static/img/uvod.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

64
templates/base.html
View File

@ -7,7 +7,6 @@
<link rel="stylesheet" href="/vars.css">
<link rel="stylesheet" href="/global.css">
<link rel="stylesheet" href="/header.css">
<link rel="stylesheet" href="/footer.css">
<link rel="stylesheet" href="/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -32,13 +31,15 @@
<section id="news">
{% block news %} {% endblock %}
</section>
<section class="aside-wrapper">
<aside>
<section class="asidebox">
<section id="vstupenky-wrapper">
<a href="#" class="vstupenky">VSTUPENKY &gt;&gt;</a>
<h1>Na co se můžete těšit?</h1>
</section>
<section class="infotable">
<div>
<img src="pkmples-web-new-material/ikony/uvod.png" alt="ikonka" />
<div class="info-wrapper">
<img src="/img/uvod.png" alt="ikonka" />
<div class="text">
<h3>Slavnostní úvod</h3>
<p>
@ -46,17 +47,8 @@
</p>
</div>
</div>
<div>
<img src="pkmples-web-new-material/ikony/fotokoutek.png" alt="ikonka" />
<div class="text">
<h3>Fotokoutek</h3>
<p>
Vyblejsknem tě samotnýho nebo s celou partou. A to v našem koutku i na tanečním place!
</p>
</div>
</div>
<div>
<img src="pkmples-web-new-material/ikony/muzika.png" alt="ikonka" />
<div class="info-wrapper">
<img src="/img/muzika.png" alt="ikonka" />
<div class="text">
<h3>Kvalitní muzika</h3>
<p>
@ -65,17 +57,8 @@
</p>
</div>
</div>
<div>
<img src="pkmples-web-new-material/ikony/beerpong.png" alt="ikonka" />
<div class="text">
<h3>Beer pong</h3>
<p>
Zahraj si o super ceny v týhle obdobě americkýho fenoménu.
</p>
</div>
</div>
<div>
<img src="pkmples-web-new-material/ikony/tombola.png" alt="ikonka" />
<div class="info-wrapper">
<img src="/img/tombola.png" alt="ikonka" />
<div class="text">
<h3>Tombola</h3>
<p>
@ -83,8 +66,26 @@
</p>
</div>
</div>
<div>
<img src="pkmples-web-new-material/ikony/prekvapeni.png" alt="ikonka" />
<div class="info-wrapper">
<img src="/img/fotokoutek.png" alt="ikonka" />
<div class="text">
<h3>Fotokoutek</h3>
<p>
Vyblejsknem tě samotnýho nebo s celou partou. A to v našem koutku i na tanečním place!
</p>
</div>
</div>
<div class="info-wrapper">
<img src="/img/beerpong.png" alt="ikonka" />
<div class="text">
<h3>Beer pong</h3>
<p>
Zahraj si o super ceny v týhle obdobě americkýho fenoménu.
</p>
</div>
</div>
<div class="info-wrapper">
<img src="/img/prekvapeni.png" alt="ikonka" />
<div class="text">
<h3>Půlnoční překvapení</h3>
<p>
@ -92,13 +93,12 @@
</p>
</div>
</div>
</div>
</section>
</section>
</aside>
<footer>
<a href="https://www.fofrweb.com/" target="_blank">Vytvořeno týmem Fofrweb</a>
</footer>
</aside>
</section>
</main>
</body>