Skip to content

Commit

Permalink
Project Section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jonas0o0
Jonas0o0 authored Jan 15, 2024
1 parent 21bf73c commit 4b64484
Show file tree
Hide file tree
Showing 13 changed files with 601 additions and 23 deletions.
128 changes: 122 additions & 6 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap');

@font-face {
font-family: JFont;
Expand Down Expand Up @@ -305,7 +305,7 @@ span {
section.Ap {
overflow: hidden;
width: 100%;
height: 100vh;
min-height: 100vh;
background-color: #fff;
color: #000000;
display: flex;
Expand All @@ -316,7 +316,7 @@ section.Ap {

section.Ap div.text-content {
font-family: 'Roboto', sans-serif;

margin: 0px 0px 200px 0px;
font-size: 20px;
width: 50%;
}
Expand Down Expand Up @@ -695,17 +695,133 @@ to {
}
}

section.CM .resaux{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

section.CM .button{
background-color: #fff;
color: #000000;
width: 56px;
height: 56px;
border-radius: 50px;
margin: 0 12px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 4px rgba(0,0,0,0.15);
transition: all 0.3s ease-in-out;
}

section.CM .button:hover{
width: 160px;
}

section.CM .button:nth-child(1):hover{
background-color: #382b94;
color: #fff;
}
section.CM .button:nth-child(2):hover{
background-color: #24292f;
color: #f5f5f5;
}
section.CM .button:nth-child(3):hover{
background: linear-gradient(to right, hsl(37,97%,70%),hsl(329,70%,58%));
color: #fff;
}
section.CM .button:nth-child(4):hover{
background-color: #1389bf;
color: #fff;
}

section.CM .button .s-icon{
display: inline-flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 56px;
height: 56px;
border-radius: 50%;
text-align: center;
transition: all 0.3s ease-in-out;
}

section.CM .button .s-icon svg{
width: 24px;
height: 24px;
}


section.CM .button .s-icon span{
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 600;
}

section.Pr {
width: 100%;
background-color: #fff;
color: #000000;
display: flex;
flex-direction: column;
padding: 200px 0px;
}

section.Pr h1{
margin: 50px 0px 50px 25px;
font-size: 150px;
font-style: italic;
font-weight: bold;
font-family: JFont;
}

section.ap-content {
background-color: #5b5b5b;
height: 1000px;
section.Pr .project-container{
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
align-items: center;
justify-content: space-evenly;
}

section.Pr .project-container .box{
font-family: 'Roboto', sans-serif;
width: 30%;
min-width: 300px;
height: 500px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 10px;
padding: 50px;
box-shadow: rgba(0, 0, 0, 0.349) 0px 2px 4px;
}

section.Pr .project-container .box:nth-child(1){
background-color: #382b94;
color: #fff;
}

section.Pr .project-container .box h1{
font-size: 100px;
margin: 0;
font-weight: bold;
font-family: JFont;
}

section.Pr .project-container .box a{
text-align: center;
color: #000;
text-decoration: none;
padding: 5px;
border-radius: 3px;
background-color: #fff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
margin-top: 15px;
}
89 changes: 72 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="verticalnav-container">
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="">Project</a></li>
<li><a href="#Pr">Project</a></li>
<li><a href="#Skill">Skills</a></li>
<li><a href="#AP">About me</a></li>
<li><a href="#CM">Contact me</a></li>
Expand All @@ -31,7 +31,7 @@
</div>
<div class="link">
<a href="#Home" class="animation">Home</a>
<a class="animation">Projects</a>
<a href="#Pr" class="animation">Projects</a>
<a href="#Skill" class="animation">Skills</a>
<a href="#AP" class="animation">About me</a>
<a href="#CM" class="animation">Contact me</a>
Expand Down Expand Up @@ -78,56 +78,111 @@ <h1>Skills</h1>
<span class="Skill-Area ">PHYTON</span>
<span class="PercentText ">100%</span>
</div>
</div>

</div>
<div class="SkillBar">
<div id="Skill-HTML">
<span class="Skill-Area ">HTML</span>
<span class="PercentText ">100%</span>
</div>
</div>

</div>
<div class="SkillBar">
<div id="Skill-CSS">
<span class="Skill-Area ">CSS</span>
<span class="PercentText ">90%</span>
</div>
</div>

<div class="SkillBar">
<div id="Skill-SQL">
<span class="Skill-Area ">SQL </span>
<span class="PercentText ">70%</span>
</div>
</div>

<div class="SkillBar">
<div id="Skill-C">
<span class="Skill-Area ">C</span>
<span class="PercentText ">30%</span>
</div>
</div>

</div>
<div class="SkillBar">
<div id="Skill-JS">
<span class="Skill-Area ">JScript</span>
<span class="PercentText ">25%</span>
</div>
</div>

</div>
<div class="SkillBar">
<div id="Skill-PHP">
<span class="Skill-Area ">PHP </span>
<span class="PercentText ">25%</span>
</div>
</div>

</div>
</section>
<section id="Pr", class="Pr">
<h1>Project</h1>
<div class="project-container">
<div class="box">
<h1>AnimeBot</h1>
<p>AnimeBot est un bot Discord développé en Python axé sur l'univers de l'anime, conçu pour simplifier la découverte et l'exploration d'une variété de séries animées. Adapté aux novices comme aux passionnés, AnimeBot utilise l'API "Jikan" pour offrir une recherche facile par mots-clés ou genres, fournissant ainsi une liste d'anime correspondants. Explorez le monde de l'anime sans tracas avec AnimeBot.</p>
<a href="src/soon.html">
Plus d'info
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
</svg>
</a>
</div>
<div class="box">
<h1>Mon Premier site web serieux</h1>
<p>Ce site web est un site web que j'ai réalisé pour une tache final d'anglais de seconde. Il falait faire un site avec une bar de navigation et quelque section pour présenté notre association de défence de l'emvironnement</p>
<a href="src/Anglais-main/index.html">
Visitez le site
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
</svg>
</a>
</div>
</div>
</section>

<section id="bottom" class="ap-content">

<section style="opacity: 0;" class="CM" id="CM">
<div class="container">
<h1>Contact me</h1>
<div>
<div class="resaux">
<div class="button">
<div class="s-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
</svg>
</div>
<span>Discord</span>
</div>
<div class="button">
<div class="s-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
</svg>
</div>
<span>GitHub</span>
</div>
<div class="button">
<div class="s-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
</svg>
</div>
<span>Instagram</span>
</div>
<div class="button">
<div class="s-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x" viewBox="0 0 16 16">
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/>
</svg>
</div>
<span>X</span>
</div>

</div>
</div>
</div>
</section>
<footer>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum reiciendis corrupti quia aut cumque ullam labore sequi, veniam perspiciatis nihil odit porro tempore eaque dignissimos rerum id ea impedit assumenda.</p>
Expand All @@ -138,4 +193,4 @@ <h1>Skills</h1>
AOS.init();
</script>
</body>
</html>
</html>
Binary file added src/Anglais-main/css/NATURE.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.
Loading

0 comments on commit 4b64484

Please sign in to comment.