diff --git a/css/styles.css b/css/styles.css index 388bc970e2d9d1eab4240e972c883122e8d47b31..9dbdf86789464d35ca2a197b94113d3f74de112c 100644 --- a/css/styles.css +++ b/css/styles.css @@ -20,24 +20,93 @@ p { margin: 40px 0; } li { list-style: hiragana; margin-bottom: 20px;} a { color: #574843; text-decoration: none; } + +@media (max-width: 999px) { + header { + position: relative; + height: 250px; + padding: 0; + width: 100%; + background-size: contain; + + } + header h1 { + padding-top: 40px; + padding-left: 200px; + font-size: 3em; + } + header nav { + padding-left: 200px; + } + .container { + padding: 40px; + margin: 0; + width: 100%; + } +} + +@media (min-width: 1000px) and (max-width: 1239px) { + header { + position: fixed; + top: 40px; + left: 640px; + height: 500px; + padding: 0; + width: 340px; + background-position: left bottom; + background-size: 260px 333px; + } + + header h1 { + padding-left: 120px; + font-size: 2em; + } + header nav { + padding-left: 120px; + } + .container { + padding: 40px; + margin: 0 40px; + width: 600px; + } + +} + +@media (min-width: 1240px) { + header { + position: fixed; + bottom: 40px; + left: 640px; + height: 400px; + padding: 90px 0 0 270px; + width: 610px; + background-size: contain; + } + header h1 { + font-size: 3em; + } + .container { + padding: 40px; + margin: 0 40px; + width: 600px; + } +} + header { text-align: center; color: #574843; - position: fixed; - bottom: 40px; left: 640px; - height: 400px; + background-image: url('../images/bird.svg'); background-repeat: no-repeat; - background-size: contain; - width: 610px; + z-index: 9999; - padding: 90px 0 0 270px; + box-sizing: border-box; } header h1 { margin: 0; - font-size: 3em; + } @@ -64,9 +133,6 @@ nav li { font-size: 12px; line-height: 18px; background: #fff; - padding: 40px; - margin: 0 40px; - width: 600px; position: relative; }