My first try

My first try - student project

Thank you John for the course. I've started to use Wordpress a month ago, but I've always wanted to learn about HTML and CSS. I've used your code (but not copy+paste it), I typed every line... this is why I had so much bugs in it, but usually just typos :) But now it's working as it should be. I hope you like it! :)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=0"> <title>My first webpage</title> <style> html, body { margin: 0; padding: 0; font-family: sans-serif; background: #008B8B } .section { padding: 20px; overflow: hidden; } .container { max-width: 980px; margin: 0 auto; }
.col-6 { box-sizing: border-box; width: calc(50% - 30px); float: left; margin: 0 15px; padding: 25px; } .btn { display: inline-block; text-decoration: none; text-align: center; font-weight: bold; font-size: 1rem; color: #F8F8FF; background: #006400; padding: 10px 25px; border: none;        }
.recipes-list { margin: 0; padding: 0; list-style-type: none; text-align: center; }
.recipes-list li { padding: 3px 0; border-bottom: 1px dotted #cccccc; border-top: 1px dotted #cccccc; margin: -1px auto; width: 80%; }
.site-header { background: #FFF; border-bottom: none; padding: 0 15px; color: #008b8b; overflow: hidden; }
.site-title { line-height: 1.7; margin: 0; float: left; font-size: 28px; }
.nav { display: block; float: right; }
.menu { margin: 0; padding: 0; list-style-type: none; }
.menu li { /*display: inline-block;*/ float: left; }
.menu li a { display: block; padding: 15px 20px; text-decoration: none; font-weight: bold; color: #008B8B; }
.menu .current a { background: #cccccc; }
.menu li a:hover { background: cornsilk; }
#jumbotron { background: #ffffff; color: #008B8B; border-bottom: 50px solid #15151f; }
.jumbotron .h1 { font-size: 48px; }
#jumbotron .lead { font-size: 1.2rem; line-height: 1.3; } #jumbotron .btn { background: #006400; border-color: #000; color: #F8F8FF; }
#about { float: right; }
#magpie { min-height: 400px; float: left; background: #ffffff url('images/magpie.jpg'); background-size: cover; background-repeat: no-repeat; background-position: left top;       }
#cookbook { background: #008B8B; }
#cookbook .recipes { background: #ffffff; margin-top: 10px; }
#cookbook .recipes-title { text-align: center; font-size: 32px; color: #008B8B; }
#cookbook .btn { display: block; margin-top: 15px; background: #006400; color: #fff; }
#contact { background: #FFF; }
.form { width: 80%; margin: 0 auto; }
.form-field { margin: 7px 0; }
.text, .textarea { width: 100%; padding: 7px 10px; font-size: 18px; }
.textarea { height: 200px; }
#contact .btn { background: #006400; border-color: gray; color: #fff; font-size: 1rem; }
.site-footer { padding: 20px; background: #008B8B; color: #fff; text-align: center; }
@media screen and (max-width: 768px) { .col-6 { width: calc(100% - 20px); float: none; margin: 0 10px; padding: 15px;       }
#magpie { display: none; } } </style></head>
<body> <header class="site-header"> <div class="container"> <h1 class="site-title">Maggie Beginner</h1> <nav class="nav" id="primary-menu"> <ul class="menu"> <li class="menu-item current"> <a href="">Home</a> </li> <li class="menu-item"> <a href="#about">About</a> </li> <li class="menu-item"> <a href="#contact">Contact</a> </li> </ul> </nav> </div> </header> <section class="section" id="jumbotron"> <div class="container"> <header class="col-6 header" id="about"> <h1 class="h1"> <em>Hello, I'm Maggie</em> </h1> <p class="lead"> I've been working in the hotel industry for five years, but I've recently decided to change my carrier path. Now I'm learning about online marketing, SEO, HTML and in the same time I'm building a website for a friend in Wordpress. I also love baking and sharing recipes. <br>Click the button to find out more about my experiences: </p> <a class="btn" href="#cookbook">Cookbooks</a> </header> <div class="col-6" id="magpie"></div> </div> </section> <section class="section" id="cookbook"> <div class="container"> <div class="col-6 recipes"> <h3 class="recipes-title">COOKIES</h3> <p class="recipes-description"> In this cookbook you can find the best cookie recipes. Believe me, I've tried them all! </p> <ul class="recipes-list"> <li>Chocolate chip cookie</li> <li>Eastern lemon cookie</li> <li>Exotic fruit cookie</li> <li>Oat &amp; choc cookie</li> <li>Butterscotch dream</li> <li>Belgian witbier cookies</li> </ul> <a class="btn" href="#cookbook">Gimme cookies!</a> </div> <div class="col-6 recipes"> <h3 class="recipes-title">magPIES</h3> <p class="recipes-description"> In this cookbook you can find my all time favourite pie recipes. Finger lickin' good! </p> <ul class="recipes-list"> <li>Chicken &amp; leek pie</li> <li>The magPIE - with poppy seed</li> <li>Pumpkin pie</li> <li>Caramelised pecan pie</li> <li>Granny's apple pie</li> <li>Sour cherry and stout pie</li> </ul> <a class="btn" href="#cookbook">Gimme those pies!</a> </div> </div> </section> <section class="section" id="contact"> <div class="container"> <form class="form"> <div class="form-field"> <input class="text" type="text" placeholder="Enter your name" /> </div> <div class="form-field"> <input class="text email" type="email" placeholder="Enter your email address"> </div> <div class="form-field"> <textarea class="textarea" placeholder="Tell me about your baking adventures..."></textarea> </div> <input type="submit" class="btn submit" value="Send"> </form> </div> </section> <footer class="site-footer"> <div class="container"> <p>&copy; Copyright 2019 Maggie Begginer</p> </div> </footer></body></html>