Line 4: |
Line 4: |
| | | |
| | | |
− | <div class="alert fade alert-simple alert-primary> | + | <section> |
− | [[File:Student.png|33px|link=|class=start-icon faa-bounce animated]] | + | <div class="square_box box_three"></div> |
− | <strong class="font__weight-semibold">Well done!</strong> You successfully read this important notice. | + | <div class="square_box box_four"></div> |
| + | <div class="container mt-5"> |
| + | <div class="row"> |
| + | |
| + | <div class="col-sm-12"> |
| + | <div class="alert fade alert-simple alert-success alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show"> |
| + | <button type="button" class="close font__size-18" data-dismiss="alert"> |
| + | <span aria-hidden="true"><a href="https://www.youtube.com/watch?v=_XiOcsj3oNI&t=50s" target="_blank"> |
| + | <i class="fa fa-times greencross"></i> |
| + | </a></span> |
| + | <span class="sr-only">Close</span> |
| + | </button> |
| + | <i class="start-icon far fa-check-circle faa-tada animated"></i> |
| + | <strong class="font__weight-semibold">Well done!</strong> You successfullyread this important. |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="col-sm-12"> |
| + | <div class="alert fade alert-simple alert-info alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show" role="alert" data-brk-library="component__alert"> |
| + | <button type="button" class="close font__size-18" data-dismiss="alert"> |
| + | <span aria-hidden="true"> |
| + | <i class="fa fa-times blue-cross"></i> |
| + | </span> |
| + | <span class="sr-only">Close</span> |
| + | </button> |
| + | <i class="start-icon fa fa-info-circle faa-shake animated"></i> |
| + | <strong class="font__weight-semibold">Heads up!</strong> This alert needs your attention, but it's not super important. |
| + | </div> |
| + | |
| + | </div> |
| + | |
| + | <div class="col-sm-12"> |
| + | <div class="alert fade alert-simple alert-warning alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show" role="alert" data-brk-library="component__alert"> |
| + | <button type="button" class="close font__size-18" data-dismiss="alert"> |
| + | <span aria-hidden="true"> |
| + | <i class="fa fa-times warning"></i> |
| + | </span> |
| + | <span class="sr-only">Close</span> |
| + | </button> |
| + | <i class="start-icon fa fa-exclamation-triangle faa-flash animated"></i> |
| + | <strong class="font__weight-semibold">Warning!</strong> Better check yourself, you're not looking too good. |
| </div> | | </div> |
| + | </div> |
| | | |
| + | <div class="col-sm-12"> |
| + | <div class="alert fade alert-simple alert-danger alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show" role="alert" data-brk-library="component__alert"> |
| + | <button type="button" class="close font__size-18" data-dismiss="alert"> |
| + | <span aria-hidden="true"> |
| + | <i class="fa fa-times danger "></i> |
| + | </span> |
| + | <span class="sr-only">Close</span> |
| + | </button> |
| + | <i class="start-icon far fa-times-circle faa-pulse animated"></i> |
| + | <strong class="font__weight-semibold">Oh snap!</strong> Change a few things up and try submitting again. |
| + | </div> |
| + | </div> |
| + | |
| + | <div class="col-sm-12"> |
| + | <div class="alert fade alert-simple alert-primary alert-dismissible text-left font__family-montserrat font__size-16 font__weight-light brk-library-rendered rendered show" role="alert" data-brk-library="component__alert"> |
| + | <button type="button" class="close font__size-18" data-dismiss="alert"> |
| + | <span aria-hidden="true"><i class="fa fa-times alertprimary"></i></span> |
| + | <span class="sr-only">Close</span> |
| + | </button> |
| + | <i class="start-icon fa fa-thumbs-up faa-bounce animated"></i> |
| + | <strong class="font__weight-semibold">Well done!</strong> You successfullyread this important. |
| + | </div> |
| + | |
| + | </div> |
| + | |
| + | </div> |
| + | </div> |
| + | </section> |
| | | |
| {{#css: | | {{#css: |
| + | |
| | | |
| .alert>.start-icon { | | .alert>.start-icon { |
Line 20: |
Line 90: |
| .alert>.start-icon { | | .alert>.start-icon { |
| margin-right: 5px; | | margin-right: 5px; |
| + | } |
| + | |
| + | .greencross |
| + | { |
| + | font-size:18px; |
| + | color: #25ff0b; |
| + | text-shadow: none; |
| } | | } |
| | | |
Line 28: |
Line 105: |
| box-shadow: 0px 0px 2px #259c08; | | box-shadow: 0px 0px 2px #259c08; |
| color: #0ad406; | | color: #0ad406; |
− | text-shadow: 1px 1px #00040a; | + | text-shadow: 2px 1px #00040a; |
| transition:0.5s; | | transition:0.5s; |
| cursor:pointer; | | cursor:pointer; |
| } | | } |
− |
| |
| .alert-success:hover{ | | .alert-success:hover{ |
| background-color: rgba(7, 149, 66, 0.35); | | background-color: rgba(7, 149, 66, 0.35); |
| transition:0.5s; | | transition:0.5s; |
| } | | } |
− |
| |
| .alert-simple.alert-info | | .alert-simple.alert-info |
| { | | { |
Line 53: |
Line 128: |
| background-color: rgba(7, 73, 149, 0.35); | | background-color: rgba(7, 73, 149, 0.35); |
| transition:0.5s; | | transition:0.5s; |
| + | } |
| + | |
| + | .blue-cross |
| + | { |
| + | font-size: 18px; |
| + | color: #0bd2ff; |
| + | text-shadow: none; |
| + | } |
| + | |
| + | .alert-simple.alert-warning |
| + | { |
| + | border: 1px solid rgba(241, 142, 6, 0.81); |
| + | background-color: rgba(220, 128, 1, 0.16); |
| + | box-shadow: 0px 0px 2px #ffb103; |
| + | color: #ffb103; |
| + | text-shadow: 2px 1px #00040a; |
| + | transition:0.5s; |
| + | cursor:pointer; |
| + | } |
| + | |
| + | .alert-warning:hover{ |
| + | background-color: rgba(220, 128, 1, 0.33); |
| + | transition:0.5s; |
| + | } |
| + | |
| + | .warning |
| + | { |
| + | font-size: 18px; |
| + | color: #ffb40b; |
| + | text-shadow: none; |
| + | } |
| + | |
| + | .alert-simple.alert-danger |
| + | { |
| + | border: 1px solid rgba(241, 6, 6, 0.81); |
| + | background-color: rgba(220, 17, 1, 0.16); |
| + | box-shadow: 0px 0px 2px #ff0303; |
| + | color: #ff0303; |
| + | text-shadow: 2px 1px #00040a; |
| + | transition:0.5s; |
| + | cursor:pointer; |
| + | } |
| + | |
| + | .alert-danger:hover |
| + | { |
| + | background-color: rgba(220, 17, 1, 0.33); |
| + | transition:0.5s; |
| + | } |
| + | |
| + | .danger |
| + | { |
| + | font-size: 18px; |
| + | color: #ff0303; |
| + | text-shadow: none; |
| } | | } |
| | | |
Line 76: |
Line 205: |
| color: #03d0ff; | | color: #03d0ff; |
| text-shadow: none; | | text-shadow: none; |
| + | } |
| + | |
| + | .square_box { |
| + | position: absolute; |
| + | -webkit-transform: rotate(45deg); |
| + | -ms-transform: rotate(45deg); |
| + | transform: rotate(45deg); |
| + | border-top-left-radius: 45px; |
| + | opacity: 0.302; |
| + | } |
| + | |
| + | .square_box.box_three { |
| + | background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); |
| + | background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); |
| + | background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); |
| + | opacity: 0.059; |
| + | left: -80px; |
| + | top: -60px; |
| + | width: 500px; |
| + | height: 500px; |
| + | border-radius: 45px; |
| + | } |
| + | |
| + | .square_box.box_four { |
| + | background-image: -moz-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); |
| + | background-image: -webkit-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); |
| + | background-image: -ms-linear-gradient(-90deg, #290a59 0%, #3d57f4 100%); |
| + | opacity: 0.059; |
| + | left: 150px; |
| + | top: -25px; |
| + | width: 550px; |
| + | height: 550px; |
| + | border-radius: 45px; |
| } | | } |
| | | |
Line 127: |
Line 289: |
| } | | } |
| } | | } |
− |
| |
| | | |
| | | |
| }} | | }} |