CodeYourFuture · dotdashdon · Jul 11, 2021 · Jul 11, 2021 · Jul 15, 2021 · Jul 15, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -6,3 +6,99 @@
  *    for example: General styles, Navigation styles, Hero styles, Footer etc.
  * 
  */
+
+ /**need to think why doing box-sizing**/
+ * {
+     box-sizing: border-box;
+ }
+
+img {
+    border-radius: 5px;
+    border-color:silver;
+    border: 5px solid rgb(196, 201, 57);
+
+}
+
+
+body {
+    background-color: #DDFFBC;
+    padding: 50px;
+    margin:20;
+
+}
+
+header {
+    font-family: 'Open Sans Condensed', sans-serif;
+    text-transform: uppercase;
+    text-align:center;
+    padding: 10px;
+    font-size: 2.2rem;
+
+}
+
+h1 {
+    color:#52734D;
+    font-family: 'Open Sans Condensed', sans-serif;
+    padding: 20px;
+    margin: 20px;
+}
+
+h2 {
+    color: #91C788;
+    font-family: 'Open Sans Condensed', sans-serif;
+    padding: 20px;
+    margin: 20px;
+}
+
+
+h3 {
+     color: #91C788;
+    font-family: 'Open Sans Condensed', sans-serif;
+    padding: 5px;
+    margin: 20px;
+}
+p {
+    font-family: 'Open Sans Condensed', sans-serif;
+    text-indent: 50px;
+    max-width: 100%;
+    padding: 10px;
+    margin: 10px;
+    color:rgb(196, 201, 57);
+}
+
+a:link {
+  color:rgb(196, 201, 57);
+  text-decoration: none;
+
+}
+
+a:visited  {
+color:#2cce14;
+text-decoration: none;
+
+}
+
+a:hover {
+    color:rgb(196, 201, 57);
+    text-decoration: none;
+}
+article:first-child {
+    color:rgb(196, 201, 57);
+    font-size: 20px;
+}
+
+
+footer  {
+    font-family: 'Courier New', Courier, monospace;
+    text-align:center;
+    padding: 20px;
+    margin: 20px;
+
+}
+
+.flex-container {
+    display: flex;
+    background-color:  #FEFFDE;
+    flex-wrap:wrap;
+    border-radius: 10px;
+}
diff --git a/donut.html b/donut.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - CYF Landing Page</title>
+
+<head>
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,300&display=swap" rel="stylesheet">
+
+  <script src="https://kit.fontawesome.com/bd58734f6d.js" crossorigin="anonymous"></script>
+</head><link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
+
+<header id="header">
+  <div class="h1-and-navbar">
+    <nav id="nav-bar">
+      <ul>
+        <li><a class="nav-link" href="#doughnuts">The Big 3</a></li>
+        <li><a class="nav-link" href="#video">Doughnut Display</a></li>
+        <li><a class="nav-link" href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+    <h1>Doughnut Dream</h1>
+
+  </div>
+  <div class="header-img">
+    <img id="header-img" src="https://source.unsplash.com/Fq54FqucgCE/100x100" alt="logo">
+
+  </div>
+
+</header>
+
+<div class="doughnuts-container">
+
+  <h2 class="description">'Dough'nut feel blue, let us help make your doughnut dreams come true; we've jam, chocolate and sprinkles just for you! </h2>
+  <h2 class="intro"> Indulge and enjoy! Choose from our amazing selection! </h2>
+
+  <div class="offer"><strong><em>STOP PRESS</em><br> Discount Days: Mondays and Wednesdays....<br> ..buy 12 and get 6 free! </strong></div>
+
+  <p id="doughnuts">The Big Three</p>
+
+  <div class="choice">
+    <div class="jam">Jam<br>
+      <img class="jampic" src="https://source.unsplash.com/r22iesHiNC4/400x200" alt="jam donut">
+    </div>
+    <div class="choc">Chocolate<br>
+      <img class="chocpic" src="https://source.unsplash.com/HRoXagGs_oU/400x200" alt="chocolate donut">
+    </div>
+    <div class="sprinkles">Sprinkles<br>
+      <img class="sprinklepic" src="https://source.unsplash.com/_qS0EQGn6qg/400x200" alt="donuts with sprinkles">
+    </div>
+  </div>
+</div>
+
+<h2>Party Time</h2>
+<div class="box">
+  <div class="buy">Buy<br><img class="boxpic" src="
+        https://source.unsplash.com/GBfNe3ZZjhI/400x200" alt="selection of donuts">
+  </div>
+
+  <div class="arrow"> This way to make your own doughnut display<br>
+    <img class="arrowpic" src="https://source.unsplash.com/zF_pTLx_Dkg/400x200" alt="white arrow on blue background">
+  </div>
+  <div class="video">
+    <iframe width="400" height="200" id="video" src="https://www.youtube.com/embed/RtzxeG5x3fs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  </div>
+</div>
+
+<p id="text-link">
+  <a id="recipe-link" href="https://www.theguardian.com/lifeandstyle/wordofmouth/2012/aug/16/how-cook-perfect-jam-doughnuts" target="_blank"> Click <strong>here</strong> to learn how to make your own doughnuts. </a>
+</p>
+
+<h2 id="contact">Sign up for our newsletter</h2>
+<form id="form" action=" https://www.freecodecamp.com/email-submit">
+  <label for="email">Enter your email:</label>
+  <input type="email" name="email" id="email" placeholder="Email">
+
+  <input type="submit" name="submit" id="submit">
+</form>
+<!-- partial -->
+  <script  src="./script.js"></script>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -6,16 +6,63 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <title>My Blog</title>
+    <title>Just another page about tea</title>
     <link
       href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
       rel="stylesheet"
       type="text/css"
     />
     <link rel="stylesheet" href="css/style.css" />
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   </head>
   <body>
