DAY 1 - Part 3

day-1-part-3.markdown

DAY 1 - Part 3

A Pen by Tim Morgan on CodePen.

License.

index.html

<div class="bg-container">
  <div class="inner-container">
   <div class="top-left">
     <img src="https://assets.codepen.io/6060109/p1-doge.png" />
     <h3>DogeCoin Tracker</h3>
   </div>
   <div class="top-right">
     <button>Buy coins</button>
   </div>
   <div class="bottom-left">
     <h3>$12.42 ↑</h3>
   </div>
   <div class="bottom-right">
    <!--  Get the @elonmusk "embed" from this URL
      https://publish.twitter.com/
    ...and paste it inside this <div>     -->
     
     <a class="twitter-timeline" href="https://twitter.com/elonmusk?ref_src=twsrc%5Etfw">Tweets from Elon</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
     
   </div>
  </div>
</div>

style.css

body {
  background: linear-gradient(46.19deg, #000000 5.66%, #434343 94.35%);
  color: white;
  font-family: Poppins;
  font-weight: 600;
}

.bg-container {
  height: 100vh;
  background: url("https://assets.codepen.io/6060109/p1-elon-alt.png") no-repeat left bottom;
  background-size: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 50px;
  box-sizing: border-box;
}

.inner-container {
  height: 60%;
  width: 80%;
  position: relative;
}

.top-right, .bottom-left, .bottom-right {
  position: absolute;
}

.top-left {
  display: flex;
  align-items: center;
  font-size: 30px;
}

.top-right {
  right: 0;
  top: 3%;
}

.top-right button {
  padding: 20px 40px;
  background: #FE9C0B;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 400;
}

.bottom-left {
  bottom: 5%;
  left: 0;
  font-size: 50px;
  color: #00FF6C;
}

.bottom-right {
  right: 0;
  bottom: 10%;
  height: 70%;
  width: 40%;
  background-color: white;
  border-radius: 15px;
  overflow: scroll;
}