Skip to content

Commit

Permalink
en-cours-8
Browse files Browse the repository at this point in the history
  • Loading branch information
@itdeveloppement
itdeveloppement committed Mar 26, 2024
1 parent 8f00663 commit ea1558d
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 137 deletions.
151 changes: 88 additions & 63 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,54 +259,22 @@ main {
/* services */
.services {
padding: 5% 4.5% 0 4.5%;
color: var(--colorTrois);


}
.services__container {
position: relative;
width: 32%;
margin: 0.5%;
}

.service__container-img {
position: relative;
background-color: #00b8bb;
border-radius: var(--borderRadius);
height: 100px;
overflow: hidden;
margin-bottom: 30px;

}
.service__container-img img{
width: 100%;
height: auto;
border-radius: var(--borderRadius);
position: relative;
top: -150px;
filter: sepia(100%) hue-rotate(30deg);
padding: 2%;
}

.services__title-h4 {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 70px;
font-size: 30px;
color: var(--colorDeux);
background-color: rgba(240, 248, 255, 0.8);
padding: 2%;
}

.services__nav-lu {
width: 100%;
line-height: 1.5;
padding: 10% 0 0 0;
line-height: 2;
font-size: 20px;
}
.services__nav-li {
text-align: center;

}

/* projet */

.projet {
Expand Down Expand Up @@ -424,54 +392,109 @@ main {
}
/* skills */
.skills {
padding: 0 4.5% 10% 4.5%;
padding: 4.5%;
background-color: var(--colorDeux);
justify-content: space-between;
}
.skills__title-h3 {
color: var(--colorDeux)
}
.skills__title-h4 {
background-color: rgba(240, 248, 255, 0.97);
border-radius: var(--borderRadius);
text-align: center;
color: var(--colorDeux);
font-size: 30px;
padding: 2%;
margin:0;
width: 100%;
height: 70px;
margin-bottom: 40px;
border-radius: 10px 10px 0 0;


}
.skills__contenair {
width: 100%;
width: 49.5%;
justify-content: space-between;
border-radius: var(--borderRadius);
background-color: var(--colorTrois);


}
.skills__contenair-skills {
width: 49.5%;
border-radius: var(--borderRadius);
background-color: var(--colorTrois);

}
.skills__title-h5 {
margin: 20px 0 0 0;
font-size: 20px;
color: var(--colorDeux);

}
.skills__nav-ul {
line-height: 2;
color: var(--colorTrois);
padding: 0 5% 5% 5%;
font-size: 18px;
}
.skills__nav-ul-prog {
justify-content: space-around;
margin-bottom: 20px;
}
.skills__nav-ul-prog li{
width: 75px;
}
.skills__nav-ul-prog img {
width: 100%;
height: auto;
}
.skills__nav-ul-logiciel {
justify-content: space-around;
}
.skills__nav-ul-logiciel li{
width: 65px;
}
.skills__nav-ul-logiciel img {


/* grid */
.container-grid {

justify-items: center;
align-items: center;
padding: 5% 10% 5% 10%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas:
"logo-html logo-css logo-js logo-js . ."
"logo-php logo-sql logo-js logo-js . ."
"logo-figma logo-figma logo-visual logo-notion . ."
"logo-figma logo-figma logo-github logo-git . .";
}

.logo-js { grid-area: logo-js; }

.logo-html { grid-area: logo-html; }

.logo-css { grid-area: logo-css; }

.logo-php { grid-area: logo-php; }

.logo-sql { grid-area: logo-sql; }

.logo-visual { grid-area: logo-visual; }

.logo-figma { grid-area: logo-figma; }

.logo-notion { grid-area: logo-notion; }

.logo-github { grid-area: logo-github; }

.logo-git { grid-area: logo-git; }

.container-grid img {
width: 100%;
height: auto;
}
height: auto;
}
.logo-figma {
width: 30%;
}
.logo-js {
width: 30%;
}
.logo-html, .logo-css, .logo-php, .logo-sql {
width: 60%;
}
.logo-notion, .logo-github, .logo-git, .logo-visual {
width: 50%;

/* about */
}
/* about */
.about {
padding: 0 4.5% 5% 4.5%;
}
Expand All @@ -491,11 +514,13 @@ main {
}
.about__container-img {
text-align: center;

width: 45%;
}
.about__container-img img {
width: 400px;
height: auto;
border-radius: var(--borderRadius);
}


Expand Down
Binary file modified assets/images/logo/logo-js.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/logo/logo-js1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 42 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,56 +85,25 @@ <h1 class="title-h1 hero__title-h1"> Conception<br> d'applications web ●</h1>
<main>
<!-- services -->
<section class="services flex">
<h3 class="title-h3 services__title-h3">> Services</h3>
<h3 class="title-h3 services__title-h3">▲ Services</h3>
<div class="services__container">
<!--
<div class="service__container-img">
<img src="./assets/images/imagesTest/image5.jpeg" alt="">
</div> -->
<h4 class="title-h4 services__title-h4">Conception</h4>
<ul class="nav-ul services__nav-lu">
<li class="nav-li services__nav-li">Sites entreprise</li>
<li class="nav-li services__nav-li">Sites e-commerce </li>
<li class="nav-li services__nav-li">Sites portfolio</li>
</ul>
<h4 class="title-h4 services__title-h4">Sites d'entreprise et e-commerce.</h4>
</div>
<div class="services__container">
<div class="services__container-img-text">
<!--
<div class="service__container-img">
<img src="./assets/images/imagesTest/image2.jpeg" alt="">
</div> -->
<h4 class="title-h4 services__title-h4">Design d'interface</h4>
</div>
<div class="services__container-description">
<ul class="nav-ul services__nav-lu">
<li class="nav-li services__nav-li">Développer une experience utilisateur simple, naturelle et esthetique. </li>
</ul>
</div>
<h4 class="title-h4 services__title-h4">Experiences utilisateurs, naturelle et esthetique.</h4>
</div>
</div>
<div class="services__container">
<div class="services__container-img-text">
<!--
<div class="service__container-img">
<img src="./assets/images/imagesTest/image3.jpeg" alt="">
</div> -->
<h4 class="title-h4 services__title-h4">Référencement</h4>
</div>
<div class="services__container-description">

<ul class="nav-ul services__nav-lu">
<li class="nav-li services__nav-li">Augmenter le referencement naturel.</li>
<li class="nav-li services__nav-li">Rendre accéssible à tous les utilisateurs.</li>
</ul>
</div>
<h4 class="title-h4 services__title-h4">Referencement et accessibilité.</h4>
</div>
</div>
</section>

<!-- projet -->
<section class="projet">
<h3 class="title-h3 projet__title-h3">>travail recent</h3>
<h3 class="title-h3 projet__title-h3">▲ travail recent</h3>
<!-- card 1 -->
<div class="container projet__container flex">
<div class="container__card container__card-1">
Expand Down Expand Up @@ -197,54 +166,53 @@ <h3 class="title-h3 projet__title-h3">>travail recent</h3>
</section>
<!-- Skills -->
<section class="skills flex">
<h3 class="title-h3 skills__title-h3">> Mes competences</h3>
<div class="skills__contenair flex">
<div class="skills__contenair-skills organisation__container-left">
<h4 class="skills__title-h4">Conception</h4>
<ul class="nav-ul skills__nav-ul">
<li class="nav-li">Analyser et valider les besoins des utilisateurs</li>
<li class="nav-li">Plannifier les délais et les priorités de production</li>
<li class="nav-li">Controler les étapes et amener les correctifs</li>
<h4 class="title-h4 skills__title-h4">▲ Mes competences</h4>
<ul class="nav-ul skills__nav-ul">
<ul class="nav-ul">
<h5 class="title-h5 skills__title-h5">Design d'interface</h5>
<li class="nav-li">Collect et analyse des besoins des utilisateurs</li>
<li class="nav-li">Création des profils et des parcours utilisateur</li>
<li class="nav-li">Elaboration et teste du prototype de l'application</li>
</ul>
</div>
<div class="skills__contenair-skills conception__container-central">
<h4 class="skills__title-h4">Programation</h4>
<ul class="nav-ul skills__nav-ul">
<ul class="nav-ul ">
<li>Langages :</li>
<ul class="nav-ul skills__nav-ul-prog flex">
<li><div><img src="./assets/images/logo/logo-html.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-css.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-js.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-php.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-sql.png" alt=""></div></li>
</ul>
</ul>
<ul class="nav-ul">
<li>Logiciels :</li>
<ul class="nav-ul skills__nav-ul-logiciel flex">
<li><div ><img src="./assets/images/logo/logo-figma.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-visual.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-notion.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-github.png" alt=""></div></li>
<li><div><img src="./assets/images/logo/logo-git.png" alt=""></div></li>
</ul>
</ul>
<h5 class="title-h5 skills__title-h5">Programmation et déploiement</h5>
<ul class="nav-ul">
<li class="nav-li">Programmation back et front-end</li>
</ul>
<h5 class="title-h5 skills__title-h5">Réferencement et accessibilité</h5>
<ul class="nav-ul">
<li class="nav-li">Operationalisation des balises sémantiques</li>
<li class="nav-li">Mise en place Shema.org</li>
</ul>
</ul>
</div>
<div class="skills__contenair-skills flex">
<h4 class="skills__title-h4">Technologies</h4>
<div class="container-grid flex">
<div class="logo-js"><img src="./assets/images/logo/logo-js.png" alt=""></div>
<div class="logo-html"><img src="./assets/images/logo/logo-html.png" alt=""></div>
<div class="logo-css"><img src="./assets/images/logo/logo-css.png" alt=""></div>
<div class="logo-php"><img src="./assets/images/logo/logo-php.png" alt=""></div>
<div class="logo-sql"><img src="./assets/images/logo/logo-sql.png" alt=""></div>
<div class="logo-visual"><img src="./assets/images/logo/logo-visual.png" alt=""></div>
<div class="logo-figma"><img src="./assets/images/logo/logo-figma.png" alt=""></div>
<div class="logo-notion"><img src="./assets/images/logo/logo-notion.png" alt=""></div>
<div class="logo-github"><img src="./assets/images/logo/logo-github.png" alt=""></div>
<div class="logo-git"><img src="./assets/images/logo/logo-git.png" alt=""></div>
</div>
</div>
</div>
</section>
<!-- About me -->
<section class="about">
<h3 class="title-h3 about__title-h3">> About me </h3>
<h3 class="title-h3 about__title-h3">▲ About me</h3>
<div class="about__container flex">
<div class="about__container-para" >
<h4>Ecouter, comprendre, créer</h4>
<p>J'aime écouter, saisir et comprendre le comportement et les besoins des utilisateurs et des clients.</p>
<h4>Ecouter, comprendre, créer.</h4>
<p>J'aime saisir et comprendre le comportement et les besoins des utilisateurs et des clients.</p>
<p>J'aime donner naisssance a des applications qui correspondent au plus grand nombre d'usager, qui captivent, impliquent et permettent d'interagir de manière fluide et naturelle.</p>
</div>
<div class="about__container-img">
<img src="./assets/images/imagesTest/image1.jpeg">
<img src="./assets/images/imagesTest/image3.jpeg">
</div>
</div>

Expand All @@ -265,8 +233,8 @@ <h4 class="title-h4 footer__title-h4">Navigation</h4>
</ul>
</nav>
<address class="address footer__address">
<h4 class="title-h4 footer__title-h4">@ contact</h4>
<a class="link footer-adresse__link" href="mailto:[email protected]">@ [email protected]</a><br />
<h4 class="title-h4 footer__title-h4">Contact</h4>
<a class="link footer-adresse__link" href="mailto:[email protected]">Mail : [email protected]</a>
</address>
<p class="footer__mentions">Marti Castellano 2024 ©</p>
</footer>
Expand Down

0 comments on commit ea1558d

Please sign in to comment.