floats
Published: 2021-08-21 00:54:27

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div class="leftheader">
      </div>

      <div class="rightheader">
        <h1>Art </h1>
        <p>The Right to Excercise and Party</p>
      </div>

      <p> This is a chapter i was suppose to start didn't know I was suppose to start a chapter but, here it is.</p>

      <p> The first sentence of a paragraph is ready now. And it is not long.</p>

      <p> I am adding a picture to this chapter.</p>
      <section class="group">
        <blockqoute><img src="https://tiffxdan.com/wp-content/uploads/2021/05/6-pack-abs-starter-series-768x432.jpg" alt="Workout" width="350px" class="floatright">this is an image of a guy working out.<article>this is for the pictue</article>
        </blockqoute>
      </section>

      <p> I love working out </p>
      <p> its great for building endurance and strength. Working out fives times a week is a great way to bulid endurance and strength.</p>

      <aside>
        <blockqoute>
          <aside>
            <p> "Working out is a fun way to stay in shape there are different tyoes of workouts, you have HITT and light cardio, strength traiing, and anything that involves movemnet".<cite> 'Working out as a group or with a friend can also help maintain accountability and motivate you to keep up your exercise routine.HealthWepMagazine'</cite></p>
          </aside>
        </blockqoute>
      </aside>

      <p> I've been working out for 10 years and have had a lot of ups downs. It started with running four days a week and eating low-calorie meals, it was not a bad thing low-calorie based on my expeiernce have less fat and more carbs. Carbs are not my strong suit.So I stop eating all things bread and pasta. And is not the point of this blog, another p tag</p>

      <p>I've been working out for 10 years and have had a lot of ups downs. It started with running four days a week and eating low-calorie meals, it was not a bad thing low-calorie based on my expeiernce have less fat and more carbs. Carbs are not my strong suit.So I stop eating all things bread and pasta. And is not the point of this blog, another p tag</p>
      <img src="https://tse4.mm.bing.net/th?id=OIP.q8KE49WZOAeRGWQQ5DbYLAHaE8&pid=Api&P=0&w=244&h=164" class="floatleft">

      <p>I've been working out for 10 years and have had a lot of ups downs. It started with running four days a week and eating low-calorie meals, it was not a bad thing low-calorie based on my expeiernce have less fat and more carbs. Carbs are not my strong suit.So I stop eating all things bread and pasta. And is not the point of this blog, another p tag</p>

      <footer>
        <p>Legal disclaimer, copyright,etc</p>
        <ul>
          <li><a href="#"><img src="https://image.flaticon.com/icons/png/512/1384/1384060.png" width="30px" alt="Soial Media 1"></a></li>
          <li><a href="https://www.instagram.com/quiettsmith"><img src="https://image.flaticon.com/icons/png/512/2111/2111463.png" width="30px" alt="Soial Media 2"></a></li>
          <li><a href="#"><img src="https://image.flaticon.com/icons/png/512/3677/3677264.png
" width="30px" alt="Soial Media 3"></a></li>
          <li><a href="#"><img src="https://image.flaticon.com/icons/png/512/1384/1384014.png" width="30px" alt="Soial Media 4"></a></li>
      </footer>
  </div>
</body>

</html>  



css///

cbody {
  font-family: Arial, Helvetica, sans-serif;
  color: #0c2404;
}
wrapper{ 
  border: ;
  color: #0c2404;
  
}
header {
}

nav {
  border-bottom: 1px solid #a61f11;
  border-top: 1px solid #a61f11;
  margin-bottom: 0.3rem;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav li {
  display: inline-block;
}

nav a {
  text-decoration: none;
  color: #73352e;
  display: block;
  padding: 0.5rem 1rem;
}

.leftheader {
  flex-basis: 40%;
  text-align: right;
  padding-right: 0.5rem;
}

.rightheader {
  flex-basis: 60%;
  margin-top: 3.75rem;
  padding-left: 0.5rem;
}

.rightheader h1 {
  color: #f8b9e8;
  margin-bottom: 0.2rem;
  text-align: center;
}

.rightheader p {
  color: #c8bac4;
  margin-bottom: 3rem;
  text-align: center;
}

.floatright {
  float: left;
  border: 3px gray solid;
  margin: 1rem;
}

.floatleft {
  float: left;
  border: 3px solid gray;
  margin: 2rem;
}

.floatleft:after {
  display: table;
  clear: both
}
.floatright:after {
  display:table;
  clear: left;
}

blockqoute aside {
  font-size: 1.5rem;
  color: #dbf410;
  font-weight: bold;
  display: table; 
}

cite {
  color: #1069f4;
  margin-top: 2rem;
  padding: 2rem;
  }

aside {
  text-align: center;
  font-weight: italics ;
}

footer {
  text-align: center;
  font-size: 0.8rem;
}

footer ul {
  margin: 0;
  padding: 3rem;
  list-style: none;
  border-top: 3px solid gray;
}

footer li {
  display: inline;
}


not sure what happened need help with the last image clear float is not working.