Difference between revisions of "Passerelle de véhicules connectés et automatisés"

From wiki
Jump to navigation Jump to search
(Keyvan.abedi changed the content model of the page Passerelle de véhicules connectés et automatisés from "JavaScript" to "CSS")
Tag: content model change
(Keyvan.abedi changed the content model of the page Passerelle de véhicules connectés et automatisés from "CSS" to "wikitext")
Tag: content model change
(No difference)

Revision as of 12:58, 11 September 2018

<html> 

 <head>

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

 </head>

</html><html> <style> 

   header,
   footer,
   #mw-head,
   #mw-panel  {

display: none; }

html, 

   body {
       height: 100%;
       -webkit-animation: fadein .5s;
       animation: fadein .5s;
   }

   @keyframes fadein {
       from {
           opacity: 0;
       }
       to {
           opacity: 1;
       }
   }

   @-webkit-keyframes fadein {
       from {
           opacity: 0;
       }
       to {
           opacity: 1;
       }
   }

   @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700,900');
   * {
       margin: 0;
       padding: 0;
   }



   .navbar-default .navbar-nav>li>a:visited {
       color: #262860;
   }

body { 

       overflow-y: hidden;
       background-color: #f8f8f8;

} 

.super-body {
       position: fixed;
       overflow-y: scroll;
       overflow-x: hidden;
       -ms-overflow-x: hidden;
       display: block;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: 420;
       background-color: #fff;
       -webkit-transition: all .5s ease-in;
       transition: all .5s ease-in;
       font-family: 'Roboto', sans-serif;
       font-size: 14px;
   }

div#mw-head { 

       position: absolute;
       top: 145px;
       right: 0;
       width: 100%;
       display: none;
   }

   div#mw-panel {
       font-size: inherit;
       position: absolute;
       top: 160px;
       padding-top: 1em;
       width: 10em;
       left: 0;
       display: none;
   }

#footer {
       display: none;
   }


.btn-xl { 

 padding: 1.25rem 2.5rem;

}

.content-section { 

 padding-top: 7.5rem;
 padding-bottom: 7.5rem;

}

.content-section-heading h2 { 

 font-size: 3rem;

}

.content-section-heading h3 { 

 font-size: 1rem;
 text-transform: uppercase;

}

h1, h2, h3, h4, h5, h6 { 

 font-weight: 700;

}

.text-faded { 

 color: rgba(255, 255, 255, 0.7);

}

.scroll-to-top { 

 position: fixed;
 right: 15px;
 bottom: 15px;
 display: none;
 width: 50px;
 height: 50px;
 text-align: center;
 color: white;
 background: rgba(52, 58, 64, 0.5);
 line-height: 45px;

}

.scroll-to-top:focus, .scroll-to-top:hover { 

 color: white;

}

.scroll-to-top:hover { 

 background: #343a40;

}

.scroll-to-top i { 

 font-weight: 800;

}

.masthead { 

 min-height: 30rem;
 position: relative;
 display: table;
 width: 100%;
 height: auto;
 padding-top: 8rem;
 padding-bottom: 8rem;
 background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("http://www.gcpedia.gc.ca/gcwiki/images/5/5f/Bg-masthead.png");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;

}

.masthead h1 { 

 font-size: 4rem;
 margin: 0;
 padding: 1rem;

}

@media (min-width: 992px) { 

 .masthead {
   height: 100vh;
 }
 .masthead h1 {
   font-size: 5.5rem;
 }

}

/* Side Menu */

  1. sidebar-wrapper {
 position: fixed;
 z-index: 2;
 right: 0;
 width: 250px;
 height: 100%;
 -webkit-transition: all 0.4s ease 0s;
 -moz-transition: all 0.4s ease 0s;
 -ms-transition: all 0.4s ease 0s;
 -o-transition: all 0.4s ease 0s;
 transition: all 0.4s ease 0s;
 transform: translateX(250px);
 background: #1D809F;
 border-left: 1px solid rgba(255, 255, 255, 0.1);

}

