-
Main Background Color:
--clr-mainBackground: hsla(244, 31%, 10%, 1);
-
Neon Blue:
--clr-neonBlue: hsl(205, 100%, 53%);
-
Ligth Blue:
--clr-ligthBlue: hsl(205, 100%, 80%);
-
HTML Orange Color:
--clr-html: #f06529
-
CSS Blue Color:
--clr-css: #264de4
-
JavaScript Yellow Color:
--clr-js: #f7df1e
-
React Blue Color:
--clr-react: #61dbfb
-
C# Violet Color:
--clr-csharp: #682876
-
Python blue:
--clr-python: #f06529
-
Linkedin blue:
--clr-linkedin: rgb(10, 102, 194)
-Responsive Web Design -JavaScript Algorithms and Data Structures
-Web Development Fundamentals -HTML -Responsive Web Design
<aside id="left-side__container">
<ul id="tech-list" class="project-categories">
<li class="tech-item">
<a href="#">
<img src="./resources/logos/html-css-js.png"
alt="Image with the logos for HTML, CSS and JS in form of shield" width="50vw" height="50vw">
</a>
</li>
<li class="tech-item zero-stats">
<a href="#">
<img src="./resources/logos/react.png" alt="Image with the ReactJS logo" width="50vw" height="50vw">
</a>
</li>
<li class="tech-item zero-stats">
<a href="#">
<img src="./resources/logos/csharp.png" alt="Image with the C# logo" width="50vw" height="50vw">
</a>
</li>
<li class="tech-item zero-stats">
<a href="#">
<img src="./resources/logos/python.png" alt="Image with the Python logo" width="50vw" height="50vw">
</a>
</li>
</ul>
</aside>
<div id="project-gallerie">
<div class="gallerie-container">
<div class="gallerie-set web-left">
<div id="desktop-link" class="visit-link">
<a href="#">
<i class="fa-solid fa-eye"></i>
</a>
</div>
<div class="gallerie-item-img">
<img src="./resources/picture/Frontend Mentor Project.png"
alt="Main UI of the Frontend Mentor Repository">
</div>
<div class="gallerie-item-content">
<h2 class="project-title">
Frontend Mentor Repo
</h2>
<h3 class="project-type">
Project type: <span id="project-type-value">Website</span>
</h3>
<p class="project-description">
Repo of all my projects for Frontend Mentor
</p>
<div class="tags-container">
<ul>
<li>#<span class="tags-value orange-tag">HTML</span></li>
<li>#<span class="tags-value blue-tag"></span>CSS</li>
<li>#<span class="tags-value yellow-tag"></span>JavaScript</li>
</ul>
</div>
</div>
<div id="mobile-link" class="visit-link">
<a href="#">
<i class="fa-solid fa-eye"></i>
</a>
</div>
</div>
<div class="gallerie-set web-right">
<div id="desktop-link" class="visit-link">
<a href="#">
<i class="fa-solid fa-eye"></i>
</a>
</div>
<div class="gallerie-item-img">
<img src="./resources/picture/Frontend Mentor Project.png"
alt="Main UI of the Frontend Mentor Repository">
</div>
<div class="gallerie-item-content">
<h2 class="project-title">
Frontend Mentor Repo
</h2>
<h3 class="project-type">
Project type: <span id="project-type-value">Website</span>
</h3>
<p class="project-description">
Repo of all my projects for Frontend Mentor
</p>
<div class="tags-container">
<ul>
<li>#<span class="tags-value orange-tag">HTML</span></li>
<li>#<span class="tags-value blue-tag"></span>CSS</li>
<li>#<span class="tags-value yellow-tag"></span>JavaScript</li>
</ul>
</div>
</div>
<div id="mobile-link" class="visit-link">
<a href="#">
<i class="fa-solid fa-eye"></i>
</a>
</div>
</div>
</div>
</div>
<aside id="right-side__container">
<ul id="projectType-list" class="project-categories">
<li class="projectType-item">
<i class="fa-solid fa-globe"></i>
</li>
<li class="projectType-item zero-stats" id="item__app">
<!-- <i class="fa-solid fa-desktop"></i>
<i class="fa-solid fa-laptop"></i>
<i class="fa-solid fa-tablet-screen-button"></i> -->
<i class="fa-solid fa-mobile-screen"></i>
</li>
<li class="projectType-item zero-stats">
<i class="fa-solid fa-chess"></i>
</li>
</ul>
</aside>