Partage

media queries pour mobile

10 décembre 2018 à 14:13:02

Bonjour,

je viens vers vous pour un problème de responsivité xD.

Mon site est en grande partie composé de conteneurs flex et sous-conteneurs. Les contenant étant en row et sous-contenant en column.

@media only screen and (max-width: 625px) {
	.flex-container {
		display:block;
	}
}

Pour l'instant je display simplement ces conteneurs en block afin qu'ils apparaissent les uns en dessous des autres cependant, ce n'est pas le cas pour tous.. Certains se placent par-dessus d'autres.. :/

De plus, mon image de fond appliquée sur le body (background: url(...)) ne s'affichent pas sur téléphone alors que sur l'inspecteur en mode téléphone, oui. Si vous avez des idées de solutions pour ce problème, je suis preneur !

Merci beaucoup et bonne après-midi à vous !

MTK-MTK

10 décembre 2018 à 14:40:06

Bonjour,

Pour que l'on puisse t'aider il faudrait mettre le code dans sa totalité. Ce sera beaucoup plus simple.

Bonne journée.

kiwai

10 décembre 2018 à 14:55:09

MTK-MTK a écrit:

Bonjour,

Pour que l'on puisse t'aider il faudrait mettre le code dans sa totalité. Ce sera beaucoup plus simple.

Bonne journée.

C'est trèèèèèès long.. Voici :

HTML :

<!-- portfolio (projet perso), work experiences, references, personal skills, languages, education (+récent au plus ancien)-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Portfolio of">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
		<link rel="icon" href="favicon.ico">
	</head>
	<body id="body">
		<ul id="menu">
			<li>
				<a href="#home">
					Home
				</a>
			</li>
			<li>
				<a href="#skills">
					Skills
				</a>
			</li>
			<li>
				<a href="#workExperiences">
					Work Experiences
				</a>
			</li>
			<li>
				<a href="#portfolio">
					Portfolio
				</a>
			</li>
			<li>
				<a href="#education">
					Education
				</a>
			</li>
			<li>
				<a href="#references">
					References
				</a>
			</li>
		</ul>
		<section id="home">
			<div class="flex-container">
				<div class="flex" id="me">
					<h2 id="meTitle"></h2><br/>
					<div id="description" class="hidden">
						I am a second year <strong>IT student</strong>, fond of <strong>IT security</strong> (if possible, I would love to work at the DGSI)<br/>
						& <strong>web development</strong> (design & programming). I keep abreast of <strong>new technologies</strong><br/> in order to give the <strong>best of myself</strong> to my future clients. <strong>Science</strong> is also a passion of mine.<br/><br/><br/>
						<div>
							<a href="files/CV_English" download="English Resume">ENGLISH RESUME</a>
							<a href="files/CV" download="French Resume">FRENCH RESUME</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section id="skills">
			<div class="flex-container">
				<div class="flex backgroundBorder">
					<h1 class="skillsTitle">expertise</h1>
					<hr class="hrSkills">
					<h3 class="skillsCategory hidden"><strong>Web</strong></h3>
					<h4>Tags are my favorites - HTML (Use CTRL+U to realize this)</h4>
					<div class="progressBar">
						<div id="%95" class="percent">
							
						</div>
					</div>
					<h4>Classes for object-oriented CSS (& IDs ( ͡° ͜ʖ ͡°))</h4>
					<div class="progressBar">
						<div id="%90" class="percent">
							
						</div>
					</div>
					<h4>Remaking sort functions using PHP algorithmic</h4>
					<div class="progressBar">
						<div id="%80" class="percent">
							
						</div>
					</div>
					<h4>JavaScript & jQuery for smooth animations (as you can see :p)</h4>
					<div class="progressBar">
						<div id="%85" class="percent">
							
						</div>
					</div>
					<h3 class="skillsCategory hidden"><strong>Software programming</strong></h3>
					<h4>C# with binding & responsive interface for the sake of the teachers</h4>
					<div class="progressBar">
						<div id="%75" class="percent">
							
						</div>
					</div>
					<h4>Java to manage memory</h4>
					<div class="progressBar">
						<div id="%75" class="percent">
							
						</div>
					</div>
					<h4>C/C++ because pointers are awesome !</h4>
					<div class="progressBar">
						<div id="%70" class="percent">
							
						</div>
					</div>
					<h3 class="skillsCategory hidden"><strong>Databases</strong></h3>
					<h4>SQL/PLSQL (Oracle, PostgreSQL) - Just not funny</h4>
					<div class="progressBar">
						<div id="%80" class="percent">
							
						</div>
					</div>
				</div>
				<div class="flex backgroundBorder">
					<h1 class="skillsTitle">know-how-to-be</h1>
					<hr class="hrSkills">
					<p id="personalSkills">
						<span class="skills hidden">Reliable ● </span>
						<span class="skills hidden">Empathetic ● </span>
						<span class="skills hidden">Persistant ● </span>
						<span class="skills hidden">Has team spirit</span>
					</p>
					<h1 class="skillsTitle" id="languages">languages</h1>
					<hr class="hrSkills">
					<p>
						<span class="skills languages hidden">French - NATIVE (Projet Voltaire : 750/1000 [=Business level])</span><hr id="hrLanguage1" class="hrLanguages" size=30vh/>
					</p>
					<p>
						<span class="skills languages hidden">English - UPPER INTERMEDIATE (B2) (TOEIC : Soon)</span><hr id="hrLanguage2" class="hrLanguages" size=30vh/>
					</p>
					<p>
						<span class="skills languages hidden">Spanish - LOWER INTERMEDIATE (B1)</span>
					</p>
				</div>
			</div>
		</section>
		<section id="workExperiences">
			<div class="flex-container">
				<div class="flex workExperiences" id="negativeMargin1">
					<h1>Vice Treasurer</h1>
					<p>
						From February 2018 to February 2019, I was doing
						the accounting of the student office(treasury), practiced
						my communication skills and improved my economic knowledge.
					</p>
					<hr class="hrWorkExperiences hidden">
				</div>
				<hr id="workSplitter">
				<div class="flex workExperiences" id="negativeMargin2">
					<h1>Tutored Project</h1>
					<p>
						From May 2018 to March 2019, me and my project team
						developed android application for the "Château de Sassenage"
						in order to make it more attractive.
					</p>
					<hr class="hrWorkExperiences hidden">
				</div>
			</div>
		</section>
		<section id="portfolio">
			<div class="flex-container">
				<div class="flex backgroundBorder2">
					<h1>PacMaze</h1>
					<br/>
					<h4>We made a video games based on a maze and PAC-MAN
						using Unity 5, the goal was to escape the maze with a
						key that we previously found and use it to open the door
						of the maze. We tried to make this game a potential
						multiplayer game with 4 PAC-MAN & 1 ghost who had to
						hunt the 4 survivors.
					</h4>
				</div>
				<div class="flex backgroundBorder2">
					<h1>Coded 2 websites</h1>
					<br/>
					<h4>
						One for alps environment (wildlife & flora)
						in order to protect it. The other one is a tripadvisor-like made
						from scratch and using "Scrum" method.
					</h4>
				</div>
				<div class="flex backgroundBorder2">
					<h1>AmphiQuizz</h1>
					<br/>
					<h4>
						We developed an application in pairwork using C#.
						Its goal was to put a mark to a student, selecting
						a teacher who led the exam in order to say if he
						answered correctly or not or if he was missing.
						All of this linked to a database.
					</h4>
					<!-- <img src="img/code.png" style="border:10px solid rgba(255,255,255,0.2"> -->
				</div>
			</div>
		</section>
		<section id="education">
			<div class="flex-container">
				<div class="flex">
					<div class="backgroundBorder2 education">
						<strong>DUT Informatique</strong><br/><hr/><br/>
						(2-year university diploma in computer science)<br/>
						University of Savoy - IUT Annecy-le-Vieux (74940), France
						<hr class="hrEducation"/>
						<strong>September 2017 - June 2019</strong>
						<hr class="hrEducation"/>
						<h2>Keywords</h2>
						<ul>
							<li>
								Algorithmic
							</li>
							<li>
								Programming
							</li>
							<li>
								Operating System (OS)
							</li>
							<li>
								Networks
							</li>
							<li>
								Software Engineering
							</li>
							<li>
								Mathematics
							</li>
						</ul>
					</div>
				</div>
				<div class="flex">
					<div class="backgroundBorder2 education">
						<strong>French baccalaureate STI2D</strong><br/><hr/><br/>
						(High school diploma specialized in Science and Technologies of the Industry and the Sustainable Development) with honors<br/>
						Louis Lachenal High school – Argonay (74370), France
						<hr class="hrEducation"/>
						<strong>June 2017</strong>
						<hr class="hrEducation"/>
						<h2>Keywords</h2>
						<ul>
							<li>
								Algorithmic
							</li>
							<li>
								Programming
							</li>
							<li>
								Mechanics/Physics/Chemistry
							</li>
							<li>
								Electricity
							</li>
							<li>
								Electronics
							</li>
							<li>
								Architecture/Design
							</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<section id="references">
			<div class="flex-container">
				<div class="flex">
					<div id="referencesBorders">
						<h1>
							REFERENCES
						</h1>
						<div>
							<p>
								<h3>
									<i class="fas fa-user-alt"></i> Stéphanie BOUCHON
								</h3>
								Professional English & communication teacher at IUT Annecy - USMB<br/>
								<i class="fas fa-envelope"></i> stephanie.bouchon@univ-smb.fr<br/>
								+33 (0)4 50 09 22 22
							</p>
						</div>
						<div>
							<p>
								<h3>
									<i class="fas fa-user-alt"></i> Luc DAMAS 
								</h3>
								University lecturer at USMB, OOP & Web teacher (Associate teacher)<br/>
								<i class="fas fa-envelope"></i> luc.damas@univ-smb.fr<br/>
								+33 (0)4 50 09 22 22	
							</p>
						</div>
					</div>
				</div>
				<div class="flex">
					<div id="socialNetworksBorders">
						<div id="socialNetworks">
							<a href="https://www.facebook.com/" target="blank">
								<i class="fab fa-facebook-square"></i>
							</a>
							<a href="https://www.linkedin.com/in//" target="blank">
								<i class="fab fa-linkedin"></i>
							</a>
						</div>
					<!-- <img id="profileImage" src="img/killian.jpg" class="hidden"> -->
						<p id="copyright">
							CC BY NC SA - 2018 -
							<br/>
							<i class="fas fa-envelope"></i>
							<br/>
							
						</p>
					</div>
					<!--
						idée : transition networks vers le haut
						et copyright vers le bas + truc qui pop entre les 2
					-->
				</div>
			</div>
		</section>
		<script type="text/javascript" src="js/main.js"></script>
	</body>
</html>

CSS :

/*
Attribut filter css : https://developer.mozilla.org/fr/docs/Web/CSS/filter
Positionner un élément dans un autre : http://howtocenterincss.com/
Créer des gradients en css : https://mycolor.space/gradient
Ajouts d'icones à l'aide de la base i et de classe et + : https://fontawesome.com/start */

* {
	margin: 0px;
	padding: 0px;
	font-family: "raleway";
}

html {
	scroll-behavior: smooth;
}

@font-face {
	font-family:"raleway";
	src:url('../fonts/Raleway-Regular.ttf');
}

@font-face {
	font-family:"iraleway";
	src:url('../fonts/Raleway-Italic.ttf');
}

::-webkit-scrollbar { 
    display: none; 
}

section {
	height:100vh;
}

#meTitle {
	cursor:pointer;
	font-size:3.3em;
	animation-name:zoomIn;
	animation-duration:1.5s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}

#description {
	font-size:1.7em;
}

@keyframes zoomIn {
	from {
		font-size:3em;
	} to {
		font-size:3.4em;
	}
}

.flex-container {
	display:flex;
	flex-direction:row;
	align-items:center;
	min-height:100vh;
	/*@media screen and (max-width: 600px) {
    	& {
     		flex-wrap: wrap;
    	}
  	}*/
}

.flex-column-container {
	display:flex;
	flex-direction:column;
	align-items: center;

}

.flex h2, .flex h1, .flex div, .flex h3 {
	color:white;
}

#titleSkills {
	color:black;
	background-color: white;
	transform:rotate(-90deg);
	font-size:3em;
	border:3px solid white;
}

.flex {
	display:flex;
	flex:1;
	align-items:center;
	justify-content:center;
	text-align:center;
	flex-direction:column;
}

body {
	background: transparent url("../img/bg11.jpeg") top center no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

#menu {
	position:fixed;
	right:0px;
	list-style-type: none;
}

ul#menu > li {
	float:left;
}

ul#menu > li > a {
	font-size: 1.5em;
}

a {
	padding:0.5vw;
	float:left;
	display:block;
	text-decoration: none;
	color: white;
	border-right:white solid 0px;
	transition: border-right 0.25s ease-in-out;
}

ul#menu > li > a:hover {
	border-right:white solid 5px;
}

#description > div {
	display:flex;
	margin: 0 auto;
    width: 50vw;
    justify-content:center;
}

#description > div > a {
	display:flex;
	background-color:black;
	/*color:black;*/
	padding: 1vh 2vw;
	margin:0 2vw;
	border:1px solid black;
	transition:all 1s ease-in-out;
}

#description > div > a:hover {
	background-color:rgba(255,255,255,0);
	border:1px solid white;
	/*color:black;*/
}

