generated from Templates_CodeFirst/templateHtmlCss
Compare commits
No commits in common. 'ff48438ea57dc5d1da7744e8a0ffa039d53a678b' and '0d19a50ee170eabb740e6c1136be43fcaf168a79' have entirely different histories.
ff48438ea5
...
0d19a50ee1
@ -0,0 +1,18 @@
|
||||
body {
|
||||
background: linear-gradient(-45deg, #580101, #55133c, #0c2852, #021479);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient 25s ease infinite;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato');
|
||||
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, a, li {
|
||||
font-family: 'Barlow', sans-serif;
|
||||
font-weight: 200;
|
||||
text-decoration: none;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
section a:hover {
|
||||
font-weight: 400 ;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: fit-content;
|
||||
margin-top: 0;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 3px solid rgba(128, 128, 128, 0.5);
|
||||
border-right: 3px solid rgba(128, 128, 128, 0.5);
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 2.5vw;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border-top: 0px solid gray;
|
||||
border-bottom: 1px solid gray;
|
||||
border-left: 0px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border-radius: 30px;
|
||||
transition-property: border-left, border-right, border-top, border-bottom, background-color;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
section:hover {
|
||||
border-top: 0px solid lightgray;
|
||||
border-bottom: 1px solid lightgray;
|
||||
border-left: 0px solid lightgray;
|
||||
border-right: 1px solid lightgray;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/*Barre de navigation*/
|
||||
|
||||
.navMenu {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
list-style-type: none;
|
||||
justify-content: space-evenly;
|
||||
height: 70px;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.navMenu a {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
margin: 0 10px;
|
||||
color: #ccc;
|
||||
font-family: 'Lato', sans-serif;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navMenu a:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #FFF;
|
||||
visibility: hidden;
|
||||
transform: scaleX(0);
|
||||
transition: all 0.28s ease-in-out;
|
||||
}
|
||||
|
||||
.navMenu a:hover:before {
|
||||
visibility: visible;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.layout p, .layout a, .layout li {
|
||||
font-size: large;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: #FAFFFF;
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.layout a {
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="stylesheet" href="loading.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="common.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="background.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="contact.css" type="text/css"/>
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<title>Portfolio de Nicolas BLONDEAU</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--Loading animation-->
|
||||
<div class="loader loader-active">
|
||||
<div class="loading">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--The NavBar-->
|
||||
<nav class="navMenu">
|
||||
<a href="index.html">A propos</a>
|
||||
<a href="index.html">Formation</a>
|
||||
<a href="index.html">Compétences</a>
|
||||
<a href="divers.html">Divers</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="credits.html">Crédits</a>
|
||||
</nav>
|
||||
|
||||
<div class="layout">
|
||||
<section>
|
||||
<h1 class="title">Contactez moi ici :</h1>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="links">
|
||||
<img src="Images/icons/linkedin.png" width="40px" alt="LinkedIn Icon"/>
|
||||
<a href="https://www.linkedin.com/in/nicolas-blondeau-59b88226b/" target="_blank">Mon profil LinkedIn.</a>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="links">
|
||||
<img src="Images/icons/mail.png" width="40px" alt="Mail Icon"/>
|
||||
<a href="mailto:Nicolas.BLONDEAU@etu.uca.fr" target="_blank">Nicolas.BLONDEAU@etu.uca.fr</a>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="links">
|
||||
<img src="Images/icons/github.png" width="40px" alt="GitHub Icon"/>
|
||||
<a href="https://github.com/ImNicolasTheDev" target="_blank">Mon profil GitHub.</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!--When the whole page is loaded, it removes the class "loader-active"
|
||||
from the loader, so it disappears (CSS in loader : display: none;)-->
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
document.querySelector(".loader").classList.remove("loader-active");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,6 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 85vh;
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="stylesheet" href="loading.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="common.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="background.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="credits.css" type="text/css"/>
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<title>Portfolio de Nicolas BLONDEAU</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--Loading animation-->
|
||||
<div class="loader loader-active">
|
||||
<div class="loading">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--The NavBar-->
|
||||
<nav class="navMenu">
|
||||
<a href="index.html">A propos</a>
|
||||
<a href="index.html">Formation</a>
|
||||
<a href="index.html">Compétences</a>
|
||||
<a href="divers.html">Divers</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="credits.html">Crédits</a>
|
||||
</nav>
|
||||
|
||||
<div class="layout">
|
||||
<section>
|
||||
<h1 class="title">Remerciements à :</h1>
|
||||
<br/><br/>
|
||||
<h2><b>Manuel Pinto</b> pour l'idée du fondu gradient à l'arrière plan.</h2>
|
||||
<p>Retrouvez le ici : <a href="https://codepen.io/P1N2O" target="_blank">CodePen</a></p>
|
||||
<br/>
|
||||
<h2><b>Andreas Storm</b> pour l'idée de l'animation lors du chargement.</h2>
|
||||
<p>Retrouvez le ici : <a href="https://codepen.io/avstorm" target="_blank">CodePen</a></p>
|
||||
<br/>
|
||||
<h2><b>Freepik</b> pour la collection d'images fournie.</h2>
|
||||
<p>Retrouvez les ici : <a href="https://www.freepik.com/free-vector/hand-drawn-one-line-art-illustration_22754372.htm">Freepik</a></p>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!--When the whole page is loaded, it removes the class "loader-active"
|
||||
from the loader, so it disappears (CSS in loader : display: none;)-->
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
document.querySelector(".loader").classList.remove("loader-active");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,13 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin: 8%
|
||||
}
|
||||
|
||||
.layoutImg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin: 2%
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="stylesheet" href="loading.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="common.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="background.css" type="text/css"/>
|
||||
<link rel="stylesheet" href="divers.css" type="text/css"/>
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<title>Portfolio de Nicolas BLONDEAU</title>
|
||||
</head>
|
||||
<body>
|
||||
<!--Loading animation-->
|
||||
<div class="loader loader-active">
|
||||
<div class="loading">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!--The NavBar-->
|
||||
<nav class="navMenu">
|
||||
<a href="index.html">A propos</a>
|
||||
<a href="index.html">Formation</a>
|
||||
<a href="index.html">Compétences</a>
|
||||
<a href="divers.html">Divers</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="credits.html">Crédits</a>
|
||||
</nav>
|
||||
|
||||
<div class="layout">
|
||||
<section>
|
||||
<h1 class="title">Voici quelques exemples de projets que j'ai réalisé :</h1>
|
||||
<br/>
|
||||
<br/>
|
||||
<h2><u>Un site web responsive sur la thématique du skate :</u> <a href="https://github.com/ImNicolasTheDev/SkateUnity.github.io" target="_blank">Lien GitHub.</a></h2>
|
||||
<br/>
|
||||
<div class="layoutImg">
|
||||
<img src="Images/skateUnity1.png" alt="SkateUnity" width="75%" height="auto"/>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="layoutImg">
|
||||
<img src="Images/skateUnity2.png" alt="SkateUnity" width="55%" height="auto"/>
|
||||
<img src="Images/skateUnity3.png" alt="SkateUnity" width="40%" height="auto"/>
|
||||
</div>
|
||||
<br/>
|
||||
<h2><u>Une multitude de compositions,</u> notamment de la MAO (Musique Assistée par Ordinateur) sur le logiciel <b>Open-Source LMMS :</b></h2>
|
||||
<div class="layoutImg">
|
||||
<img src="Images/lmmsExample.png" alt="SkateUnity" width="70%" height="auto"/>
|
||||
</div>
|
||||
<br/>
|
||||
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1438360795&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/shysudo" title="Shysudo" target="_blank" style="color: #cccccc; text-decoration: none;">Shysudo</a> · <a href="https://soundcloud.com/shysudo/harmony" title="Harmony - Part 2" target="_blank" style="color: #cccccc; text-decoration: none;">Harmony - Part 2</a></div>
|
||||
<br/>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!--When the whole page is loaded, it removes the class "loader-active"
|
||||
from the loader, so it disappears (CSS in loader : display: none;)-->
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
document.querySelector(".loader").classList.remove("loader-active");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 235 KiB |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 211 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 357 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 548 KiB |
@ -0,0 +1,74 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
padding-left: 5vw;
|
||||
padding-right: 5vw;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.sectionImage {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 100px;
|
||||
margin-bottom: 50px;
|
||||
margin-left: 4%;
|
||||
margin-right: 4%;
|
||||
}
|
||||
|
||||
.sectionImage img {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/*DEBUT Espace travaux -> Exceptionnel*/
|
||||
#travaux {
|
||||
z-index: -5;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
right: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
#travaux section {
|
||||
background-color: rgba(211, 211, 211, 0.225);
|
||||
}
|
||||
/*FIN Espace travaux*/
|
||||
|
||||
.headTitle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80vh;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-family: monospace;
|
||||
text-align: end;
|
||||
width: max-content;
|
||||
border-bottom: none;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
#titleName {
|
||||
font-size: 120px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Gambetta', serif;
|
||||
letter-spacing: -3px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.8rem;
|
||||
color: PaleGoldenRod;
|
||||
outline: none;
|
||||
text-align: center;
|
||||
animation: anim 8s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
50% {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,121 @@
|
||||
.loadingbody {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.loader{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.loader-active{
|
||||
display: flex;
|
||||
}
|
||||
.loader::after{
|
||||
content: "";
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -30px 0 0 -30px;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.loading div {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
float: left;
|
||||
margin-bottom: 12px;
|
||||
animation: scaleDot 2s ease infinite;
|
||||
}
|
||||
.loading div:not(:nth-child(4n+4)) {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.loading div:nth-child(1) {
|
||||
animation-delay: 0;
|
||||
}
|
||||
.loading div:nth-child(2),
|
||||
.loading div:nth-child(5) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.loading div:nth-child(3),
|
||||
.loading div:nth-child(6),
|
||||
.loading div:nth-child(9) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.loading div:nth-child(4),
|
||||
.loading div:nth-child(7),
|
||||
.loading div:nth-child(10),
|
||||
.loading div:nth-child(13) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
.loading div:nth-child(8),
|
||||
.loading div:nth-child(11),
|
||||
.loading div:nth-child(14) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
.loading div:nth-child(12),
|
||||
.loading div:nth-child(15) {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.loading div:nth-child(16) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
@-moz-keyframes scaleDot {
|
||||
40% {
|
||||
transform: scale(1.5) translate(-2px, -2px);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes scaleDot {
|
||||
40% {
|
||||
transform: scale(1.5) translate(-2px, -2px);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-o-keyframes scaleDot {
|
||||
40% {
|
||||
transform: scale(1.5) translate(-2px, -2px);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes scaleDot {
|
||||
40% {
|
||||
transform: scale(1.5) translate(-2px, -2px);
|
||||
}
|
||||
80% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
body {
|
||||
padding-left: 11em;
|
||||
font-family: Georgia, 'Georgia', "Times New Roman",
|
||||
Times, serif;
|
||||
color: darksalmon;
|
||||
background-color: rgb(39, 39, 84) }
|
||||
ul.navbar {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
left: 1em;
|
||||
width: 9em }
|
||||
h1 {
|
||||
font-family: Helvetica, Geneva, Arial,
|
||||
SunSans-Regular, sans-serif }
|
||||
ul.navbar li {
|
||||
background: white;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
border-right: 1em solid darksalmon }
|
||||
ul.navbar a {
|
||||
text-decoration: none }
|
||||
a:link {
|
||||
color: blue }
|
||||
a:visited {
|
||||
color: darkblue }
|
||||
address {
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
border-top: thin dotted }
|
||||
Loading…
Reference in new issue