.sidebar-nav { 

 position: absolute;
 top: 0;
 width: 250px;
 margin: 0;
 padding: 0;
 list-style: none;

}

.sidebar-nav li.sidebar-nav-item a { 

 display: block;
 text-decoration: none;
 color: #fff;
 padding: 15px;

}

.sidebar-nav li a:hover { 

 text-decoration: none;
 color: #fff;
 background: rgba(255, 255, 255, 0.2);

}

.sidebar-nav li a:active, .sidebar-nav li a:focus { 

 text-decoration: none;

}

.sidebar-nav > .sidebar-brand { 

 font-size: 1.2rem;
 background: rgba(52, 58, 64, 0.1);
 height: 80px;
 line-height: 50px;
 padding-top: 15px;
 padding-bottom: 15px;
 padding-left: 15px;

}

.sidebar-nav > .sidebar-brand a { 

 color: #fff;

}

.sidebar-nav > .sidebar-brand a:hover { 

 color: #fff;
 background: none;

}

  1. sidebar-wrapper.active {
 right: 250px;
 width: 250px;
 -webkit-transition: all 0.4s ease 0s;
 -moz-transition: all 0.4s ease 0s;
 -ms-transition: all 0.4s ease 0s;
 -o-transition: all 0.4s ease 0s;
 transition: all 0.4s ease 0s;

}

.menu-toggle { 

 position: fixed;
 right: 15px;
 top: 15px;
 width: 50px;
 height: 50px;
 text-align: center;
 color: #fff;
 background: rgba(52, 58, 64, 0.5);
 line-height: 50px;
 z-index: 999;

}

.menu-toggle:focus, .menu-toggle:hover { 

 color: #fff;

}

.menu-toggle:hover { 

 background: #343a40;

}

.service-icon { 

 background-color: #fff;
 color: #1D809F;
 height: 7rem;
 width: 7rem;
 display: block;
 line-height: 7.5rem;
 font-size: 2.25rem;
 box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);

}

.callout { 

 padding: 15rem 0;
 background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("http://www.gcpedia.gc.ca/gcwiki/images/6/6f/Bg-callout.png");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;

}

.callout h2 { 

 font-size: 3.5rem;
 font-weight: 700;
 display: block;
 max-width: 30rem;

}

.portfolio-item { 

 display: block;
 position: relative;
 overflow: hidden;
 max-width: 530px;
 margin: auto auto 1rem;

}

.portfolio-item .caption { 

 display: flex;
 height: 100%;
 width: 100%;
 background-color: rgba(33, 37, 41, 0.2);
 position: absolute;
 top: 0;
 bottom: 0;
 z-index: 1;

}

.portfolio-item .caption .caption-content { 

 color: #fff;
 margin: auto 2rem 2rem;

}

.portfolio-item .caption .caption-content h2 { 

 font-size: 0.8rem;
 text-transform: uppercase;

}

.portfolio-item .caption .caption-content p { 

 font-weight: 300;
 font-size: 1.2rem;

}

@media (min-width: 992px) { 

 .portfolio-item {
   max-width: none;
   margin: 0;
 }
 .portfolio-item .caption {
   -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
   -webkit-clip-path: inset(0px);
   clip-path: inset(0px);
 }
 .portfolio-item .caption .caption-content {
   transition: opacity 0.25s;
   margin-left: 5rem;
   margin-right: 5rem;
   margin-bottom: 5rem;
 }
 .portfolio-item img {
   -webkit-transition: -webkit-clip-path 0.25s ease-out;
   -webkit-clip-path: inset(-1px);
   clip-path: inset(-1px);
 }
 .portfolio-item:hover img {
   -webkit-clip-path: inset(2rem);
   clip-path: inset(2rem);
 }
 .portfolio-item:hover .caption {
   background-color: rgba(29, 128, 159, 0.9);
   -webkit-clip-path: inset(2rem);
   clip-path: inset(2rem);
 }

}

