Commit 87d13870 authored by Elias2049's avatar Elias2049
Browse files

Currently working on blog page : icons and rows

parent 5505b094
...@@ -282,22 +282,31 @@ let links_to_home_pages = ...@@ -282,22 +282,31 @@ let links_to_home_pages =
{| {|
<div class="row"> <div class="row">
<div class="col-lg-4" align="left"> <div class="col-lg-4" align="left">
<p class="toplinks2">
<a href="/blog">
Home
</a>
</p>
<p class="toplinks"> <p class="toplinks">
<img class="" src="/blog/assets/img/icon_home.svg"/> <img class="blogimg" src="/blog/assets/img/icon_home.svg"/>
<a href="/blog">Home</a>
</p> </p>
</div> </div>
<div class="col-lg-4" align="center"> <div class="col-lg-4" align="center">
<p class="toplinks"> <p class="toplinks">
<a href="/blog/feed"> <a href="/blog/feed">
<img class="feed" src="/blog/assets/img/icon_atom_feed.svg"/> <img class="blogimg" src="/blog/assets/img/icon_atom_feed.svg"/>
</a> </a>
</p> </p>
</div> </div>
<div class="col-lg-4" align="right"> <div class="col-lg-4" align="right">
<p class="toplinks3">
<img class="blogimg" src="/blog/assets/img/icon_categories.svg"/>
</p>
<p class="toplinks"> <p class="toplinks">
<img class="" src="/blog/assets/img/icon_categories.svg"/> <a href="/blog/category">
<a href="/blog/category">Categories</a> Categories
</p>
</a>
</p> </p>
</div> </div>
</div> </div>
......
/* Fontin font : as used in the previous OCamlPro website*/
@font-face { @font-face {
font-family: "Fontin"; font-family: "Fontin";
src: url("../font/Fontin-Regular.ttf") format('truetype'), src: url("../font/Fontin-Regular.ttf") format('truetype');
url("../font/Fontin-Bold.ttf") format('truetype'), }
url("../font/Fontin-Italic.ttf") format('truetype');
@font-face {
font-family: "Fontin-Bold";
src: url("../font/Fontin-Bold.ttf") format('truetype');
}
@font-face {
font-family: "Fontin-Italic";
src: url("../font/Fontin-Italic.ttf") format('truetype');
} }
body { body {
...@@ -23,11 +33,21 @@ p img { ...@@ -23,11 +33,21 @@ p img {
.toplinks .toplinks
{ {
font-size: 1em; font-size: 1em;
font-family: 'Fontin';
margin-left: 10px;
}
.toplinks2 {
float: left;
}
.toplinks3 {
float: left;
margin-left: 140px;
} }
h1, h2 { h1, h2 {
font-family: "Fontin"; font-family: "Fontin-Bold"; /*Seems a little bit too 'boudiné' : not beautiful on smartphones and tabs*/
/*font-weight: bold;*/
} }
.quote blockquote { .quote blockquote {
...@@ -47,11 +67,13 @@ h1, h2 { ...@@ -47,11 +67,13 @@ h1, h2 {
} }
.card-text { .card-text {
text-align: justify; text-align: left;
} }
.card-image { .card-image {
max-width: 10em; /*max-width: 10em;*/
width: auto;
max-height: 200px;
display: block; display: block;
margin: auto; margin: auto;
} }
...@@ -180,7 +202,7 @@ a:hover { ...@@ -180,7 +202,7 @@ a:hover {
} }
img.feed { img.feed {
display: inline; /*Keep feed icon in footer align (as it's an image)*/ display: inline; /*Keep feed icon in footer aligned (as it's an image)*/
} }
.bg-dark { .bg-dark {
...@@ -200,6 +222,20 @@ img.feed { ...@@ -200,6 +222,20 @@ img.feed {
font-family: 'Fontin'; font-family: 'Fontin';
} }
.btn-primary {
background-color: #1688AB;
border-color: #1688AB;
}
.navbar-dark .navbar-nav .nav-link {
color: rgb(255,255,255);
}
.blogimg {
width: 35px;
}
/**************Animation File Start Here (animate.css)****************/ /**************Animation File Start Here (animate.css)****************/
/**************Copy and Save this in another file (animate.css)****************/ /**************Copy and Save this in another file (animate.css)****************/
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
...@@ -189,6 +189,8 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -189,6 +189,8 @@ We cater to very specific needs. For example, we can translate a “black box”
<br /> <br />
<br /> <br />
<!-- The following timeline has been taken from : https://bootsnipp.com/snippets/P2nW7 || author: anmolv886 from bootsnipp.com / JQuery script is used and added just below-->
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div id="timeline"> <div id="timeline">
...@@ -541,7 +543,8 @@ We cater to very specific needs. For example, we can translate a “black box” ...@@ -541,7 +543,8 @@ We cater to very specific needs. For example, we can translate a “black box”
</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*/ <script>
/*Timeline Animation*/
/**********************Scroll Animation "START"************************************/ /**********************Scroll Animation "START"************************************/
$(document).ready(function(){ $(document).ready(function(){
var $animation_elements = $('.anim'); var $animation_elements = $('.anim');
......
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<img src="assets/img/logo_clearsy.jpg" class="img-fluid rounded card-image" style="max-width:9.5em;"/> <img src="assets/img/logo_clearsy.jpg" class="img-fluid rounded card-image" /> <!--style="max-width:9.5em;" -->
</div> </div>
<div class="col-lg-8"> <div class="col-lg-8">
<h3> <h3>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<img src="assets/img/logo_fui.jpg" class="img-fluid rounded card-image" style="max-width:7.5em"/> <img src="assets/img/logo_fui.jpg" class="img-fluid rounded card-image" /> <!--style="max-width:7.5em" -->
</div> </div>
<div class="col-lg-8"> <div class="col-lg-8">
<h3> <h3>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<img src="assets/img/logo_tryocaml.png" class="img-fluid rounded card-image" style="max-width:7em"/> <img src="assets/img/logo_tryocaml.png" class="img-fluid rounded card-image" /> <!--style="max-width:7em" -->
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<h3> <h3>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<img src="assets/img/logo_scilab.png" class="img-fluid rounded card-image" style="max-width:9.5em"/> <img src="assets/img/logo_scilab.png" class="img-fluid rounded card-image" /> <!--style="max-width:9.5em" -->
</div> </div>
<div class="col-lg-8"> <div class="col-lg-8">
<h3> <h3>
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<img src="assets/img/logo_opam.png" class="img-fluid rounded card-image" style="max-width:7em"/> <img src="assets/img/logo_opam.png" class="img-fluid rounded card-image"/> <!-- style="max-width:7em" -->
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<h3> <h3>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row"> <div class="row">
<div class="col-lg-4"> <div class="col-lg-4">
<img src="assets/img/photo_muriel.jpeg" class="img-fluid rounded card-image"/> <img src="assets/img/photo_muriel.jpeg" class="img-fluid rounded card-image" /> <!-- style="width:169px; height:200px" Specific width and heigth for this picture only-->
<h4 class="card-title">Muriel Shan Sei Fan</h4> <h4 class="card-title">Muriel Shan Sei Fan</h4>
<p><small class="text-muted">President</small></p> <p><small class="text-muted">President</small></p>
</div> </div>
......
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