CSS Layout Task

by Paola D'Antonio

HTML

<html>

  <body>

    <div class="mainPage">
      <div class="background">
      </div>
      <div id="logoImage">
        <img src=" http://www.localsearch.com.au/sys/ld/68/LISTINGS/886/75/8867594/8867594_1506086_LD.png" alt="circle Image">
      </div>
      <div class="infoContent">

        <p id="companyName"> Lee's Personal Plumbin...</p>
        <p id="starRating">
          <span class="starRating">
        <input id="rating5" type="radio" name="rating" value="5">
        <label for="rating5">5</label>
        <input id="rating4" type="radio" name="rating" value="4" checked>
        <label for="rating4">4</label>
        <input id="rating3" type="radio" name="rating" value="3" >
        <label for="rating3">3</label>
        <input id="rating2" type="radio" name="rating" value="2">
        <label for="rating2">2</label>
        <input id="rating1" type="radio" name="rating" value="1">
        <label for="rating1">1</label>
        </span> </p>
        <p id="starRatingNumber"> 4.0 </p>

      </div>

      <div>
        <p id="phone">0420 92 3923</p>
      </div>
      <div>
        <img id="AddressImg" src="http://vignette2.wikia.nocookie.net/caramelangel714/images/7/72/Location_Icon.png/revision/latest?cb=20140427224234" alt="Location icon">
        <p id="Address"> Servicing Robina, QLD &nbsp; &nbsp;0.0km </p>

      </div>
      <div id="quickInfo">
        <p id="quickInfoText"> Quick info </p>
        <img id="infoIcon" src="https://www.shareicon.net/data/256x256/2015/07/27/75938_info_256x256.png" alt="Infoemation Icon">
      </div>
    </div>
  </body>

</html>

CSS

body {
  font-family: Helvetica;
}

.mainPage {
  height: 737px;
  width: 308px;
  border: 16px;
  border-style: solid;
  border-color: #2962ff;
}

.background {
  background-image: url("http://www.localsearch.com.au/sys/ld/68/FEATURE/Plumbing/100760_Feature.png");
  height: 451px;
  width: 308px;
}

#logoImage {
  width: 82px;
  height: 82px;
  position: absolute;
  overflow: hidden;
  top: 420px;
  left: 40px;
  border-radius: 100%;
  border: 3px solid #fff;
}

.infoContent {
  background: white;
  height: 286px;
  width: 308px;
}

#companyName {
  text-align: left;
  font-size: 24px;
  color: gray;
  padding-top: 45px;
  position: absolute;
  left: 40px;
}

p {
  margin: 0 0 1.5em;
  padding: 0;
}

#starRating {
  position: absolute;
  top: 550px;
  left: -5px;
  font-size: 18px;
  color: #ffd700;
  padding-top: 5px;
}

#starRatingNumber {
  position: absolute;
  top: 554px;
  left: 140px;
  font-size: 18px;
  color: #ffd700;
  padding-top: 5px;
}

.starRating:not(old) {
  display: inline-block;
  width: 7.5em;
  height: 0.9em;
  overflow: hidden;
  vertical-align: bottom;
}

.starRating:not(old) > input {
  margin-right: -100%;
  opacity: 0;
}

.starRating:not(old) > label {
  display: block;
  float: right;
  position: relative;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/255px-Five-pointed_star.svg.png');
  background-size: contain;
}

.starRating:not(old) > label:before {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/768px-Gold_Star.svg.png');
  background-size: contain;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.starRating:not(old) > label:hover:before,
.starRating:not(old) > label:hover ~ label:before,
.starRating:not(:hover) >:checked ~ label:before {
  opacity: 1;
}

#phone {
  position: absolute;
  top: 630px;
  left: 42px;
  font-size: 18px;
  color: #1874CD;
}

#Address {
 ...