#titleClickMe {
	font-size:0.8em;
	color:white;
}


/*#form-container {
	padding:20px;
	border: rgba(255,255,255,0.5) solid 10px;
	border-radius:30px;
	background-color: rgba(255,255,255,0.5);
}

label {
	display:inline-block;
	text-align:left;
	font-size: 1.5em;
	color:black;
	font-weight:bold;
}

.widthform {
	width:200px;
	height:50px;
}*/

.progressBar {
	height: 1vh;
	width: 25vw;
	/*border-left:3px solid rgba(255,255,255,0.5);
	border-right:3px solid rgba(255,255,255,0.5);*/
	margin:1.5vh 0;
}

.percent {
 	width: 0;
 	height: inherit;
 	transition: 2s ease;
 	/*background-color: rgba(62, 61, 93, 0.9);*/
 	background-image: linear-gradient(to right, #051937, #07285a, #14387e, #2947a3, #4355c9);
}

.hidden {
	opacity:0;
}

.education {
	width:40vw;
	justify-content:left;
}

.skills {
	color:white;
	margin:2vh 0vh;
	font-size:1.2em;
}

.skillsTitle {
	/*border:3px solid black;*/
	padding:10px;
}

#workSplitter {
	background-color:white;
	width:20vw;
	transform:rotate(90deg);
}

#negativeMargin1 {
	transform: translateX(5vw);
	color:white;
	font-size:1.5em;
	justify-content:center;
}

#negativeMargin2 {
	transform: translateX(-5vw);
	color:white;
	font-size:1.5em;
	justify-content:center;
}

h4 {
	color:white;
}

/*.project {
	background-color:rgba(0,0,0,0.4);
	border:6px solid black;
	margin:2vw;
}*/

h3 strong {
	text-align:left;
}

#languages {
	margin-top:10vh;
}

.languages {
	float:left;
}

.skillsCategory {
	margin:2vh 0vh;
	border-left:white 4px solid;
	border-bottom:white 4px solid;
	padding-left:5px;
	padding-bottom:5px;
}

.backgroundBorder {
	background-color:rgba(0,0,0,0.9);
	/*border:6px solid black;*/
	margin:4vw;
	padding:1vw;
	height:80vh;
}

.backgroundBorder2 {
	background-color:rgba(0,0,0,0.9);
	margin:4vw;
	padding:1vw;
	height:50vh;
	border-top:0vh white solid;
	transition:background-color 1s ease-in-out, border-top 0.3s ease-in-out, box-shadow 0.7s ease-in-out;
}

.backgroundBorder2:hover {
	background-color:rgba(56,87,255,0.2);
	border-top:2vh white solid;
	box-shadow: 0px 30px 40px rgba(0,0,0,.6);
}

hr {
	background-color:white;
	color:white;
}

.hrEducation {
	width:20vw;
	margin:0 auto;
	margin:4vh auto;
}

.hrSkills {
	width:30vw;
}

.hrWorkExperiences {
	width:0vw;
	height:0vh;
	margin-top:1vh;
	background-color:white;
}

div.education > ul > li {
	float:center;
	list-style:none;
}

#portfolio .backgroundBorder2 {
	font-size:1.3em;
}

#personalSkills {
	margin: 2vh 0vh;
}

.workExperiences > h1 {
	margin-bottom:2vh;
}

.fab {
	color:white;
	font-size:4em;
}

#copyright {
	color:white;
}

#socialNetworks {
	display:inline-block;
}

#socialNetworks i {
	transition:color 0.25s ease-in-out;
}

#socialNetworks i:hover {
	color:rgba(255,211,190,0.8);
}

#references h3 {
	margin-top:2vh;
}

/*#references .flex:not(:nth-child(2)) {
	background-color:rgba(69,180,232, 0.7);
	height:100vh;
}

#references .flex:not(:nth-child(1)) {
	background-color:rgba(76,255,164, 0.7);
	height:100vh;
}*/

#socialNetworksBorders {
	padding: 2vh 2vh 0vh 2vh;
	border-color: white;
	border-style: solid;
	border-width: 7px 7px 0px 7px;
	border-radius:100px;
	width:40vw;
	height:30vh;
	/*background-color:rgba(0,0,0,0.2);*/
	background-image: linear-gradient(to right bottom, #0052cf66, #00000066);
	transition:border-radius 0.7s ease-in-out;
}

#socialNetworksBorders:hover {
	border-radius:0;
}

#referencesBorders {
	padding:0vh 2vh 2vh 2vh;
	border-color: white;
	border-style: solid;
	border-width: 0px 7px 7px 7px;
	border-radius:100px;
	width:40vw;
	height:30vh;
	/*background-color:rgba(0,0,0,0.2);*/
	background-image: linear-gradient(to left top, #0052cf66, #00000066);
	transition:border-radius 0.7s ease-in-out;
}

#referencesBorders:hover {
	border-radius:0;
}

/*img {
	width:0px;
	height:0px;
	border:rgba(255,255,255,0.7) solid 5px;
	margin:2vh 0;
}*/

@media only screen and (max-width: 625px) {
	.flex-container {
		display:block;
	}
}

SupernessQwick

10 décembre 2018 à 17:56:50

Salut !

Tu veux dire que certains se chevauchent ou certains sous-conteneurs se placent au sommet des conteneurs ? Une capture d'écran serait cool.

Perso, quand ce genre de chose arrive, j'inspecte l'élément qui sors des rangs, et je regarde quelle règle CSS est susceptible de provoquer ce comportement…

Si ça se chevauche, regardes si les éléments ne débordent pas de leur conteneur, à cause de la règle flex-wrap par défaut de fexbox interdisant le passage à la ligne. C'est la seule piste que j'ai en tête pour le moment.

-
Edité par SupernessQwick 10 décembre 2018 à 17:57:47

Zoki_Marciano

10 décembre 2018 à 18:18:55

Il faut revoir la sémantique car tu utilises des h4 pour mettre en forme ton texte et ce n'est pas bon. Oubli les pour revenir à la ligne il y a d'autres solutions pour ca. Enfin pour te faciliter la vie revois le découpage de ton site de façon logique puis gère block par block.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

kiwai

11 décembre 2018 à 13:13:32

SupernessQwick a écrit:

Salut !

Tu veux dire que certains se chevauchent ou certains sous-conteneurs se placent au sommet des conteneurs ? Une capture d'écran serait cool.

Perso, quand ce genre de chose arrive, j'inspecte l'élément qui sors des rangs, et je regarde quelle règle CSS est susceptible de provoquer ce comportement…

Si ça se chevauche, regardes si les éléments ne débordent pas de leur conteneur, à cause de la règle flex-wrap par défaut de fexbox interdisant le passage à la ligne. C'est la seule piste que j'ai en tête pour le moment.

-
Edité par SupernessQwick il y a environ 19 heures

Oui, les éléments se chevauchent. En effet un flex-wrap me semble être appliqué, je vais checker ça tout à l'heure. Merci de cette information.

Zoki_Marciano a écrit:

Il faut revoir la sémantique car tu utilises des h4 pour mettre en forme ton texte et ce n'est pas bon. Oubli les pour revenir à la ligne il y a d'autres solutions pour ca. Enfin pour te faciliter la vie revois le découpage de ton site de façon logique puis gère block par block.

Hmm ouais, j'utilise en général les balises h pour les titres mais je les utilise quelques fois pour la mise en forme :/. Tu conseillerais plutôt de mettre un id/une classe sur l'élément et d'utiliser font-size ? Et pour ce qui est des plutôt des paragraphes ou autre chose ?

Pour les screens, voici ce qui se passe. Cependant, j'ai testé sur mon téléphone et absolument rien ne se passe, l'image de fond ne s'affiche même pas (serait-ce à cause du téléphone ? Samsung S9+)

Merci en tout cas de votre aide !

Bonne journée à vous !

-
Edité par kiwai 11 décembre 2018 à 13:21:48

Zoki_Marciano

11 décembre 2018 à 16:14:33

pour les balises h tu peux remplacer par un p ou un span. Et pour les br tu peux jouer sur sur les div, p ou display block.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

SupernessQwick

11 décembre 2018 à 19:51:13

Zoki_Marciano a écrit:

Il faut revoir la sémantique car tu utilises des h4 pour mettre en forme ton texte et ce n'est pas bon. Oubli les pour revenir à la ligne il y a d'autres solutions pour ca. Enfin pour te faciliter la vie revois le découpage de ton site de façon logique puis gère block par block.

Il est effectivement plus prudent et logique de mettre tes titres en dehors des paragraphes, car ils sont de type "block" par défaut (et non "inline"). C'est un souci pour régler les marges entre titres et texte, entre autres problèmes de comportement.

À l'inverse, le texte en général, les   et les , devraient figurer dans des balises pour du texte (, <blockquote>, <h1>, <li>…), car ils sont considérés comme des éléments "inline".

Je pense que c'est un prérequis avant d'explorer les pistes sur le flexbox.

kiwai

12 décembre 2018 à 10:17:01

Bonjour,

