Important: The GCConnex decommission will not affect GCCollab or GCWiki. Thank you and happy collaborating!
Difference between revisions of "User:Samburkeottawa"
		
		
		
		
		
		Jump to navigation
		Jump to search
		
				
		
  
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
      
    
  
		
	
| Line 4: | Line 4: | ||
| − |          <div class="alert fade alert-simple alert-  | + |     <section>  | 
| − | + |   <div class="square_box box_three"></div>  | |
| − |            <strong class="font__weight-semibold">Well done!</strong> You   | + |   <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:   | + |    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: | ||
   }  |    }  | ||
}  | }  | ||
| − | |||
}}  | }}  | ||
Revision as of 08:46, 30 July 2020
Test.
<section>
<button type="button" class="close font__size-18" data-dismiss="alert">
                   
                   </a>
Close </button>
         
         Well done! You successfullyread this important.
        <button type="button" class="close font__size-18" data-dismiss="alert">
Close </button>
         
         Heads up! This alert needs your attention, but it's not super important.
        <button type="button" class="close font__size-18" data-dismiss="alert">
Close </button>
         
         Warning! Better check yourself, you're not looking too good.
        <button type="button" class="close font__size-18" data-dismiss="alert">
Close </button>
         
         Oh snap! Change a few things up and try submitting again.
        <button type="button" class="close font__size-18" data-dismiss="alert">
Close </button>
         
         Well done! You successfullyread this important.
        </section>