commit b8925215023b99cfd160b89b93a30600cc230988 Author: Lukáš Date: Sun Feb 25 19:51:57 2024 +0100 Harry - bez JS diff --git a/colors.css b/colors.css new file mode 100644 index 0000000..7b72e80 --- /dev/null +++ b/colors.css @@ -0,0 +1,5 @@ +:root { + --special-white: #ffffff; + --special-blue: #1f1727; + --special-pink: #c41b64; +} diff --git a/img/background.webp b/img/background.webp new file mode 100644 index 0000000..b6a7681 Binary files /dev/null and b/img/background.webp differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..ea0d00b Binary files /dev/null and b/img/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6cbb96f --- /dev/null +++ b/index.html @@ -0,0 +1,38 @@ + + + + + + + Responsivní navigace + + + + + + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..82acd0d --- /dev/null +++ b/style.css @@ -0,0 +1,103 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Ubuntu:wght@300;700&display=swap"); +@import url("colors.css"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + color: var(--special-white); + font-family: "Ubuntu", sans-serif; +} + +.logo { + flex-grow: 1; +} + +.logo img { + width: 200px; + margin-left: 20px; + margin-top: 10px; +} + +.welcome { + background: url("img/background.webp"); + min-height: calc(100vh - 70px); + background-size: cover; + background-position: center; +} + +.navbar { + background-color: var(--special-blue); + display: flex; + justify-content: space-around; + align-items: center; + line-height: 5rem; +} + +.left h1 { + font-size: 2.5rem; + cursor: pointer; +} + +.checkBtn { + display: none; +} + +#check { + display: none; +} + +.checkBtn { + cursor: pointer; + font-size: 30px; + float: right; + color: var(--special-pink); + line-height: 80px; +} + +.right ul { + display: flex; + list-style: none; +} + +.right ul li a { + padding: 10px 20px; + font-size: 1.2rem; + color: var(--special-white); + cursor: pointer; + text-decoration: none; + transition: all 1s; +} + +.right ul li a:hover { + background-color: var(--special-white); + border-radius: 7px; + color: var(--special-blue); +} + +@media (max-width: 700px) { + .list { + width: 100%; + height: 100vh; + background-color: var(--special-blue); + text-align: center; + display: flex; + flex-direction: column; + position: fixed; + top: 4rem; + left: 100%; + transition: all 1s; + } + + #check { + display: none; + } + + .checkBtn { + display: block; + } + + #check:checked ~ ul { + left: 0%; + } +}