+<header>
+    <img id="image" src="https://i.pinimg.com/originals/29/6c/af/296cafa2cbdddada4611424fa19f8609.jpg" width="450"
+      height="300" alt="image of Audrey Hepburn drinking a cup of tea">
+  <h1>Time for Tea</h1>
+  <p>A space to show my love of loose-leaf tea</p>
+</header>
+    <article class="flex-container">
+      <article>
+        <h2>Why loose-leaf?</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet, tortor sit amet posuere accumsan, urna
+        nisi scelerisque arcu, vitae luctus nunc ex quis nibh. Sed cursus vehicula leo, nec rutrum nunc venenatis et. In id
+        tempor risus. Vestibulum id tempor ligula. Curabitur ut tellus elit. Integer nec auctor lorem. Vestibulum ultricies
+        metus eget nisl consectetur, ut rutrum velit fringilla. Donec vel massa vitae ligula aliquet condimentum. Nullam at
+        scelerisque ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+        Suspendisse potenti. Suspendisse vel mauris iaculis, pellentesque mi imperdiet, maximus felis. Phasellus commodo neque
+        vel ex gravida, vitae vehicula neque dapibus. Donec dictum volutpat semper.
+        <a href="https://www.kusmitea.com/int/our-teas-and-herbal-teas/types-of-tea"  target="_blank"><em>Click here for an infusion revolution...</em></a></p>
+      </article>
+      <article>
+        <h3>Tea Kit: All you need to make the perfect cup of tea</h3>
+        <p>Vivamus vel turpis euismod, efficitur purus id, gravida metus. Ut placerat egestas euismod. Proin a nisi facilisis,
+        consequat orci et, laoreet dolor. Morbi pharetra orci nec varius imperdiet. Integer eu dapibus arcu, dapibus hendrerit
+        urna. Nunc dapibus dictum tellus, ac dapibus nulla euismod id. Nunc condimentum rutrum posuere. Maecenas tempus
+        ultricies dui, nec ac.
+        <a href="https://www.whittard.co.uk/equipment/tea-equipment/infusers-strainers?gclid=Cj0KCQjwraqHBhDsARIsAKuGZeGaoQzLmXOGlaHW_zRtZvu2oFkKxHvyhpPriqxt7TGT8_RDtAeNh_QaArVPEALw_wcB&gclsrc=aw.ds" target="_blank"><em>Browse a fine selection of tea paraphernalia here... </em></a></p>
+      </article>
+      <article>
+        <h3>Tea and the everyday cool; refreshing iced teas</h3>
+        <p>Phasellus odio arcu, elementum vitae quam ac, scelerisque accumsan eros. Cras maximus augue eget neque eleifend, ac
+        condimentum ligula tempor. Fusce volutpat sagittis egestas. Cras vitae bibendum elit, a mattis dui. Donec pulvinar
+        fermentum augue quis pretium. Nunc sit amet facilisis ante, eget hendrerit ex. Integer ullamcorper venenatis dolor sed
+        placerat. Pellentesque accumsan quam ac lacinia tempus. Donec est nulla, placerat vitae convallis sed, tincidunt ac
+        massa.
+        <a href="https://www.kusmitea.com/int/our-teas-and-herbal-teas/our-selection/iced-teas-and-herbal-teas" target="_blank"><em>Enjoy a taste of summer with these flavourful teas...</em></a></p>
+      </article>
+    </article>
+    <footer>This site was created by Donna. Part of the CYF Week #1 HTML/CSS 
+      <a href="/Users/donnasimpson/Desktop/Git /HTML-CSS-Coursework-Week1/donut.html" class="badge badge-secondary">Do ya like doughnuts? Click me to order</a>
+    </footer>
+     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
   </body>