Skip to content

Instantly share code, notes, and snippets.

@lebowvsky

lebowvsky/index.html

Last active February 17, 2020 22:24
Show Gist options
  • Save lebowvsky/e13e638f48d559645f4b8d9cfad32b26 to your computer and use it in GitHub Desktop.
Save lebowvsky/e13e638f48d559645f4b8d9cfad32b26 to your computer and use it in GitHub Desktop.
Download ZIP
Cegedim
Raw
index.html
<!--PAGE ACCUEIL-->
<!doctype html>
<html lang="en-US">
<head>
<title>Video Conferencing, Web Conferencing, Online Meetings, Screen Sharing - Zoom</title> <!--customize landing page title-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="zoom, zoom.us, video conferencing, video conference, online meetings, web meeting, video meeting, cloud meeting, cloud video, group video call, group video chat, screen share, application share, mobility, mobile collaboration, desktop share, video collaboration, group messaging" />
<meta name="description" content="Zoom unifies cloud video conferencing, simple online meetings, and cross platform group chat into one easy-to-use platform. Our solution offers the best video, audio, and screen-sharing experience across Zoom Rooms, Windows, Mac, iOS, Android, and H.323/SIP room systems." />
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="https://d24cgw3uvb9a9h.cloudfront.net/zoom.ico"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="language">
<button id="french-button">French</button>
<button id="english-button">English</button>
</div>
<div class="container">
<article>
<section id="first-section"><!--customize position-->
<img id="img-cegedim" src="https://zoom.us/account/branding/p/34b1ce1b-8be4-4e38-828a-e17e60bbadde.png" class="Cegedim-logo" alt="Cegedim Logo">
<div>
<a target="_blank" href="/signin"><p><span class="frenchV">Se connecter</span><span class="englishV">Sign in</span></p></a>
<a target="_blank" href="https://zoom.us/account/branding/p/aeb98cfa-cdc7-426a-9ccc-bc4fd21487af.jpg" ><p><span class="frenchV">!!! Mettre Zoom au démarrage ?</span><span class="englishV">!!! Put Zoom at startup ?</span></p></a>
</div>
</section>
<section id="section-two">
<div class="part">
<a id="link-one" target="_blank" href="/join" class="button-bleu"><p><span class="frenchV">Rejoindre</span><span class="englishV">Join</span></p></a>
<div id="text-one" class="explanation">
<p><span class="frenchV">Rejoindre une réunion en cours</span><span class="englishV">Connect to a meeting in progress</span></p>
</div>
</div>
<div class="part">
<a id="link-two" target="_blank" href="/start/videomeeting" class="button-bleu"><p><span class="frenchV">Nouvelle réunion</span><span class="englishV">Host</span></p></a>
<div id="text-two" class="explanation">
<p><span class="frenchV">Nouvelle réunion</span><span class="englishV">Start a meeting</span></p>
</div>
</div>
<div class="part">
<a id="link-three" target="_blank" href="http://cdocs.cegedim-portal.com/sites/DirComGpe/Resources%20center/13_VisioConf/"><p>Documentation</p></a>
<div id="text-three" class="explanation">
<p><span class="frenchV">Cegedim : Documentation & Formulaires</span><span class="englishV">Cegedim : Documentation & Forms</span></p>
</div>
</div>
<div class="part">
<a id="link-four" target="_blank" href="/download" class="button-bleu"><p>Download</p></a>
<div id="text-four" class="explanation">
<p><span class="frenchV">Client Zoom</span><span class="englishV">Zoom application</span></p>
<p><span class="frenchV">Module pour Microsoft Outlook</span><span class="englishV">Module for Microsoft Outlook</span></p>
<p><span class="frenchV">APPs Zoom sur mobile</span><span class="englishV">Mobile APPs</span></p>
</div>
</div>
</section>
<section id="section-three">
<img src="https://zoom.us/account/branding/p/ed0426ca-83fa-412d-975e-8ec684b6e791.png" class="Attention-logo" alt="Cegedim Logo">
<div class="frenchV">
<p class="underlined red centered">Attention aux informations que vous partagez via le Chat</p>
<p>Les engagements de sécurité RGPD de Cegedim imposent d’être vigilent et responsable sur le contenu de ses communications externalisées : vous ne devez pas échanger de données dites sensibles notamment de Santé (attention aux captures d’écran des logiciels santé)</p>
<p>Des audits seront régulièrement réalisées afin de vérifier le respect de ces engagements</p>
</div>
<div class="englishV">
<p class="underlined red centered">Beware of the informations you share via Chat</p>
<p>Cegedim's GDPR security commitments require that you be vigilant and responsible for the content of its outsourced communications: you must not exchange so-called sensitive data, in particular health data (be careful health software screen) Audits will be regularly carried out to verify compliance with these commitments</p>
</div>
</section>
</article>
</div>
<footer>
<div>
<a href="https://support.zoom.us/hc/en-us" target="_blank">Support FR</a>
<a href="https://support.zoom.us/hc/fr/sections/201728913-Joining-Starting">Démarrer</a>
</div>
<div>
<a href="https://support.zoom.us/hc/en-us" target="_blank">Support EN</a>
<a href="https://support.zoom.us/hc/en-us/sections/201728913-Joining-Starting">Started</a>
</div>
<a href="/download">Download</a>
</footer>
<script type="text/javascript">
const frenchButton = document.body.querySelector("#french-button");
const englishButton = document.body.querySelector("#english-button");
const frenchVersion = document.body.querySelectorAll(".frenchV");
const englishVersion = document.body.querySelectorAll(".englishV");
function frenchAppear(){
englishVersion.forEach(item => item.style.display = "none");
frenchVersion.forEach(item => item.style.display = "block");
}
function englishAppear(){
frenchVersion.forEach(item => item.style.display = "none");
englishVersion.forEach(item => item.style.display = "block");
}
frenchButton.addEventListener("click", frenchAppear);
englishButton.addEventListener("click", englishAppear);
</script>
</body>
</html>
Raw
style.css
@media screen and (min-width: 1000px) {
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'lato';
}
p {
margin: 0;
}
a {
text-decoration: none;
font-size: 1.1em;
}
.underlined {
text-decoration: underline;
margin-bottom: 2vh;
}
.red {
color: red;
}
.centered {
text-align: center;
}
/* ---------------------------Language----------------------- */
#language {
position: fixed;
top: 2vh;
left: 3vh;
/* background-color: rgba(169, 169, 169, 0.3); */
color: white;
padding: 1vh;
border-radius: 10px;
display: grid;
grid-row-gap: 10px;
}
#language button {
border: none;
height: 50px;
width: 50px;
background-color: rgba(216, 112, 147, 0.5);
padding: 5px;
border-radius: 50%;
color: white;
transition: background-color 250ms ease-in-out;
transition: transform 350ms cubic-bezier(.39,-0.79,.56,1.73);
}
#language button:hover{
background-color: rgba(216, 112, 147, 0.8);
transform: scale(1.5);
}
/* ----------------------------------------------------------------CONTAINER-------------------------------------------------------------- */
.container {
height: 95vh;
width: 100%;
background-image: url("https://d24cgw3uvb9a9h.cloudfront.net/static/93768/image/new/home/DefaultLandingBgImg.jpg"); /*customize background image*/
background-size: cover;
}
/* ---------------------------Sections----------------------- */
#first-section {
grid-area: first;
}
#section-two {
grid-area: two;
}
#section-three {
grid-area: three;
}
article {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 30% 40% 13%;
grid-row-gap: 4%;
grid-template-areas:
". first"
". two"
"three three";
}
section {
height: 100%;
margin-top: 2%;
}
/* ---------------------------First Section----------------------- */
#first-section{
height: 100%;
width: 95%;
display: grid;
grid-row-gap: 10px;
grid-template-rows: 70% 25%;
justify-items: center;
}
#img-cegedim {
width: 100%;
max-height: 100%;
justify-self: center;
}
#first-section div {
height: 100%;
width: 100%;
display: grid;
grid-template-columns: 48% 48%;
grid-column-gap: 4%;
}
#first-section a {
color: white;
background-color: darkgray;
height: 100%;
width: 100%;
border-radius: 10px;
display: grid;
align-items: center;
text-align: center;
transition: background-color 250ms ease-in-out;
}
#first-section a:hover {
background-color: orange;
}
/* ---------------------------Section Two----------------------- */
#section-two {
height: 100%;
width: 95%;
display: grid;
grid-row-gap: 5%;
grid-template-rows: 20% 20% 20% 20%;
}
#section-two .part{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 30% 70%;
border-radius: 10px;
overflow: hidden;
}
#section-two .part p {
font-size: 0.9em;
}
#section-two a {
color: white;
background-color: rgba(216, 112, 147, 0.4);
display: grid;
align-items: center;
text-align: center;
}
#section-two p, #section-two div {
align-self: center;
justify-self: center;
}
.explanation{
height: 100%;
width: 100%;
display: grid;
align-items: center;
border-bottom: 4px solid rgba(216, 112, 147, 0.4);
}
#text-one, #text-two, #text-three, #text-four {
position: relative;
z-index: 1;
}
#text-one::before, #text-two::before, #text-three::before, #text-four::before {
position: absolute;
content: "";
width: 0;
z-index: 0;
height: 100%;
background-color: rgba(216, 112, 147, 0.4);
transition: width 300ms ease-in-out;
}
#link-one:hover + #text-one::before {
width: 100%;
}
#link-two:hover + #text-two::before {
width: 100%;
}
#link-three:hover + #text-three::before {
width: 100%;
}
#link-four:hover + #text-four::before {
width: 100%;
}
/* ---------------------------Section Three----------------------- */
#section-three {
height: 100%;
width: 75%;
background-color: rgba(169, 169, 169, 0.3);
justify-self: center;
display: grid;
grid-template-columns: 10% 90%;
font-size: 0.9em;
border-radius: 10px;
}
#section-three img {
height: 80%;
opacity: 0.6;
align-self: center;
justify-self: center;
}
#section-three div {
position: relative;
width: 90%;
height: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: justify;
}
.englishV {
display: none;
}
/* ---------------------------Footer----------------------- */
footer {
height: 5vh;
line-height: 5vh;
display: flex;
flex-wrap: nowrap;
justify-content: space-evenly;
background-color: rgb(136, 136, 136);
}
footer a {
color: white;
text-decoration: underline;
}
footer a:hover {
color: orange;
}
footer div {
width: 20%;
text-align: center;
}
footer div {
display: flex;
flex-wrap: nowrap;
justify-content: space-evenly;
}
}
@media screen and (min-width: 3px) {
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment