Skip to content

GitLab

Commit 6e41e853 authored by Elias2049's avatar Elias2049
Browse files

Style modification : new timeline and changes in appearance

parent 7757e086
Expand all Show whitespace changes
Inline Side-by-side
Showing with 2316 additions and 120 deletions
src/content/assets/css/style.css
View file @ 6e41e853
This diff is collapsed.
src/content/assets/img/LearnOCaml_MOOC.png 0 → 100644
View file @ 6e41e853
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
src/content/assets/img/logo_altergo.jpg 0 → 100644
View file @ 6e41e853
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
src/content/assets/img/logo_dune_gimp.png 0 → 100644
View file @ 6e41e853
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
src/content/assets/img/logo_love_gimp.png 0 → 100644
View file @ 6e41e853
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
src/content/assets/img/logo_tzscan.jpg 0 → 100644
View file @ 6e41e853
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
src/content/assets/img/logo_tzscan_gimp.jpg 0 → 100644
View file @ 6e41e853
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
src/content/index.md
View file @ 6e41e853
......@@ -39,46 +39,46 @@ We cater to very specific needs. For example, we can translate a “black box”
<br />
<div class="row">
<div class="col-lg-3">
<p><img src="assets/img/logo_opam.png"/></p>
<p><img class="img_products" src="assets/img/logo_opam.png"/></p>
<h3 align="center"><a href="https://opam.ocaml.org">opam</a></h3>
<p>A highly scalable package manager</p>
<p class="p_index_center">A highly scalable package manager</p>
</div>
<div class="col-lg-3">
<p><img src="assets/img/logo_ocaml.svg" width="150"/></p>
<p><img class="img_products" src="assets/img/logo_ocaml.svg" /></p>
<h3 align="center"><a href="https://ocaml-sf.org/learn-ocaml-public/#">Learn OCaml</a></h3>
<p>Exercise platform for teachers and learners around the world aiming to discover OCaml</p>
<p class="p_index_center">Exercise platform for teachers and learners around the world aiming to discover OCaml</p>
</div>
<div class="col-lg-3">
<p><img src="assets/img/logo_altergo.png" width="150"/></p>
<p><img class="img_products" src="assets/img/logo_altergo.png" /></p>
<h3 align="center"><a href="https://alt-ergo.ocamlpro.com/">Alt-Ergo</a></h3>
<p>An SMT solver for software verification</p>
<p class="p_index_center">An SMT solver for software verification</p>
</div>
<div class="col-lg-3">
<p><img src="assets/img/logo_dune.png"/></p>
<p><img class="img_products" src="assets/img/logo_dune_gimp.png"/></p>
<h3 align="center"><a href="https://dunscan.io/">DunScan</a></h3>
<p>The Dune network explorer</p>
<p class="p_index_center">The Dune network explorer</p>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<p><img src="assets/img/logo_love.png"/></p>
<p><img class="img_products" src="assets/img/logo_love_gimp.png"/></p>
<h3 align="center"><a href="https://dune.network/docs/dune-node-next/love-doc/reference/love.htmlo/">LOVE</a></h3>
<p>A smart-contract language for the Dune Network blockchain</p>
<p class="p_index_center">A smart-contract language for the Dune Network blockchain</p>
</div>
<div class="col-lg-3">
<p><img src="assets/img/logo_tezos.svg" width="150"/></p>
<p><img class="img_products" src="assets/img/logo_tezos.svg" /></p>
<h3 align="center"><a href="https://en.wikipedia.org/wiki/Tezos">Tezos</a></h3>
<p>A blockchain with integrated governance</p>
<p class="p_index_center">A blockchain with integrated governance</p>
</div>
<div class="col-lg-3">
<p><img src="assets/img/logo_solidity.png" width="200"/></p>
<p><img class="img_products" src="assets/img/logo_solidity.png" /></p>
<h3 align="center"><a href="https://gitlab.com/o-labs/solidity-parser-ocaml">Solidity parser</a></h3>
<p>A Solidity Parser in OCaml with Menhir</p>
<p class="p_index_center">A Solidity Parser in OCaml with Menhir</p>
</div>
<div class="col-lg-3">
<p><img src="assets/img/logo_tzscan.png"/></p>
<p><img class="img_products" src="assets/img/logo_tzscan_gimp.jpg"/></p>
<h3 align="center"><a href="https://tzscan.io/">TZScan</a></h3>
<p>The Tezos network explorer</p>
<p class="p_index_center">The Tezos network explorer</p>
</div>
</div>
<br />
......@@ -189,7 +189,280 @@ We cater to very specific needs. For example, we can translate a “black box”
<br />
<br />
<!-- All the code for the timeline below has been taken from the following: https://www.bootdey.com/snippets/view/timeline-steps -->
<div class="container-fluid">
<div class="row">
<div id="timeline">
<div class="row timeline-movement timeline-movement-top">
<div class="timeline-badge timeline-future-movement">
<p>2011</p>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-left">
</div>
<div class="col-sm-6 timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel credits anim animate fadeInLeft">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_ocp_icon.svg"/></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">April 1, 2011</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">OcamlPro is founded </span> </li>
<li><span class="causale">OCamlPro is founded to help spread the OCaml language in the industry. <br>
Fabrice le Fessant, a researcher and member of the French Inria Institute, founds OCamlPro to boost the development of OCaml and promote it in the industry.</span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-right">
</div>
<div class="offset-sm-6 col-sm-6 timeline-item">
<div class="row">
<div class="offset-sm-1 col-sm-11">
<div class="timeline-panel debits anim animate fadeInRight">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_janestreet.svg"/></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">May 1, 2011</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Long-term collaboration with Jane Street on Ocaml tooling </span> </li>
<li><span class="causale">Jane Street supports the diffusion of Ocaml, and becomes OcamlPro's most important client.</span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-left">
</div>
<div class="col-sm-6 timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel credits anim animate fadeInLeft">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_typerex.png" class="img-responsive" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">February 28, 2012</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">OcamlPro contributes Open Source developer tools under the codename TypeRex! </span> </li>
<li><span class="causale">The TypeRex programming studio is a set of open source tools for developing applications in Ocaml.</span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--<div class="row timeline-movement timeline-movement-top">
<div class="timeline-badge timeline-future-movement">
<p>2017</p>
</div>
</div>-->
<div class="row timeline-movement">
<div class="timeline-badge center-right">
</div>
<div class="offset-sm-6 col-sm-6 timeline-item">
<div class="row">
<div class="offset-sm-1 col-sm-11">
<div class="timeline-panel debits anim animate fadeInRight">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_opam.png" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">March 1, 2013</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">First official release of OPAM 1.0 </span> </li>
<li><span class="causale">The Ocaml Package Manager is officially released as OPAM 1.0. </span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-left">
</div>
<div class="col-sm-6 timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel credits anim animate fadeInLeft">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<!--<li class="img-wraping"><a href="#"><img src="http://via.placeholder.com/250/000000" class="img-responsive" alt="user-image" /></a></li>-->
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">December 1, 2014</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Release of the Flambda optimizing compiler </span> </li>
<li><span class="causale">The first Flambda is proposed into Ocaml by Pierre Chambart and Mark Shinwell in PR #132 - work funded by Jane Street. </span> </li>
<li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/01/2018, 13:05"</small></p> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-right">
</div>
<div class="offset-sm-6 col-sm-6 timeline-item">
<div class="row">
<div class="offset-sm-1 col-sm-11">
<div class="timeline-panel debits anim animate fadeInRight">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/LearnOCaml_MOOC.png" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">July 1, 2015</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Université Paris 7 appoints OcamlPro to implement the exercise platform of the Ocaml MOOC on France Université Numérique</span> </li>
<li><span class="causale">OCamlPro implements the first version of the exercise autocorrecting platform of the OCaml MOOC on France Université Numérique for Université Paris 7, based on TryOCaml, integrates to the OpenEDX/FUN and designs some of the exercices of the course, in close collaboration with Roberto Di Cosmo and Yann-Régis Gianas at Irill.</span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-left">
</div>
<div class="col-sm-6 timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel credits anim animate fadeInLeft">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_altergo.png" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">November 1, 2016</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Alt-Ergo 1.30 release with experimental support for model generation </span> </li>
<li><span class="causale">Alt-Ergo is an automatic prover of mathematical formulas used behind software verification tools such as Frama-C, SPARK, Why3, Atelier-B and Caveat. </span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-right">
</div>
<div class="offset-sm-6 col-sm-6 timeline-item">
<div class="row">
<div class="offset-sm-1 col-sm-11">
<div class="timeline-panel debits anim animate fadeInRight">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_tezos.svg" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">2017</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">OCamlPro successfully implements the Tezos crowdfunding platform</span> </li>
<li><span class="causale">OCamlPro delivers Tezos and its crowdfunding platform, complete with the TZscan and Liquidity tools.</span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-left">
</div>
<div class="col-sm-6 timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel credits anim animate fadeInLeft">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_fondation_ocaml.svg" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">April 1, 2018</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">OCamlPro supports Inria's Ocaml Software Foundation creation</span> </li>
<li><span class="causale">The OCaml Software Foundation is born at Inria !</span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-right">
</div>
<div class="offset-sm-6 col-sm-6 timeline-item">
<div class="row">
<div class="offset-sm-1 col-sm-11">
<div class="timeline-panel debits anim animate fadeInRight">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_origin_labs.svg" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">May 27, 2019</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">New Company Origin Labs is created to lauch and maintain the Dune Network</span> </li>
<li><span class="causale">The Blockchain team at OCamlPro want to find new opportunities for their expertise and creates a new company, </span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row timeline-movement">
<div class="timeline-badge center-left">
</div>
<div class="col-sm-6 timeline-item">
<div class="row">
<div class="col-sm-11">
<div class="timeline-panel credits anim animate fadeInLeft">
<ul class="timeline-panel-ul">
<div class="lefting-wrap">
<li class="img-wraping"><a href="#"><img src="assets/img/logo_altergo.png" alt="user-image" /></a></li>
</div>
<div class="righting-wrap">
<li><a href="#" class="importo">February 14, 2020</a></li>
<li><span class="causale" style="color:#000; font-weight: 600;">Alt-Ergo Users' Club: MERCE (Mitsubishi Electric Research Centre in Europe) and Why3 join the Club</span> </li>
<li><span class="causale">The second annual meeting of the Alt-Ergo Users' Club was held in mid-February. These meetings are the perfect place to review each partner's needs regarding Alt-Ergo, discuss the roadmap for future Alt-Ergo developments and enhancements.</span> </li>
</div>
<div class="clear"></div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
All the code for the timeline below has been taken from the following: https://www.bootdey.com/snippets/view/timeline-steps
<div class="row">
<div class="col">
<div class="timeline-steps aos-init aos-animate" data-aos="fade-up">
......@@ -266,5 +539,55 @@ We cater to very specific needs. For example, we can translate a “black box”
</div>
</div>
</div>
<!-- All the code for the timeline above has been taken from the following: https://www.bootdey.com/snippets/view/timeline-steps -->
All the code for the timeline above has been taken from the following: https://www.bootdey.com/snippets/view/timeline-steps -->
<script> /*Timeline Animation*/
/**********************Scroll Animation "START"************************************/
$(document).ready(function(){
var $animation_elements = $('.anim');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('animated');
} else {
$element.removeClass('animated');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
});
/**********************Scroll Animation "END"************************************/
/**********************Change color of center aligned animated content small Circle "START"************************************/
$(document).ready(function(){
$(" .debits").hover(function(){
$(" .center-right").css("background-color", "#4997cd");
}, function(){
$(" .center-right").css("background-color", "#fff");
});
});
$(document).ready(function(){
$(".credits").hover(function(){
$(".center-left").css("background-color", "#4997cd");
}, function(){
$(".center-left").css("background-color", "#fff");
});
});
/**********************Change color of center aligned animated content small Circle "END"************************************/
</script>
src/content/template.html
View file @ 6e41e853
<!DOCTYPE html>
<html lang="![lang]>">
<head>
<!DOCTYPE html>
<html lang="![lang]>">
<head>
<title>![title] | OCamlPro</title>
<meta name="description" content="![description]" />
<meta name="keywords" content="![keywords]" />
<link rel="icon" type="image/svg+xml" href="/assets/img/logo_ocp_icon.svg">
<link href="/assets/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/assets/css/prism.css" rel="stylesheet"/>
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/css/prism.css" rel="stylesheet" />
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="/"><img src="/assets/img/logo_ocamlpro.png" alt="OCamlPro" height="42" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
......@@ -26,7 +30,8 @@
<a class="nav-link" href="/startup_studio">Startup Studio</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="nav-link dropdown-toggle" id="navbarDarkDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Trainings
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
......@@ -34,24 +39,29 @@
<li><a class="dropdown-item" href="/course_ocaml_expert">OCaml Expert</a></li>
<li><a class="dropdown-item" href="/course_ocaml_code_opti">OCaml Code Optimization</a></li>
<li><a class="dropdown-item" href="/course_rust_vocational_training">Rust Vocational Training</a></li>
<li><a class="dropdown-item" href="/course_mastering_opam_ocaml_tools">Mastering OPAM &amp; OCaml Tools</a></li>
<li><a class="dropdown-item" href="/course_mastering_opam_ocaml_tools">Mastering OPAM &amp; OCaml
Tools</a></li>
<li><a class="dropdown-item" href="mailto:contact@ocamlpro.com">Custom Training</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Software
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="https://github.com/ocaml/opam">OPAM</a></li>
<li><a class="dropdown-item" href="https://github.com/OCamlPro/digodoc">Digodoc</a></li>
<li><a class="dropdown-item" href="https://github.com/ocaml-sf/learn-ocaml">Learn-OCaml</a></li>
<li><hr class="dropdown-divider"></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="https://ocamlpro.github.io">OCamlPro on Github!</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Join our Team
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
......@@ -63,10 +73,11 @@
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
![if:draft] <li class="nav-item">
![if:draft] <li class="nav-item">
<a class="nav-link" href="/startup_studio">Startup Studio</a>
</li>
![if:end] </ul>
![if:end]
</ul>
</div>
</div>
</nav>
......@@ -88,14 +99,15 @@
<a href="tel:+33184800481">Phone</a> &middot;
<a href="https://www.openstreetmap.org/node/2996094140">21 rue de Châtillon, 75014 Paris, France</a> &middot;
<a href="/legal-notice">Legal Notice</a> &middot;
<a href="/blog/feed"><img class="feed" type="image/svg+xml" src="/assets/img/icon_atom_feed.svg"/></a>
<a href="/blog/feed"><img class="feed" type="image/svg+xml" src="/assets/img/icon_atom_feed.svg" /></a>
</p>
</footer>
</main>
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script src="/assets/js/prism.js"></script>
<script>
(function() {document.querySelectorAll("blockquote").forEach(function(b) { b.classList.length || b.classList.add("blockquote"); });})()
(function () { document.querySelectorAll("blockquote").forEach(function (b) { b.classList.length || b.classList.add("blockquote"); }); })()
</script>
</body>
</html>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment