diff --git a/MachineASous.css b/MachineASous.css index 53db014..c7e589a 100644 --- a/MachineASous.css +++ b/MachineASous.css @@ -8,20 +8,74 @@ body background-attachment: fixed; } +header { + background-image: linear-gradient(to bottom, rgba(0,0,0,0.75) -10%,rgba(0,0,0,0) 100%); + text-align: center; + padding: 0.5rem 0 5rem; + font-size: 1.25rem; +} + +ul { + list-style: none; + margin: 0; + padding: 0; +} + +li { + display: inline-flex; +} + +.textTab { + font-family: 'firamonobold', cursive; + position: relative; + color: #fff; + font-size: 2rem; + padding-left: 150px; +} + +.Home { + position: relative; + padding: 1rem 0 0.5rem; + margin: 0 1.5rem; + color: white; + text-decoration: none; + text-transform: uppercase; +} +.Home::after { + content: ""; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%) scaleX(0); + transform-origin: 50% 50%; + width: 100%; + height: 1px; + background-color: rgba(255, 255, 255, 0.8); + transition: transform 250ms; +} +.Home:hover::after { + transform: translateX(-50%) scaleX(1); +} + +th, td { + border-radius: 20px; + border-color: rgb(65, 63, 66); +} + .Menu { + margin-top: -2%; + font-family: 'Lobster Two', cursive; + font-size: 3rem; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 1); text-align: center; color: rgb(110, 204, 175); } .presentation { - left: 500%; - border: 1px solid black; -} - -th, td { - border: 1px solid black; + margin-top: 4%; + margin-left: 5%; } .text @@ -32,8 +86,9 @@ th, td { font-size: 1.2em; } -.insta +.reseaux { + margin: 0 1.5rem; width: 50px; height: auto; } @@ -44,30 +99,138 @@ th, td { height: auto; } -.rouleau1 -{ - width: 500px; - height: auto; - font-size: 2em; - margin-left: 41%; - margin-top: 2%; - color: gold; +.content { + min-height: 100vh; + max-width: 28rem; + margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; } -.Nbr -{ - text-align: center; - padding-bottom: 5%; +.cardBox { + float: left; + font-size: 1.2em; + margin: 0 0 0 0.5%; + perspective: 800px; + transition: all 0.4s ease 0s; + width: 100%; } - -.banque -{ - text-align: center; - padding-bottom: 5%; +.cardBox:hover .card { + transform: rotateY(180deg); } - -.sous -{ +.card { + background: url(EV.jpg); + background-size: 100% 100%; + cursor: pointer; + height: 300px; + transform-style: preserve-3d; + transition: transform 0.5s ease 0s; + width: 100%; + border-radius: 10%; +} +.card p { + margin-bottom: 1.8em; +} +.card .front, +.card .back { + backface-visibility: hidden; + box-sizing: border-box; + color: white; + display: block; + font-size: 1.2em; + height: 100%; + padding: 0.8em 0.7em; + position: absolute; text-align: center; - padding-bottom: 5%; + width: 100%; + border-radius: 10%; +} +.card .front strong { + background: #fff; + border-radius: 100%; + color: #222; + font-size: 1.5em; + line-height: 30px; + padding: 0 7px 4px 6px; +} +.card .back { + transform: rotateY( 180deg); +} +.card .back a { + padding: 0.3em 0.5em; + background: #333; + color: #fff; + text-decoration: none; + border-radius: 1px; + font-size: 0.9em; + transition: all 0.2s ease 0s; +} +.card .back a:hover { + background: #fff; + color: #333; + text-shadow: 0 0 1px #333; +} +.cardBox:nth-child(1) .card .back { + background: #607d8b; +} +.cardBox:nth-child(2) .card .back { + background: #1c87c9; +} +.cardBox:nth-child(3) .card .back { + background: #ff6347; +} +.cardBox:nth-child(4) .card .back { + background: #8ebf42; +} +.cardBox:nth-child(2) .card { + -webkit-animation: giro 1.5s 1; + animation: giro 1.5s 1; +} +.cardBox:nth-child(3) .card { + -webkit-animation: giro 2s 1; + animation: giro 2s 1; +} +.cardBox:nth-child(4) .card { + -webkit-animation: giro 2.5s 1; + animation: giro 2.5s 1; +} +@-webkit-keyframes giro { + from { + transform: rotateY(180deg); + } + to { + transform: rotateY(0deg); + } +} +@keyframes giro { + from { + transform: rotateY(180deg); + } + to { + transform: rotateY(0deg); + } +} +@media screen and (max-width: 767px) { +.cardBox { + margin-left: 2.8%; + margin-top: 3%; + width: 46%; +} +.card { + height: 285px; +} +.cardBox:last-child { + margin-bottom: 3%; +} +} +@media screen and (max-width: 480px) { +.cardBox { + width: 94.5%; +} +.card { + height: 260px; +} } \ No newline at end of file diff --git a/MachineASous.html b/MachineASous.html index 703cb6b..ca43418 100644 --- a/MachineASous.html +++ b/MachineASous.html @@ -1,84 +1,89 @@ - + + + Unicron03 + -

Présentation

+
+
+ +
+
+ +

Présentation

+ - - - + + + - + - + -
+

+ Salut, je suis Enzo. +
+ Je suis un lycéen qui aime, +
+ programmer, +
+ et créer pleins de choses ! +

+
+ +
+

Content

+
+ - \ No newline at end of file + + + \ No newline at end of file diff --git a/MachineASous.jpg b/MachineASous.jpg new file mode 100644 index 0000000..82f418d Binary files /dev/null and b/MachineASous.jpg differ diff --git a/RushOfLands.jpg b/RushOfLands.jpg new file mode 100644 index 0000000..4f88e32 Binary files /dev/null and b/RushOfLands.jpg differ diff --git a/nouveau 2.css b/nouveau 2.css new file mode 100644 index 0000000..8047178 --- /dev/null +++ b/nouveau 2.css @@ -0,0 +1,390 @@ +body { + margin: 0; + font-size: 1.1em; + background: url(background.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; + background-attachment: fixed; +} + +.Menu +{ + margin-top: 0%; + font-family: 'Lobster Two', cursive; + font-size: 3rem; + text-shadow: 0px 1px 0px rgba(0, 0, 0, 1); + text-align: center; + color: rgb(110, 204, 175); +} + +.button { + font-family: 'Lobster Two', cursive; + font-size: 1.3rem; + margin-left: 2%; + position: relative; + display: inline-flex; + text-decoration: none; + color: #fff; + background-color: #76abe9; + padding-left: 2rem; + overflow: hidden; + z-index: 1; + align-items: center; + box-shadow: 0px 3px 4px -4px rgba(0, 0, 0, 0.75); +} +.button::before { + content: ""; + position: absolute; + left: 0; + top: 0; + transform: scaleX(0); + transform-origin: 0 50%; + width: 100%; + height: 100%; + background-color: #4A90E2; + z-index: -1; + transition: transform 750ms; +} +.button span { + display: flex; + align-items: center; + justify-content: center; + margin-left: 2rem; + padding: 1rem; + overflow: hidden; + background-color: #4A90E2; +} +.button svg { + max-width: 20px; + width: 100%; + height: auto; + max-height: 18px; + fill: white; +} +.button:hover::before { + transform: scaleX(1); +} +.button:hover svg { + -webkit-animation: moveArrow 750ms; + animation: moveArrow 750ms; +} + +@-webkit-keyframes moveArrow { + 0% { + transform: translateX(0px); + } + 49% { + transform: translateX(50px); + } + 50% { + transform: translateX(-50px); + } + 100% { + transform: translateX(0px); + } +} + +@keyframes moveArrow { + 0% { + transform: translateX(0px); + } + 49% { + transform: translateX(50px); + } + 50% { + transform: translateX(-50px); + } + 100% { + transform: translateX(0px); + } +} + + +#SkillBox { + font-size: 20px; + font-family: 'Indie Flower', cursive; + width: 95%; + height: auto; + margin: 40px auto; + background-color: #607d8b; + //border: 1px solid #cdcdcd; + padding: 10px; + border-radius:20px; + -o-border-radius:20px; + -webkit-border-radius:20px; + -ms-border-radius:20px; + -moz-border-radius:20px; +} +#SkillBox img { + width: 20%; + height: 10%; + margin: auto 35%; + padding: 10px; +} +.SkillBar { + width: 90%; + height: 50px; + position: relative; + background: rgba(17, 17, 17, .3); + margin: 20px auto; +} +#Skill-HTML { + width: 75%; + animation: Animate-HTML 4s; + -webkit-animation: Animate-HTML 4s; + -moz-animation: Animate-HTML 4s; + -o-animation: Animate-HTML 4s; + height: 50px; + position: absolute; + background-color: #ea8564; +} +@keyframes Animate-HTML { + from { + width: 10px; +} +to { + width: 75%} +}@-webkit-keyframes Animate-HTML { + from { + width: 10px; +} +to { + width: 75%} +}@-moz-keyframes Animate-HTML { + from { + width: 10px; +} +to { + width: 75%} +}@-o-keyframes Animate-HTML { + from { + width: 10px; +} +to { + width: 75%} +}#Skill-CSS { + animation: Animate-CSS 5s; + -webkit-animation: Animate-CSS 5s; + -moz-animation: Animate-CSS 5s; + -o-animation: Animate-CSS 5s; + width: 65%; + height: 50px; + position: absolute; + background-color: #55a69f; +} +@keyframes Animate-CSS { + from { + width: 10px; +} +to { + width: 65%} +}@-webkit-keyframes Animate-CSS { + from { + width: 10px; +} +to { + width: 65%} +}@-moz-keyframes Animate-CSS { + from { + width: 10px; +} +to { + width: 65%} +}@-o-keyframes Animate-CSS { + from { + width: 10px; +} +to { + width: 65%} +}#Skill-Python { + animation: Animate-Python 5s; + -webkit-animation: Animate-Python 5s; + -moz-animation: Animate-Python 5s; + -o-animation: Animate-Python 5s; + width: 100%; + height: 50px; + position: absolute; + background-color: #99856d; +} +@keyframes Animate-Python { + from { + width: 10px; +} +to { + width: 100%} +}@-webkit-keyframes Animate-Python { + from { + width: 10px; +} +to { + width: 100%} +}@-moz-keyframes Animate-Python { + from { + width: 10px; +} +to { + width: 100%} +}@-o-keyframes Animate-Phyton { + from { + width: 10px; +} +to { + width: 100%} +}#Skill-JS { + animation: Animate-JS 4s; + -webkit-animation: Animate-JS 4s; + -moz-animation: Animate-JS 4s; + -o-animation: Animate-JS 4s; + width: 25%; + height: 50px; + position: absolute; + background-color: #c44e45; +} +@keyframes Animate-JS { + from { + width: 10px; +} +to { + width: 25%} +}@-webkit-keyframes Animate-JS { + from { + width: 10px; +} +to { + width: 25%} +}@-moz-keyframes Animate-JS { + from { + width: 10px; +} +to { + width: 25%} +}@-o-keyframes Animate-JS { + from { + width: 10px; +} +to { + width: 25%} +}#Skill-Lua { + animation: Animate-Lua 4s; + -webkit-animation: Animate-Lua 4s; + -moz-animation: Animate-Lua 4s; + -o-animation: Animate-Lua 4s; + width: 90%; + height: 50px; + position: absolute; + background-color: #5aa669; +} +@keyframes Animate-Lua { + from { + width: 10px; +} +to { + width: 90%} +}@-webkit-keyframes Animate-Lua { + from { + width: 10px; +} +to { + width: 90%} +}@-moz-keyframes Animate-Lua { + from { + width: 10px; +} +to { + width: 90%} +}@-o-keyframes Animate-Lua { + from { + width: 10px; +} +to { + width: 90%} +}#Skill-PHP { + animation: Animate-PHP 4s; + -webkit-animation: Animate-PHP 4s; + -moz-animation: Animate-PHP 4s; + -o-animation: Animate-PHP 4s; + width: 50%; + height: 50px; + position: absolute; + background-color: #5A69A6; +} +@keyframes Animate-PHP { + from { + width: 10px; +} +to { + width: 50%} +}@-webkit-keyframes Animate-PHP { + from { + width: 10px; +} +to { + width: 50%} +}@-moz-keyframes Animate-PHP { + from { + width: 10px; +} +to { + width: 50%} +}@-o-keyframes Animate-PHP { + from { + width: 10px; +} +to { + width: 50%} +}#Skill-SQL { + animation: Animate-SQL 4s; + -webkit-animation: Animate-SQL 4s; + -moz-animation: Animate-SQL 4s; + -o-animation: Animate-SQL 4s; + width: 85%; + height: 50px; + position: absolute; + background-color: #23b1db; +} +@keyframes Animate-SQL { + from { + width: 10px; +} +to { + width: 85%} +}@-webkit-keyframes Animate-SQL { + from { + width: 10px; +} +to { + width: 85%} +}@-moz-keyframes Animate-SQL { + from { + width: 10px; +} +to { + width: 85%} +}@-o-keyframes Animate-SQL { + from { + width: 10px; +} +to { + width: 85%} +}.Skill-Area { + z-index: 1; + float: left; + //position: absolute; + margin-top: 15px; + margin-left: 15px; + text-shadow: none; + color: #fff; + //font-family: Lato-Regular, sans-serif; + font-size: 18px; +} +.PercentText { + z-index: 3; + position: relative; + padding-right: 15px; + margin-top: 15px; + float: right; + text-shadow: none; + color: #fff; + //font-family: Lato-Regular, sans-serif; + font-size: 18px; +} \ No newline at end of file diff --git a/nouveau 2.html b/nouveau 2.html new file mode 100644 index 0000000..b4e4a9b --- /dev/null +++ b/nouveau 2.html @@ -0,0 +1,85 @@ + + + + Unicron03 + + + + + + + Back + + + + + + + +
+
+

My Skills

+ + + + + + + + + + + Skill +
+
+ HTML + 75% +
+
+ +
+
+ CSS + 65% +
+
+ +
+
+ Python + 100% +
+
+ +
+
+ Javascript + 25% +
+
+ +
+
+ Lua + 90% +
+
+ +
+
+ PHP + 50% +
+
+ +
+
+ SQL + 85% +
+
+ +
+
+ + \ No newline at end of file diff --git a/projet.css b/projet.css new file mode 100644 index 0000000..e23cb3e --- /dev/null +++ b/projet.css @@ -0,0 +1,204 @@ +@-webkit-keyframes up-in { + from { + opacity: 0; + bottom: 0%; + } + to { + opacity: 1; + bottom: 50%; + } +} +@keyframes up-in { + from { + opacity: 0; + bottom: 0%; + } + to { + opacity: 1; + bottom: 50%; + } +} +.fill { + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + background-attachment: fixed; +} +body, +html { + height: 100%; + min-width: 100%; + min-height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + font-family: 'Lobster Two', cursive; +} +.flex-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; + width: 100%; + min-height: 100%; + height: 100%; + overflow: auto; + background-color: white; + position: relative; +} +.container.no-scroll { + overflow: hidden; +} +.page { + width: 100%; + padding: 10px; + background: url(background.jpg); + background-repeat: no-repeat; + background-size: 100% 100%; + background-attachment: fixed; +} +@media (max-width: 600px) { + .page { + width: 90%; + } +} +.grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} +.grid .grid-item { + width: 33%; + position: relative; +} +.grid .grid-item:after { + content: ''; + display: block; + margin-top: 100%; +} +@media (max-width: 600px) { + .grid .grid-item { + width: 50%; + } +} +.box { + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; + background-color: white; + background-size: cover; + background-repeat: no-repeat; + background-position: center top; + overflow: hidden; + cursor: pointer; +} +.box img { + width: 100%; + transition: transform 0.6s ease; +} +.box.selected { + opacity: 0; +} +.box.on-top { + cursor: default; + transition: all 0.4s ease; + box-shadow: 2px 2px 19px -2px rgba(0, 0, 0, 0.44); +} +.box.image-out img { + transform: translateY(-100%); +} +.content { + position: absolute; + padding: 20px 40px; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 0; + transition: opacity 0.5s ease; +} +.show .content { + opacity: 1; +} +@media (max-width: 600px) { + .content { + padding: 10px 20px; + } +} +.scroller { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow-y: auto; +} +.scroller h1 { + color: white; + width: 100%; + margin-bottom: 30px; + position: absolute; + bottom: 50%; + text-align: center; + -webkit-animation: up-in 1s ease; + animation: up-in 1s ease; +} +.top-up.ng-hide-add, +.top-up.ng-hide-remove { + transition: 0s ease top; +} +.top-up.ng-hide-add-active, +.top-up.ng-hide-remove-active { + transition: 0.6s ease top; +} +.top-up.ng-hide-add { + top: 0; +} +.top-up.ng-hide-add.ng-hide-add-active { + top: 100%; +} +.top-up.ng-hide-remove { + top: 100%; +} +.top-up.ng-hide-remove.ng-hide-remove-active { + top: 0; +} +.fullscreen-background { + overflow-y: auto; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: #333; + transition: top 0.5s ease; + background-repeat: no-repeat; + background-position: center center; + background-size: cover; + background-attachment: fixed; +} +.fullscreen-background.show { + top: 0; +} +.close-button { + position: fixed; + top: 20px; + right: 20px; + color: white; + cursor: pointer; +} +.close-button i { + font-size: 35px; +} +.close-button:hover { + color: #ddd; +} \ No newline at end of file diff --git a/projet.html b/projet.html new file mode 100644 index 0000000..af1d293 --- /dev/null +++ b/projet.html @@ -0,0 +1,151 @@ + + + + + Unicron03 + + + + + + + + + + +
+
+
+
+ +
+
+
+
+
+ + Back + +

{{selected[0].item.name}}

+
+ +
+

Voiture autonome

+

La voiture est composé d'une pyboard, de divers capteurs, de leds, d'un servo pour la direction et deux moteurs avec réducteur.

+

Elle se déplace de façon autonome en évitant les obstacles et en s'adaptant au milieu dans lequel elle évolue.

+

+ Elle intégère aussi plusieurs contraintes : +
+ • Si un obstacle est détecté la voiture ralenti de plus en plus jusqu’à l’arrêt complet; +
+ • Si la voiture détecte une montée, elle accélére, si elle détecte une descente elle ralenti (avec allumage de deux leds différentes sur la carte pyboard); +
+ • Si la voiture est dans le noir, une led s'allume; +
+ • Si on appuie sur le bouton USR de la carte, le programme se mets en pause jusqu’à que le bouton soit rappuyer; +
+ • Si la voiture est bloqué par un certain obstacle qu'elle ne détecte pas, elle repart automatiquement. +

+
+
+ +
+
+ + + diff --git a/voiture.png b/voiture.png new file mode 100644 index 0000000..026bbb4 Binary files /dev/null and b/voiture.png differ