LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Explanatory note

Draft explanatory statements and a notice of meeting to shareholders

Explanatory note

Companies must lodge annual reports within 3 months of the end of the financial year

Explanatory note

Agm - 40 days

Companies must report the date of the AGM to the ASX 5 business days before the closing date of nominations for election of directors

Explanatory note

Companies must lodge annual reports within 3 months of the end of the financial year

Explanatory note

Agm - 40 days

Companies must report the date of the AGM to the ASX 5 business days before the closing date of nominations for election of directors

Explanatory note

Companies must lodge annual reports within 3 months of the end of the financial year

Explanatory note

Agm - 40 days

Companies must report the date of the AGM to the ASX 5 business days before the closing date of nominations for election of directors

Explanatory note

Companies must lodge annual reports within 3 months of the end of the financial year

CSS
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.col h3 {
  margin: 0;
}
.circle {
  width: 125px;
  height: 125px;
  border: 15px solid transparent;
  border-radius: 50%;
  margin: 0;
  position: relative;
}
.circle1 {
  border-color: #29bdcc;
  border-left-color: transparent;
  border-top-color: transparent;
}
.circle2 {
  border-color: #17556f;
  border-right-color: transparent;
}
.circle3 {
  border-color: #f58c31;
  border-left-color: transparent;
}
.circle4 {
  border-color: #ed4565;
  border-right-color: transparent;
}
.circle5 {
  border-color: #f0b224;
  border-left-color: transparent;
}
.circle6 {
  border-color: #1eb473;
  border-right-color: transparent;
}
.circle7 {
  border-color: #93288d;
  border-left-color: transparent;
}
.circle8 {
  border-color: #1b5f8c;
  border-right-color: transparent;
}
.circle h2 {
  display: table;
  margin: 5px 0 0 5px;
  width: 85px;
  height: 85px;
  background: #29bdcc;
  border-radius: 50%;
}
.circle2 h2 {
  background: #17556f;
}
.circle3 h2 {
  background: #f58c31;
}
.circle4 h2 {
  background: #ed4565;
}
.circle5 h2 {
  background: #f0b224;
}
.circle6 h2 {
  background: #1eb473;
}
.circle7 h2 {
  background: #93288d;
}
.circle8 h2 {
  background: #1b5f8c;
}
.circle span {
  font-size: 12px;
  color: #fff;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.circle i,
.circle b {
  font-weight: bold;
  font-style: normal;
  display: block;
}
.circle i {
  font-size: 24px;
}
.wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 980px;
  margin: auto;
}
.col {
  flex: 1 0 50%;
  display: flex;
  align-items: center;
  margin-bottom: -47px;
  position: relative;
  left: 23px;
}
.col2 {
  left: -24px;
}
.col1 {
  text-align: right;
  align-content: flex-end;
}
.col1 .content {
  order: -1;
}
.content {
  flex: 1 0 0%;
  padding: 1px 10px;
  margin:-20px 0;
}
.content h2 {
  font-size: 1 rem;
}
.content p {
  margin: 0.5em 0 0 0;
  font-size: 0.8rem;
  color: #666;
}
.circle1:before {
  content: "";
  height: 15px;
  width: 250px;
  position: absolute;
  right: 46px;
  top: -15px;
  background: #29bdcc;
  background:linear-gradient(to left, #29bdcc 0%, white 100%);
  z-index: -1;
  animation:shimmer 10s infinite forwards;
}
@keyframes shimmer{
	0% {width: 0;}
	5%{width: 250px;}
	100%{width: 250px;}
}
.circle1:after,
.circle8:after {
  content: "";
  position: absolute;
  left: -15px;
  top: -15px;
  width: 125px;
  height: 125px;
  border: 15px solid transparent;
  border-color: #29bdcc;
  border-left-color: transparent;
  border-top-color: transparent;
  transform: rotate(-45deg);
  border-radius: 50%;
  z-index: -1;
}
.circle8:after {
  border-color: #1b5f8c;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(-45deg);
}
.circle8:before {
  content: "";
  height: 15px;
  width: 250px;
  position: absolute;
  right: -202px;
  bottom: -15px;
  background: #1b5f8c;
  background:linear-gradient(to right, #1b5f8c 0%, white 100%);
  z-index: -1;
}
.circle8 {
  border-bottom-color: transparent;
}
@media screen and (max-width: 600px) {
  .wrap {
    display: block;
  }
  .content{margin:0;}
  .col {
    margin: 10px 0;
    position: static;
  }
  .circle8:before,
  .circle8:after,
  .circle1:before,
  .circle2:after {
    display: none;
  }
  .circle1 {
    border-color: #29bdcc;
  }
  .circle2 {
    border-color: #17556f;
  }
  .circle3 {
    border-color: #f58c31;
  }
  .circle4 {
    border-color: #ed4565;
  }
  .circle5 {
    border-color: #f0b224;
  }
  .circle6 {
    border-color: #1eb473;
  }
  .circle7 {
    border-color: #93288d;
  }
  .circle8 {
    border-color: #1b5f8c;
  }
}

Description

Forum question answer: https://www.sitepoint.com/community/t/how-to-make-this-responsive/291512
Term
Sat, 04/14/2018 - 20:46

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv