vergnet/site-accueil-insa
2
1
Fork 1
Code Issues Pull requests Releases 2 Wiki Activity

Changed website style

Browse source
This commit is contained in:
Keplyx 2018-03-29 17:20:05 +02:00
parent 312cfc020a
commit 975301eeae
9 changed files with 45 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
assets/css/photos.css
View file

@ -1,20 +1,20 @@
.photos_folder { .photos_folder {
width: 100%; width: 100%;
display: flex; display: flex;
border: 1px solid #212121; border: 1px solid #5a5a5a;
border-radius: 10px; border-radius: 5px;
} }
.photos_folder a:hover, .photos_path a:hover { .photos_folder a:hover, .photos_path a:hover {
box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000;
background-color: white; background-color: #e0e0e0;
color: black; color: black;
} }
.photos_folder a { .photos_folder a {
font-size: 25px; font-size: 25px;
text-decoration: none; text-decoration: none;
border-radius: 10px; border-radius: 5px;
min-width: 100px; min-width: 100px;
height: 100px; height: 100px;
padding: 10px; padding: 10px;
@ -22,10 +22,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #212121; background-color: #1a1a1a;
box-shadow: 0 0 2px #212121; box-shadow: 0 0 4px #000;
transition: 0.3s; transition: 0.3s;
color: white; color: #e0e0e0;
} }
.photos img { .photos img {
@ -34,14 +34,16 @@
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
transition: 0.3s; transition: 0.3s;
padding: 0;
} }
.photos img:hover { .photos img:hover {
opacity: 0.5; box-shadow: 0 0 5px #000;
opacity: 0.7;
} }
.photos img:active { .photos img:active {
opacity: 0.1; box-shadow: 0 0 10px #000;
} }
.no_photo { .no_photo {
@ -70,10 +72,10 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #212121; background-color: #1a1a1a;
box-shadow: 0 0 2px #212121; box-shadow: 0 0 4px #000;
transition: 0.3s; transition: 0.3s;
color: white; color: #e0e0e0;
} }
#img_big { #img_big {

6
assets/css/sidenav.css
View file

@ -3,16 +3,16 @@
.sidenav { .sidenav {
height: 100%; height: 100%;
width: 250px; width: 250px;
margin-left: -250px; /* change margin with JavaScript */ margin-left: -500px; /* change margin with JavaScript */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
z-index: 1000; z-index: 1000;
top: 0; top: 0;
left: 0; left: 0;
background-color: #111111;
overflow-x: hidden; /* Disable horizontal scroll */ overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 80px; padding-top: 80px;
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
box-shadow: none; /* change shadow with JavaScript */ text-align: left;
background: linear-gradient(to right, #1c1c1c, transparent 90%);
} }
/* The navigation menu links */ /* The navigation menu links */

34
assets/css/style.css
View file

@ -38,19 +38,21 @@ body {
-o-background-size: cover; -o-background-size: cover;
box-sizing: border-box; box-sizing: border-box;
color: #373737; color: #b5b5b5;
font-size: 16px; font-size: 16px;
font-family: 'Nunito Sans', sans-serif; font-family: 'Nunito Sans', sans-serif;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-align: center;
} }
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
margin: 10px 0; margin: 10px 0;
color: #222222; color: #e0e0e0;
font-family: 'Rubik', sans-serif; font-family: 'Work Sans', sans-serif;
font-weight: bold;
letter-spacing: -1px; letter-spacing: -1px;
border-bottom: 1px solid #ccc; text-align: center;
} }
h1 { h1 {
@ -187,12 +189,11 @@ Full-Width Styles
#header_top { #header_top {
display: flex; display: flex;
color: white; color: white;
background: #212121;
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 50px;
z-index: 2000; z-index: 2000;
box-shadow: 0 2px 5px #222; height: 100px;
background: linear-gradient(to bottom, #1c1c1c, transparent 90%);
} }
#header_top h4 { #header_top h4 {
@ -212,9 +213,10 @@ Full-Width Styles
margin: 0; margin: 0;
color: #fff; color: #fff;
font-size: 42px; font-size: 42px;
font-weight: 700;
text-shadow: #111 0 0 10px; text-shadow: #111 0 0 10px;
border-bottom: none; text-align: center;
font-family: 'Work Sans', sans-serif;
font-weight: normal;
} }
#description { #description {
@ -232,9 +234,6 @@ Full-Width Styles
#home_content { #home_content {
padding-top: 100px; padding-top: 100px;
background-color: #212121aa;
border-radius: 0 0 60px 60px;
box-shadow: 0 0 40px #212121;
} }
#home_content h1 { #home_content h1 {
@ -252,9 +251,16 @@ Full-Width Styles
text-shadow: 0 0 5px #000; text-shadow: 0 0 5px #000;
} }
#main_fading_top_edge {
height: 200px;
background: linear-gradient(to top, #1c1c1c, transparent 90%);
}
#main_fading_bottom_edge {
height: 200px;
background: linear-gradient(to bottom, #1c1c1c, transparent 90%);
}
#main_content_wrap { #main_content_wrap {
background: #f2f2f2; background: #1c1c1c;
box-shadow: 0 0 10px #222;
} }
#main_content { #main_content {

BIN
assets/images/bg.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 172 KiB

2
assets/scripts/sidenavScript.js
View file

@ -10,7 +10,6 @@ var backButton = $("#back_button");
function openNav() { function openNav() {
sidenav.css("margin-left", "0"); sidenav.css("margin-left", "0");
sidenav.css("box-shadow", "5px 5px 10px #151515");
backButton.addClass("active_background"); backButton.addClass("active_background");
enableHamburger(); enableHamburger();
menuOpen = true; menuOpen = true;
@ -23,7 +22,6 @@ function openNav() {
*/ */
function closeNav() { function closeNav() {
sidenav.css("margin-left", "-250px"); sidenav.css("margin-left", "-250px");
sidenav.css("box-shadow", "none");
backButton.removeClass("active_background"); backButton.removeClass("active_background");
disableHamburger(); disableHamburger();
menuOpen = false; menuOpen = false;

2
index.php
View file

@ -9,7 +9,7 @@
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/sidenav.css"> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/sidenav.css">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/hamburger.css"> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/hamburger.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Rubik" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
</head> </head>
<body id="main"> <body id="main">
<div id="back_button" onclick="closeNav()"></div> <div id="back_button" onclick="closeNav()"></div>

2
infos.php
View file

@ -12,7 +12,7 @@ ob_start(); // Start reading html
<h1>Credits</h1> <h1>Credits</h1>
<p>Voici les différentes technologies et ressources que ce site utilise :</p> <p>Voici les différentes technologies et ressources que ce site utilise :</p>
<p><a href="https://icons8.com/">Icons8</a> | <a href="https://commons.wikimedia.org/wiki/File:Triton_(artist%27s_impression).jpg">Fond du site</a></p> <p><a href="https://icons8.com/">Icons8</a> | <a href="http://maxpixel.freegreatpicture.com/World-Earth-Rise-Sunrise-Space-Outer-Sun-Globe-1765027">Fond du site</a></p>
<a href="https://jquery.com/">JQuery</a> <a href="https://jquery.com/">JQuery</a>
<br> <br>
<a href="https://www.javascript.com/">JavaScript</a> <a href="https://www.javascript.com/">JavaScript</a>

10
template.php
View file

@ -11,7 +11,7 @@
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/planning_events.css"> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/planning_events.css">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/photos.css"> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/photos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Rubik" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
</head> </head>
<body id="main"> <body id="main">
<div id="back_button" onclick="closeNav()"></div> <div id="back_button" onclick="closeNav()"></div>
@ -27,20 +27,20 @@ include("includes/sidenav.html");
</header> </header>
</div> </div>
<div id="main_fading_top_edge"></div>
<div id="main_content_wrap" class="outer"> <div id="main_content_wrap" class="outer">
<section id="main_content" class="inner"> <section id="main_content" class="inner">
<?= $pageContent // Display content defined in calling file ?> <?= $pageContent // Display content defined in calling file ?>
</section> </section>
</div> </div>
<div id="main_fading_bottom_edge"></div>
<div id="footer_wrap" class="outer"> <div id="footer_wrap" class="outer">
<footer class="inner"> <footer class="inner">
<p class="copyright">Copyright © <p class="copyright">
<script type="text/javascript"> <script type="text/javascript">
var d = new Date(); var d = new Date();
document.write(d.getFullYear()) document.write("Copyright © " + d.getFullYear() + "Arnaud VERGNET")
</script> </script>
Arnaud VERGNET
</p> </p>
</footer> </footer>
</div> </div>