Skip to content

Commit

Permalink
amelioration design
Browse files Browse the repository at this point in the history
  • Loading branch information
@julkwel
julkwel committed Jan 4, 2019
1 parent 3a0d2a6 commit 1fe8f60
Show file tree
Hide file tree
Showing 8 changed files with 579 additions and 21 deletions.
54 changes: 42 additions & 12 deletions USER.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,42 @@
[
{"name" : "RAJERISON Julien"},
{"name" : "Mamy RAOBY"},
{"name" : "RATOVOARISON Bruno Marcelino"},
{"name" : "Chrys RAKOTONIMANANA"},
{"name": "RAKOTONDRATOMPO Bako Harry"},
{"name": "RAKOTONDRATOMPO Bako Harry"},
{"name": "MIRAN SYLLA"},
{"name" : "RAKOTONDRABE Ny Antso"},
{"name": "RANDRI Vony"},
{"name": "RAZAFINTSIALONINA Mamy"}
]
[
{
"name": "RAJERISON Julien",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "Mamy RAOBY",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "RATOVOARISON Bruno Marcelino",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "Chrys RAKOTONIMANANA",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "RAKOTONDRATOMPO Bako Harry",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "RAKOTONDRATOMPO Bako Harry",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "MIRAN SYLLA",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "RAKOTONDRABE Ny Antso",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "RANDRI Vony",
"image": "https://avatars1.githubusercontent.com/u/30557565"
},
{
"name": "RAZAFINTSIALONINA Mamy",
"image": "https://avatars1.githubusercontent.com/u/30557565"
}
]
5 changes: 5 additions & 0 deletions css/bootstrap-3.min.css
View file

Large diffs are not rendered by default.

111 changes: 110 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
body {
background: #000 !important;
margin: 0;
overflow: hidden!important;
}

canvas {
Expand All @@ -23,4 +24,112 @@ canvas {

#year {
color: rgba(211, 136, 23, 0.678);
}
}

/**
Carroussel css
*/
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}

/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active
{
background: #333333;
}
#quote-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */

.item blockquote {
border-left: none;
margin: 0;
}

.item blockquote img {
margin-bottom: 10px;
}

.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}



/**
MEDIA QUERIES
*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}

}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {

/* Make the indicators larger for easier clicking with fingers/thumb on mobile */

#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}

.gasy-content{width: 100%!important;height: 100%!important;overflow-y: hidden;overflow-x: hidden!important;}
61 changes: 53 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,73 @@
<meta charset="UTF-8">
<title>Bonne année</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-3.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800&amp;subset=cyrillic-ext,latin-ext" rel="stylesheet">
</head>
<body>
<section class="gasy-content">
<canvas id="canvas"></canvas>
<div class="text">
<h1>Bonne année
<span id="year"></span></h1><br>
<span>De la part de
<p id="name"></p>
</span>
<div class="row">
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" id="name">
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://avatars1.githubusercontent.com/u/30557565" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Mirary soa hoantsika rehetra.</p>
<small>RAJERISON Julien</small>
</div>
</div>
</blockquote>
</div>
</div>
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left" style="color: white"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right" style="color: white"></i></a>
</div>
</div>
</div>
</div>
</section>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/index.js"></script>
<script>
let year = new Date().getFullYear();
document.querySelector("#year").innerText = year;
document.title += ` ${year}`;
let gasy_year = new Date().getFullYear();
document.querySelector("#year").innerText = gasy_year;
document.title += ` ${gasy_year}`;
$.getJSON('USER.json', function (element) {
for (const nous of element) {
let nom = nous.name;
document.getElementById('name').innerHTML += '<span>' + nom + '' + ',' + '</span>';
let gasy_nom = nous.name ;
let gasy_image= nous.image ;
document.getElementById('name').innerHTML += '' +
'<div class="item">\n' +
' <blockquote>\n' +
' <div class="row">\n' +
' <div class="col-sm-3 text-center">\n' +
' <img class="img-circle" src="'+ gasy_image +'" style="width: 100px;height:100px;">\n' +
' </div>\n' +
' <div class="col-sm-9">\n' +
' <p>Bonne année ! '+ gasy_year +'</p>\n' +
' <small>' + gasy_nom + '</small>\n' +
' </div>\n' +
' </div>\n' +
' </blockquote>\n' +
'</div>'
}
})
</script>
Expand Down
Loading

0 comments on commit 1fe8f60

Please sign in to comment.