SCSS Layout Task

by Paola D'Antonio

HTML

<html>

  <body>

    <div class="mainPage">
      <div class="background">
      </div>
      <div id="logoImage">
        <img width="82px" height="82px" 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 </p>
        <p id="distance">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>

SCSS

//colors
$color_blue: #2962ff;
$white: #fff;
$gray: gray;
$gold: #ffd700;
$color_mariner: #1874cd;
$color_gray: #d3d3d3;
$color_blue2: #3784ce;

//fonts
$font_0: Helvetica;

//urls
$url_0: url(http://www.localsearch.com.au/sys/ld/68/FEATURE/Plumbing/100760_Feature.png);
$url_1: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Five-pointed_star.svg/255px-Five-pointed_star.svg.png);
$url_2: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/768px-Gold_Star.svg.png);

body {
	font-family: $font_0;
}
.mainPage {
	height: 737px;
	width: 308px;
	border: 16px;
	border-style: solid;
	border-color: $color_blue;
}

.background {
	background-image: $url_0;
	height: 451px;
	width: 308px;
}

#logoImage {
	max-width: 100%;
	position: absolute;
	overflow: hidden;
	top: 420px;
	left: 40px;
	border-radius: 100%;
	border: 3px solid $white;
}

.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: $gold;
	padding-top: 5px;
}
#starRatingNumber {
	position: absolute;
	top: 554px;
	left: 140px;
	font-size: 18px;
	color: $gold;
	padding-top: 5px;
}
.starRating {
	&:not(old) {
		display: inline-block;
		width: 7.5em;
		height: 0.9em;
		overflow: hidden;
		vertical-align: bottom;
		> input {
			margin-right: -100%;
			opacity: 0;
		}
		> label {
			display: block;
			float: right;
			position: relative;
			background: $url_1;
			background-size: contain;
			&:before {
				content: '';
				display: block;
				width: 1em;
				height: 1em;
				background: $url_2;
				background-size: contain;
				opacity: 0;
				transition: opacity 0.2s linear;
			}
			&:hover {
				&:before {
					opacity: 1;
				}
				~ label:before {
					opacity: 1;
				}
			}
		}
	}
	&:not(:hover) > :checked ~...