J'ai réadapté mon code avec vos conseils, les h4 de "mise en forme" de texte ont été remplacé par des p avec une classe "description" qui met le texte en blanc avec un font-size de 1.3em et les titres sont également en dehors de balises "texte". Du coup le rendu final reste le même hormis le fait que le texte soit un peu plus gros partout. Et sinon, pour ce qui est de l'image de fond qui s'affiche pas sur mon téléphone, avez-vous une idée ? :/

EDIT - Image : J'ai testé avec mon image au format jpeg et jpg.. xD et sur 2 téléphones différents, le rendu est le même.

EDIT2 - Image : Après quelques tests, mon image s'affiche bel et bien seulement c'est qu'une infime partie de celle-ci et que la partie du haut. J'ai essayé avec des background-size: cover et contain, rien n'y fait. J'ai même "rendu" mon image verticale à l'aide de paint et pareil..

<!-- portfolio (projet perso), work experiences, references, personal skills, languages, education (+récent au plus ancien)-->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Portfolio of">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
		<link rel="icon" href="favicon.ico">
	</head>
	<body id="body">
		<header>
			<ul id="menu">
				<li>
					<a href="#home">
						Home
					</a>
				</li>
				<li>
					<a href="#skills">
						Skills
					</a>
				</li>
				<li>
					<a href="#workExperiences">
						Work Experiences
					</a>
				</li>
				<li>
					<a href="#portfolio">
						Portfolio
					</a>
				</li>
				<li>
					<a href="#education">
						Education
					</a>
				</li>
				<li>
					<a href="#references">
						References
					</a>
				</li>
			</ul>
		</header>
		<section id="home">
			<div class="flex-container">
				<div class="flex" id="me">
					<h2 id="meTitle"></h2><br/>
					<div id="description" class="hidden">
						<p class="description">
							I am a second year <strong>IT student</strong>, fond of <strong>IT security</strong> (if possible, I would love to work at the DGSI)<br/>
							& <strong>web development</strong> (design & programming). I keep abreast of <strong>new technologies</strong><br/> in order to give the <strong>best of myself</strong> to my future clients. <strong>Science</strong> is also a passion of mine.<br/><br/><br/>
						</p>
						<div>
							<a href="files/CV_English" download="English Resume">ENGLISH RESUME</a>
							<a href="files/CV" download="French Resume">FRENCH RESUME</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<section id="skills">
			<div class="flex-container">
				<div class="flex backgroundBorder">
					<h1 class="skillsTitle">expertise</h1>
					<hr class="hrSkills">
					<h3 class="skillsCategory hidden"><strong>Web</strong></h3>
					<h4>Tags are my favorites - HTML (Use CTRL+U to realize this)</h4>
					<div class="progressBar">
						<div id="%95" class="percent">
							
						</div>
					</div>
					<h4>Classes for object-oriented CSS (& IDs ( ͡° ͜ʖ ͡°))</h4>
					<div class="progressBar">
						<div id="%90" class="percent">
							
						</div>
					</div>
					<h4>Remaking sort functions using PHP algorithmic</h4>
					<div class="progressBar">
						<div id="%80" class="percent">
							
						</div>
					</div>
					<h4>JavaScript & jQuery for smooth animations (as you can see :p)</h4>
					<div class="progressBar">
						<div id="%85" class="percent">
							
						</div>
					</div>
					<h3 class="skillsCategory hidden"><strong>Software programming</strong></h3>
					<h4>C# with binding & responsive interface for the sake of the teachers</h4>
					<div class="progressBar">
						<div id="%75" class="percent">
							
						</div>
					</div>
					<h4>Java to manage memory</h4>
					<div class="progressBar">
						<div id="%75" class="percent">
							
						</div>
					</div>
					<h4>C/C++ because pointers are awesome !</h4>
					<div class="progressBar">
						<div id="%70" class="percent">
							
						</div>
					</div>
					<h3 class="skillsCategory hidden"><strong>Databases</strong></h3>
					<h4>SQL/PLSQL (Oracle, PostgreSQL) - Just not funny</h4>
					<div class="progressBar">
						<div id="%80" class="percent">
							
						</div>
					</div>
				</div>
				<div class="flex backgroundBorder">
					<h1 class="skillsTitle">know-how-to-be</h1>
					<hr class="hrSkills">
					<p id="personalSkills">
						<span class="skills hidden">Reliable ● </span>
						<span class="skills hidden">Empathetic ● </span>
						<span class="skills hidden">Persistant ● </span>
						<span class="skills hidden">Has team spirit</span>
					</p>
					<h1 class="skillsTitle" id="languages">languages</h1>
					<hr class="hrSkills">
					<p>
						<span class="skills languages hidden">French - NATIVE (Projet Voltaire : 750/1000 [=Business level])</span><hr id="hrLanguage1" class="hrLanguages" size=30vh/>
					</p>
					<p>
						<span class="skills languages hidden">English - UPPER INTERMEDIATE (B2) (TOEIC : Soon)</span><hr id="hrLanguage2" class="hrLanguages" size=30vh/>
					</p>
					<p>
						<span class="skills languages hidden">Spanish - LOWER INTERMEDIATE (B1)</span>
					</p>
				</div>
			</div>
		</section>
		<section id="workExperiences">
			<div class="flex-container">
				<div class="flex workExperiences" id="negativeMargin1">
					<h1>Vice Treasurer</h1>
					<p class="description">
						From February 2018 to February 2019, I was doing
						the accounting of the student office(treasury), practiced
						my communication skills and improved my economic knowledge.
					</p>
					<hr class="hrWorkExperiences hidden">
				</div>
				<hr id="workSplitter">
				<div class="flex workExperiences" id="negativeMargin2">
					<h1>Tutored Project</h1>
					<p class="description">
						From May 2018 to March 2019, me and my project team
						developed android application for the "Château de Sassenage"
						in order to make it more attractive.
					</p>
					<hr class="hrWorkExperiences hidden">
				</div>
			</div>
		</section>
		<section id="portfolio">
			<div class="flex-container">
				<div class="flex backgroundBorder2">
					<h1>PacMaze</h1>
					<p class="description">
						<br/>
						We made a video games based on a maze and PAC-MAN
						using Unity 5, the goal was to escape the maze with a
						key that we previously found and use it to open the door
						of the maze. We tried to make this game a potential
						multiplayer game with 4 PAC-MAN & 1 ghost who had to
						hunt the 4 survivors.
					</p>
				</div>
				<div class="flex backgroundBorder2">
					<h1>Coded 2 websites</h1>
					<br/>
					<p class="description">
						One for alps environment (wildlife & flora)
						in order to protect it. The other one is a tripadvisor-like made
						from scratch and using "Scrum" method.
					</p>
				</div>
				<div class="flex backgroundBorder2">
					<h1>AmphiQuizz</h1>
					<br/>
					<p class="description">
						We developed an application in pairwork using C#.
						Its goal was to put a mark to a student, selecting
						a teacher who led the exam in order to say if he
						answered correctly or not or if he was missing.
						All of this linked to a database.
					</p>
					<!-- <img src="img/code.png" style="border:10px solid rgba(255,255,255,0.2"> -->
				</div>
			</div>
		</section>
		<section id="education">
			<div class="flex-container">
				<div class="flex">
					<div class="backgroundBorder2 education">
						<p class="description">
							<strong>DUT Informatique</strong><br/><hr/><br/>
							(2-year university diploma in computer science)<br/>
							University of Savoy - IUT Annecy-le-Vieux (74940), France
						</p>
						<hr class="hrEducation"/>
						<strong>September 2017 - June 2019</strong>
						<hr class="hrEducation"/>
						<h2>Keywords</h2>
						<ul>
							<li>
								Algorithmic
							</li>
							<li>
								Programming
							</li>
							<li>
								Operating System (OS)
							</li>
							<li>
								Networks
							</li>
							<li>
								Software Engineering
							</li>
							<li>
								Mathematics
							</li>
						</ul>
					</div>
				</div>
				<div class="flex">
					<div class="backgroundBorder2 education">
						<p class="description">
							<strong>French baccalaureate STI2D</strong><br/><hr/><br/>
							(High school diploma specialized in Science and Technologies of the Industry and the Sustainable Development) with honors<br/>
							Louis Lachenal High school – Argonay (74370), France
						</p>
						
						<hr class="hrEducation"/>
						<strong>June 2017</strong>
						<hr class="hrEducation"/>
						<h2>Keywords</h2>
						<ul>
							<li>
								Algorithmic
							</li>
							<li>
								Programming
							</li>
							<li>
								Mechanics/Physics/Chemistry
							</li>
							<li>
								Electricity
							</li>
							<li>
								Electronics
							</li>
							<li>
								Architecture/Design
							</li>
						</ul>
					</div>
				</div>
			</div>
		</section>
		<section id="references">
			<div class="flex-container">
				<div class="flex">
					<div id="referencesBorders">
						<h1>
							REFERENCES
						</h1>
						<div>
							<p>
								<h3>
									<i class="fas fa-user-alt"></i> Stéphanie BOUCHON
								</h3>
								Professional English & communication teacher at IUT Annecy - USMB<br/>
								<i class="fas fa-envelope"></i> stephanie.bouchon@univ-smb.fr<br/>
								+33 (0)4 50 09 22 22
							</p>
						</div>
						<div>
							<p>
								<h3>
									<i class="fas fa-user-alt"></i> Luc DAMAS 
								</h3>
								University lecturer at USMB, OOP & Web teacher (Associate teacher)<br/>
								<i class="fas fa-envelope"></i> luc.damas@univ-smb.fr<br/>
								+33 (0)4 50 09 22 22	
							</p>
						</div>
					</div>
				</div>
				<div class="flex">
					<div id="socialNetworksBorders">
						<div id="socialNetworks">
							<a href="https://www.facebook.com/" target="blank">
								<i class="fab fa-facebook-square"></i>
							</a>
							<a href="https://www.linkedin.com/in//" target="blank">
								<i class="fab fa-linkedin"></i>
							</a>
						</div>
					<!-- <img id="profileImage" src="img/killian.jpg" class="hidden"> -->
						<p id="copyright">
							CC BY NC SA - 2018 -
							<br/>
							<i class="fas fa-envelope"></i>
							<br/>
							
						</p>
					</div>
					<!--
						idée : transition networks vers le haut
						et copyright vers le bas + truc qui pop entre les 2
					-->
				</div>
			</div>
		</section>
		<script type="text/javascript" src="js/main.js"></script>
	</body>
</html>

CSS :

.description {
	font-size:1.3em;
	color:white;
}

Merci à vous ! Et encore bonne journée ! :')

-
Edité par kiwai 12 décembre 2018 à 16:39:09

DavidPautrat

13 décembre 2018 à 13:57:01

Bonjour

Pourquoi ne pas utiliser le display flex et les classes flex de bootstrap pour mettre en place plu rapidement votre site internet.

Zoki_Marciano

13 décembre 2018 à 17:42:15

Serieux? Tu t'es basé sur quoi pour créer ta page? Parce que là ton code sans vouloir être méchant est pas propre.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

kiwai

16 décembre 2018 à 1:09:34

DavidPautrat a écrit:

Bonjour

Pourquoi ne pas utiliser le display flex et les classes flex de bootstrap pour mettre en place plu rapidement votre site internet.

Je suis en fait étudiant en Info et on nous autorise aucun framework donc seulement HTML CSS et JS du moins pour ce devoir qui a pour but de réaliser un portfolio.

Zoki_Marciano a écrit:

Serieux? Tu t'es basé sur quoi pour créer ta page? Parce que là ton code sans vouloir être méchant est pas propre.

Sur mes bases dans les langages HTML CSS et JS pourquoi ?

-
Edité par kiwai 16 décembre 2018 à 1:11:24

