project-htmlcss-h1-box-model/joshua.html

<!DOCTYPE html>
<html>
  <head>
    <title>Box-Model</title>
  <style>
* {
		padding: 10px;
		margin: 10px;
	}
	.container {
		border: 10px solid green;
		border-radius: 30px;
	}

	.circle {
		width: 111px;
		height:111px;
		background-color: blue;
		border-radius:50%;
	}

	.header {
			padding: 10px;
			margin: 10px;
			border: 10px dotted red;
	}

	.content {
			margin: 0 auto;
			width: 500px;
			border: 20px solid yellow;
	}

	.item1 {
		margin-left: 20px;
	}

	.item2 {
		margin-left: 40px;
	}

	.item3 {
		margin-left: 60px;
	}


	.hidden {
		visibility: hidden;
	}

	.footer {
		max-width: 700px;
		margin: 20px;
		padding: 20px;
		border: 15px dashed orange;
	}

  </style>
  </head>
  <body>
    <div class="container">
      <div class="circle"></div>

      <div class="header">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Porro,
        doloremque magni! Itaque rem provident quibusdam numquam, alias minima
        aut in, eum mollitia unde aliquid dicta ullam tempora perspiciatis sed
        maiores?
      </div>

      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad minus et
        impedit ex voluptatem cumque dignissimos excepturi, doloremque
        necessitatibus reiciendis voluptates ipsum sunt enim similique in
        pariatur veritatis quae perspiciatis.
      </div>

      <ul>
        <li class="item1">HTML</li>
        <li class="item2">CSS</li>
        <li class="item3">JAVASCRIPT</li>
        <li class="hidden">REACT JS</li>
      </ul>
    </div>

    <div class="footer">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae id enim a
      repellat incidunt exercitationem quas tenetur fugiat cumque quia nihil
      nostrum, vel iusto. Officia autem veritatis veniam ex explicabo!
    </div>
  </body>
</html>