kankys/Akademie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pohromadě

Browse Source
This commit is contained in:
Lukáš
2024-02-14 00:04:31 +01:00
commit f1cae3ff9a
44 changed files with 1391 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/.gitignore generated vendored Normal file
View File

@ -0,0 +1,13 @@
# Default ignored files
/shelf/
/workspace.xml
# Rider ignored files
/.idea.Lekce 3 prezentační web.iml
/contentModel.xml
/modules.xml
/projectSettingsUpdater.xml
# Editor-based HTTP Client requests
/httpRequests/
# Datasource local storage ignored files
/dataSources/
/dataSources.local.xml

4
Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/encodings.xml generated Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
</project>

8
Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/indexLayout.xml generated Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="UserContentModel">
<attachedFolders />
<explicitIncludes />
<explicitExcludes />
</component>
</project>

7
Lekce 3 prezentační web/.idea/.idea.Lekce 3 prezentační web.dir/.idea/prettier.xml generated Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PrettierConfiguration">
<option name="myConfigurationMode" value="AUTOMATIC" />
<option name="myRunOnSave" value="true" />
</component>
</project>

BIN
Lekce 3 prezentační web/images/screenshot-1705584576967.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
Lekce 3 prezentační web/images/screenshot-1705584803459.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

39
Lekce 3 prezentační web/index.html Normal file
View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Document</title>
</head>
<body>
<div class="header">
<img class="logo" src="images/screenshot-1705584576967.png" alt="engeto logo"></img>
<div class="heading-logo">ENGETO Academy</div>
</div>
<div class="content">
<img class="image" src="images/screenshot-1705584803459.png" alt=""> </img>
</div>
<div class="article">
<div class="heading">
Programovat můžeš i ty. Pusť se do toho!
</div>
<p>Základy programování se i jako úplný nováček naučíš už za pár týdnů. A po několika měsících studia můžeš získat
svoji první práci v IT nebo lepší pozici. <br />
Vyber si některý z našich kurzů programování nebo se přidej na školení. Čekají tě interaktivní cvičení, projekty,
zkušení lektoři z praxe, možnost spolupráce s IT firmami a spoustu dalšího.</p>
</div>
<div class="footer">
<img class="logo-czech-starter" src="images/screenshot-1705584576967.png" width="120" alt="Logo Czech Starter">
<div>Společnost ENGETO s.r.o. byla podpořená agenturou CzechInvest v rámci projektu Podpora start-upů.</div>
<div>Kontaktní email: <a href="mailto:info@engeto.cz">info@engeto.com</a></div>
</div>
</body>
</html>

67
Lekce 3 prezentační web/style.css Normal file
View File

@ -0,0 +1,67 @@
.header {
text-align: center;
background-color: #fff;
width: 100%;
height: auto;
padding: 10px;
}
.logo {
width: 50px;
display: inline-block;
}
.heading-logo {
display: none;
}
.content {
text-align: center;
position: relative;
margin: 0 auto;
padding: 10px;
width: 50%;
}
.image {
width: 100%;
height: auto;
border-radius: 20%;
}
.button {
position: absolute;
bottom: 25px;
right: 20px;
background-color: green;
color: #fff;
padding: 10px;
border-radius: 4px;
cursor: pointer;
}
.article {
text-align: center;
width: 50%;
margin: 0 auto;
padding: 10px;
}
.heading {
font-size: 26px;
font-wight: 800;
}
.footer {
font-size: 15px;
text-align: center;
background-color: #007fff;
padding: 10px;
color: #ffffff;
}
/* Mobilní zobrazení */
@media only screen and (max-width: 576px) {
.heading-logo {
/* šchovaný logo */
display: block;
}
}

20
Lekce 3 prezentační web/zadani.md Normal file
View File

@ -0,0 +1,20 @@
V rámci domácího úkolu ze teto lekce aplikuješ nově naučené poznatky a zopakuješ si učivo z předchozích lekcí – určení pozice, vnější odsazení a jiné. Úkolem bude upravit stávající stránku v CodePenu tak, aby splňovala příklad na obrázku a zadání níže. Úkol můžeš zpracovávat v CodePenu, ale doporučujeme vypracovat samostatně ve VS Code, abys sis procvičil/a vytvoření kostry HTML dokumentu a napojení CSS souboru.
Úkolem bude vytvořit prezentační webovou stránku ENGETA:
1. Třídě .header, .content, .article nastavíme vnitřní odsazení (padding).
2. Použitím media query vytvoříme bod zlomu pro šířku od 576px a víc.
3. Pro zařízení se šířkou do 576px (mobil) skryjeme třídu .heading-logo.
4. Pro zařízení se šířkou nad 576px a víc (desktop) změníme šířku třídy .content na 50% a vycentrujeme element pomoci margin: 0 auto.
5. Pro zařízení se šířkou nad 576px a víc (desktop) změníme šířku třídy .article na 50% a vycentrujeme element pomoci margin: 0 auto.
6. Pro zařízení se šířkou nad 576px a víc (desktop) změníme tříde .heading velkost fontu na 26px.
7. Třídě .image přidáme rámeček a zakulatíme mu rohy.
8. Přidáme tlačítko, které bude umístěné v dolním pravém rohu obrázku.