Zoki_Marciano

16 décembre 2018 à 10:36:12

Trop de div, trop d'id, mal utilisé, classe "body" sur balise <body> alors que c'est inutile, utilisation des balises <h> pour la mise en forme, utilisation de la balise pour mettre en gras, etc...

As tu crées un wireframe de ton site avant de le créer ?

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

bac +5 informatique avancé

17 décembre 2018 à 10:04:22

Madame, monsieur,

Zoki_Marciano a écrit:

Trop de div, trop d'id, mal utilisé, classe "body" sur balise <body> alors que c'est inutile, utilisation des balises <h> pour la mise en forme, utilisation de la balise pour mettre en gras, etc...

As tu crées un wireframe de ton site avant de le créer ?

Je recommanderais de privilégier les Getters{}-Getters{} à l'intérieur du body pour réaliser le code, il sera plus optimisé ainsi.

kiwai

17 décembre 2018 à 10:06:48

Zoki_Marciano a écrit:

Trop de div, trop d'id, mal utilisé, classe "body" sur balise <body> alors que c'est inutile, utilisation des balises <h> pour la mise en forme, utilisation de la balise pour mettre en gras, etc...

As tu crées un wireframe de ton site avant de le créer ?

Les divs et ids me servent à sélectionner les éléments en CSS et JS et pour l'id body, c'est plus une erreur je pense étant donné que je m'en sers jamais.. xD Les h sont utilisés pour les titres, maintenant, après correction du code... Et à la place des strong, tu conseillerais de faire des span avec une classe pour chaque chose que je souhaite mettre en gras ?

Et non je n'ai pas fais de wireframe par manque de temps..

Zoki_Marciano

17 décembre 2018 à 21:44:21

oui tu peux faire un

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.