From ed919b954989bf3004b26d2afe5c90a9306426bb Mon Sep 17 00:00:00 2001 From: MB Date: Thu, 5 Nov 2020 16:22:14 +0100 Subject: [PATCH] =?UTF-8?q?Odstran=C4=9Bn=C3=AD=20v=C3=BDchoz=C3=ADch=20st?= =?UTF-8?q?yl=C5=AF=20u=20tla=C4=8D=C3=ADtka?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 213 +++++++++++++++++++++++++------------------------- 1 file changed, 108 insertions(+), 105 deletions(-) diff --git a/css/style.css b/css/style.css index ec6082f..f038a2f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,105 +1,108 @@ -@font-face { - font-family: moderat-regular; - src: url(../fonts/moderat-regular.otf) -} -@font-face { - font-family: moderat-black; - src: url(../fonts/moderat-black.otf) -} - -html, body { - margin: 0; - padding: 0; -} - -body { - font-size: 1em; - font-family: moderat-regular; - background: url(../img/header-pattern.svg) no-repeat left top; - background-size: 90% auto; -} - -.wrap { - max-width: 62em; - margin: 0 auto; - padding: 0 1em; -} - -.messenger { - max-width: 100%; - display: block; - margin-top: 2em; -} -.messenger img { max-width: 12em; } - -h1, h2, h3 { font-family: moderat-black; } -h1 { color: #d63647; margin-bottom: 0; clear: both; font-size: 3em; } -h2, h3 { color: #1fbcc6; } - -p { line-height: 1.6; } - -header { width: auto; } -header .logo { padding: 30px; float: right; text-align: center; box-sizing: border-box; } -header .logo img { height: 10em; } -header .row { height: 600px; margin: 0; padding-bottom: 150px; margin-bottom: -300px; } -header .row img { max-height: 500px; } -header .row p { text-align: justify; max-width: 45%; font-size: 1.2em; margin: 2em 0; } - -main { - padding-top: 200px; margin-top: -200px; - padding-bottom: 100px; margin-bottom: -100px; - background: url(../img/timeline.svg) no-repeat center top; - background-size: auto 100%; -} - -.row { height: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 5em 0; } -.row>img { max-height: 30em; max-width: 40%; } - -article { - background-color: #eee; - border: 3px solid #ddd; - border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%; - position: relative; - max-width: 32%; padding: 1.7em; -} -article h2 { margin-top: -1.5em; font-size: 2.6em; white-space: nowrap; } -article:nth-child(1) h2 { margin-right: -1.5em; text-align: right; } -article:nth-child(2) h2 { margin-left: -1.5em; } -article::before { - content: ''; - border: 2px solid #dfdfdf; - display: block; - width: 100%; - height: 100%; - position: absolute; - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg); - border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%; - z-index: -1; -} -article: nth-child(1)::before { - transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg); - border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%; -} - -@media screen and (max-width: 699px) { - body { background: none; font-size: 1em; } - - .messenger { text-align: center; } - - header { width: 100%; } - header .logo { padding-top: 30px; width: 100%; float: none; margin: 0 auto; } - header .row p { max-width: 100%; } - - main { background: none; } - - .row { flex-direction: column; margin: 4em 0; } - .row:nth-child(even) { flex-direction: column-reverse; } - .row>img { max-height: 80%; max-width: 80%; margin: 1em 0; } - - article { max-width: 100%; align-self: center !important; padding: 1em; } - article h2 { margin-top: auto; font-size: 2.3em; white-space: initial; } - article:nth-child(1) h2 { margin-right: auto; text-align: right; } - article:nth-child(2) h2 { margin-left: auto; } -} +@font-face { + font-family: moderat-regular; + src: url(../fonts/moderat-regular.otf) +} +@font-face { + font-family: moderat-black; + src: url(../fonts/moderat-black.otf) +} + +html, body { + margin: 0; + padding: 0; +} + +body { + font-size: 1em; + font-family: moderat-regular; + background: url(../img/header-pattern.svg) no-repeat left top; + background-size: 90% auto; +} + +.wrap { + max-width: 62em; + margin: 0 auto; + padding: 0 1em; +} + +.messenger { + max-width: 100%; + display: block; + margin-top: 2em; +} +.messenger img { max-width: 12em; } + +h1, h2, h3 { font-family: moderat-black; } +h1 { color: #d63647; margin-bottom: 0; clear: both; font-size: 3em; } +h2, h3 { color: #1fbcc6; } + +p { line-height: 1.6; } + +header { width: auto; } +header .logo { padding: 30px; float: right; text-align: center; box-sizing: border-box; } +header .logo img { height: 10em; } +header .row { height: 600px; margin: 0; padding-bottom: 150px; margin-bottom: -300px; } +header .row img { max-height: 500px; } +header .row p { text-align: justify; max-width: 45%; font-size: 1.2em; margin: 2em 0; } + +main { + padding-top: 200px; margin-top: -200px; + padding-bottom: 100px; margin-bottom: -100px; + background: url(../img/timeline.svg) no-repeat center top; + background-size: auto 100%; +} + +.row { height: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 5em 0; } +.row>img { max-height: 30em; max-width: 40%; } + +article { + background-color: #eee; + border: 3px solid #ddd; + border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%; + position: relative; + max-width: 32%; padding: 1.7em; +} +article h2 { margin-top: -1.5em; font-size: 2.6em; white-space: nowrap; } +article:nth-child(1) h2 { margin-right: -1.5em; text-align: right; } +article:nth-child(2) h2 { margin-left: -1.5em; } +article::before { + content: ''; + border: 2px solid #dfdfdf; + display: block; + width: 100%; + height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg); + border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%; + z-index: -1; +} +article: nth-child(1)::before { + transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg); + border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%; +} + +@media screen and (max-width: 699px) { + body { background: none; font-size: 1em; } + + .messenger { text-align: center; } + + header { width: 100%; } + header .logo { padding-top: 30px; width: 100%; float: none; margin: 0 auto; } + header .row p { max-width: 100%; } + + main { background: none; } + + .row { flex-direction: column; margin: 4em 0; } + .row:nth-child(even) { flex-direction: column-reverse; } + .row>img { max-height: 80%; max-width: 80%; margin: 1em 0; } + + article { max-width: 100%; align-self: center !important; padding: 1em; } + article h2 { margin-top: auto; font-size: 2.3em; white-space: initial; } + article:nth-child(1) h2 { margin-right: auto; text-align: right; } + article:nth-child(2) h2 { margin-left: auto; } +} + +/* Odstraneni stylu u tlacitka */ +input, button, submit { border:none; } \ No newline at end of file