diff --git a/recipes/css/malaitikka.css b/recipes/css/malaitikka.css index 606ff0b..5c541b1 100644 --- a/recipes/css/malaitikka.css +++ b/recipes/css/malaitikka.css @@ -1,8 +1,148 @@ +/* General Styling */ + +* { + box-sizing: border-box; +} + body { - background-color: black; - color: white; + + font-family: Verdana, Geneva, Tahoma, sans-serif; + background-color: #1e1e2e; + color: #cdd6f4; + padding: 0; +} + +h1 { + color: #a6e3a1; +} + +h2 { + color: #fab387; + +} + +/* Styling the Nav Bar */ +nav { + padding: 12px; + border-bottom: 1px solid #cba6f7; + margin-bottom: 20px; } -.desc { +.nav-ul { + display: flex; + gap: 25px; + align-items: baseline; + margin: 0; + padding: 0; + list-style: none; +} + +li a { + text-decoration: none; + color: #74c7ec; +} + +.nav-head a { + font-size: 2rem; +} + +.contact, +.login { + font-size: 18px; +} + +li.nav-head { + flex-grow: 1; +} + + +/* Styling The Heading */ +.main-head { text-align: center; + margin-bottom: 3em; + color: #f38ba8; +} + +/* Style Image And Description */ +.desc-box { + display: flex; + gap: 30px; + justify-content: flex-start; + align-items: center; + margin-bottom: 40px; + border-bottom: 1px solid #cba6f7; + padding-bottom: 20px; +} + +.desc-box img { + width: 300px; + height: auto; + margin-left: 50px; +} + +.desc-box p { + flex-shrink: 2; +} + +/* Styling the Ingredients and Steps Section */ + +.content { + display: flex; + gap: 100px; + justify-content: center; +} + +.content .ing { + /* padding-right: 200px; */ + /* width: 1000px; */ + flex-basis: 1000px; + margin-right: auto; +} + +.content .steps { + flex-shrink: 2; + margin-right: 30px; +} + +.ing h2, +.ing ul li { + text-align: center; + list-style: none; +} + +.steps h2, +.steps ol { + text-align: center; +} + +/* Styling The List */ +li { + margin-bottom: 9px; +} + +/* Styling The Footer */ +footer { + background-color: #11111b; + padding-bottom: 20px; +} + +footer h3 { + margin-right: -20px; + margin-bottom: 4rem; +} + +.contact-list { + display: flex; + gap: 20px; + justify-content: center; + list-style: none; +} + +.contact-list li a { + color: #f38ba8; + font-size: 1rem; +} + +.contact-list li { + margin: auto; }