.footer { 

 padding-top: 5rem;
 padding-bottom: 5rem;

}

.footer .social-link { 

 display: block;
 height: 4rem;
 width: 4rem;
 line-height: 4.3rem;
 font-size: 1.5rem;
 background-color: #1D809F;
 transition: background-color 0.15s ease-in-out;
 box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);

}

.footer .social-link:hover { 

 background-color: #155d74;
 text-decoration: none;

}

a { 

 color: #1D809F;

}

a:hover, a:focus, a:active { 

 color: #155d74;

}

.btn-primary { 

 background-color: #1D809F !important;
 border-color: #1D809F !important;
 color: #fff !important;

}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active { 

 background-color: #155d74 !important;
 border-color: #155d74 !important;

}

.btn-secondary { 

 background-color: #ecb807 !important;
 border-color: #ecb807 !important;
 color: #fff !important;

}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active { 

 background-color: #ba9106 !important;
 border-color: #ba9106 !important;

}

.btn-dark { 

 color: #fff !important;

}

.btn { 

 box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
 font-weight: 700;

}

.bg-primary { 

 background-color: #1D809F !important;

}

.text-primary { 

 color: #1D809F !important;

}

.text-secondary { 

 color: #ecb807 !important;

}

</style>

</html> <html>

<section class="super-body"> 

   <a class="menu-toggle rounded" href="#">
     
   </a>
   <nav id="sidebar-wrapper">
  • <a class="js-scroll-trigger" href="#page-top">ACV Gateway</a>
  • <a class="js-scroll-trigger" href="#page-top">Connect</a>
  • <a class="js-scroll-trigger" href="#about">About</a>
  • <a class="js-scroll-trigger" href="#services">Road Transportation</a>
  • <a class="js-scroll-trigger" href="#contact">Contact</a> 
   </nav>

  	<header class="masthead d-flex">

Automated & Connected Vehicles Gateway

A collaboration space to share information and build a network of professionals working on ACVs
         <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>

</header> 


   <section class="content-section bg-primary" id="about">

ACV Gateway

The Automated and Connected Vehicle (ACV) Gateway is a collaboration space to share information and build a cross-functional network of professionals engaged on ACVs, including students and academics from all Canadian universities and colleges, federal, provincial, territorial and municipal public servants, as well as industry and other stakeholders.

           <a class="btn btn-dark btn-xl js-scroll-trigger" href="#access">Access the ACV Gateway</a>

   </section>



   <section class="content" id="access">

Access to the ACV Gateway

Welcome

           <a class="portfolio-item" href="#">

Public servants

Register

               
             
             <img class="img-fluid" src="img/portfolio-1.jpg" alt="">
           </a>

           <a class="portfolio-item" href="#">

Academics

Register

               
             
             <img class="img-fluid" src="img/portfolio-2.jpg" alt="">
           </a>

           <a class="portfolio-item" href="#">

Stakeholders

Request an invitation

               
             
             <img class="img-fluid" src="img/portfolio-3.jpg" alt="">
           </a>

           <a class="portfolio-item" href="https://gccollab.ca/groups/profile/1189110/enautomated-and-connected-vehicle-acv-gatewayfrpasserelle-de-vu00e9hicules-connectu00e9s-et-automatisu00e9s-vca">

Existing members

Sign in

               
             
             <img class="img-fluid" src="img/portfolio-4.jpg" alt="">
           </a>

   </section>

   <section class="callout">

Looking for the Government of Canada's official page on Road Transportation?

       <a class="btn btn-primary btn-xl" href="http://www.tc.gc.ca/en/services/road.html">Road Transportation</a>

   </section>

   <a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
     
   </a>

</section> </html>

Retrieved from "https://wiki.gccollab.ca/index.php?title=Passerelle_de_véhicules_connectés_et_automatisés&oldid=5036"