diff --git a/css/style.css b/css/style.css index 4b26af7..03e0666 100644 --- a/css/style.css +++ b/css/style.css @@ -1,58 +1,58 @@ @font-face { - font-family:moderat-regular; - src:url(../fonts/moderat-regular.otf) + font-family: moderat-regular; + src: url(../fonts/moderat-regular.otf) } html, body { - margin:0; - padding:0; + margin: 0; + padding: 0; } body { - font-size:1.4em; - font-family:moderat-regular; - background:url(../img/header-pattern.svg) no-repeat left top; + font-size: 1.4em; + font-family: moderat-regular; + background: url(../img/header-pattern.svg) no-repeat left top; background-size: 90% auto; } -p { text-align:justify; } +p { text-align: justify; } .wrap { - max-width:1200px; - margin:0 auto; - padding:0 1em; + max-width: 1200px; + margin: 0 auto; + padding: 0 1em; } -h1 { color:#d63647; margin-bottom:0; clear:both; } -h2, h3 { color:#68c7d2; } +h1 { color: #d63647; margin-bottom: 0; clear: both; } +h2, h3 { color: #68c7d2; } -header { width:auto; } -header .logo { padding:30px; float:right; text-align:center; max-width:150px; padding-top:150px; } -header .logo img { max-width:150px; } -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:35%; } +header { width: auto; } +header .logo { padding: 30px; float: right; text-align: center; max-width: 150px; padding-top: 150px; } +header .logo img { max-width: 150px; } +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: 35%; } main { - padding-top:200px; margin-top:-200px; - padding-bottom:100px; margin-bottom:-100px; - background:url(../img/timeline.svg) no-repeat center top; + 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:130%; max-width:40%; } +.row { height: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; flex-direction: row; margin: 5em 0; } +.row img { max-height: 130%; 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:35%; padding:2em; + max-width: 35%; padding: 2em; } -article h2 { margin-top:-1.7em; font-size:2em; } -article:nth-child(1) h2 { margin-right:-1.5em; text-align:right; } -article:nth-child(2) h2 { margin-left:-1.5em; } +article h2 { margin-top: -1.7em; font-size: 2em; } +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; @@ -66,26 +66,26 @@ article::before { border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%; z-index: -1; } -article:nth-child(1)::before { +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; } + body { background: none; } - header { width:100%; } - header .logo { padding-top:30px; width:100%; box-sizing:border-box; } - header .row p { width:100%; } + header { width: 100%; } + header .logo { padding-top: 30px; width: 100%; box-sizing: border-box; } + header .row p { width: 100%; } - main { background:none; } + 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; } + .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:2em; } - article:nth-child(1) h2 { margin-right:auto; text-align:right; } - article:nth-child(2) h2 { margin-left:auto; } + article { max-width: 100%; align-self: center !important; padding: 1em; } + article h2 { margin-top: auto; font-size: 2em; } + article:nth-child(1) h2 { margin-right: auto; text-align: right; } + article:nth-child(2) h2 { margin-left: auto; } }