diff --git a/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css index 165a2a3..c083572 100644 --- a/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css +++ b/INFO-1252 (Front End Dev)/Labs/Lab-5/styles/main.css @@ -156,7 +156,8 @@ a { font-size: 2.4rem; } -@media (min-width: 820px) { +@media only screen and (min-width: 820px) { + /* Header */ .header { position: relative; } @@ -166,11 +167,15 @@ a { left: 5%; top: 33%; transform: translateY(-50%); - width: 15%; + width: 25%; opacity: 0.3; z-index: 0; } + .header-title { + font-size: 6rem; + } + .header-nav { position: relative; z-index: 1; @@ -187,6 +192,112 @@ a { gap: 4rem; width: 100%; } + + /* Recipe cards */ + .recipe { + position: relative; + } + + .recipe-image { + display: block; + width: 30%; + border-radius: 50%; + margin: 0; + float: left; + } + + .recipe-title { + font-size: 4.8rem; + } + + .recipe-desc { + display: inline-block; + width: 65%; + margin-left: 1.5rem; + margin-bottom: 1.5rem; + padding: 0; + } + + /* About Sandy */ + .about-logo { + display: inline; + float: left; + margin-top: 2rem; + margin-right: 4rem; + margin-bottom: 2rem; + } + + .about-text { + display: inline; + vertical-align: top; + font-size: 1.8rem; + } + + /* Footer needs no changes */ } -@media (min-width: 1200px) {} \ No newline at end of file +@media only screen and (min-width: 1200px) { + /* Header */ + .header-logo { + width: 10%; + } + + /* Recipe cards */ + .recipes { + display: flex; + gap: 2rem; + } + + .recipe-image { + width: 100%; + margin: auto; + } + + .recipe-title { + font-size: 8rem; + margin: 0; + line-height: normal; + } + + .recipe-by { + font-size: 2rem; + } + + .recipe-date { + font-size: 2rem; + } + .recipe-desc { + width: 95%; + font-size: 2rem; + } + + /* About Sandy */ + .about-title { + font-size: 8rem; + } + + .about-logo { + width: 300px; + } + + .about-text { + font-size: 2.2rem; + } + + /* Footer */ + .footer { + margin-top: 0.2rem; + display: flex; + justify-content: space-between; + align-items: center; + padding: 3.6rem 2rem; + } + + .footer p { + margin: 0; + } + + .footer-name { + float: none; + } +} \ No newline at end of file