<div class="page-wrapper">
<nav id="navbar" class="navbar glass">
<ul class="navmenu">
<li>
<a href="#welcome-section" class="nav-link">About Me</a>
</li>
<li>
<a href="#projects" class="nav-link">Projects</a>
</li>
<li>
<a href="#contacts" class="nav-link">Contacts</a>
</li>
</ul>
</nav>
<main>
<section id="welcome-section" class="welcome-section glass">
<div>
<h1>
<div>Hello 👋</div>
<div>My name's Oury</div>
</h1>
<h2>A Frontend developer and ui/ux enthousiast.</h2>
</div>
</section>
<section id="projects" class="content-section">
<h3>Some of my projects</h3>
<div class="featured-projects">
<article class="project-tile glass">
<a href="https://codepen.io/ourystd/full/LYROYEV" target="_blank" rel="noreferer"></a>
<div class="project-img-wrapper">
<img class="static-img" src="https://i.ibb.co/H2wqydK/anta-diop-static.png" alt="FCC: Tribute Page - Cheikh Anta Diop">
<img class="animated-img" src="https://i.ibb.co/1M6nqVw/anta-diop-animated.gif" alt="FCC: Tribute Page - Cheikh Anta Diop - gif">
</div>
<h4 class="project-name">FCC: Tribute Page (Cheikh Anta Diop)</h4>
</article>
<article class="project-tile glass">
<a href="https://codepen.io/ourystd/full/PoEPLLz" target="_blank" rel="noreferer"></a>
<div class="project-img-wrapper">
<img class="static-img" src="https://i.ibb.co/0CzLCgr/kora-static.png" alt="kora project static">
<img class="animated-img" src="https://i.ibb.co/R3qdQV0/kora-animated.gif" alt="kora project animated">
</div>
<h4 class="project-name">FCC: Product landing page (KORA)</h4>
</article>
<article class="project-tile glass">
<a href="https://codepen.io/ourystd/full/LYeaKXZ" target="_blank" rel="noreferer"></a>
<div class="project-img-wrapper">
<img class="static-img" src="https://i.ibb.co/xYvFy52/doc-static.png" alt="FCC: Technical Docs Page - NimbaJS">
<img class="animated-img" src="https://i.ibb.co/4TVbcKp/doc-animated.gif" alt="FCC: Technical Docs Page animated- NimbaJS">
</div>
<h4 class="project-name">FCC: Technical Docs Page - NimbaJS</h4>
</article>
<article class="project-tile glass">
<a href="https://codepen.io/ourystd/full/Badwrwb" target="_blank" rel="noreferer"></a>
<div class="project-img-wrapper">
<img class="static-img" src="https://i.ibb.co/nPD8YvC/survey-form-static.png" alt="FCC: Survey Form">
<img class="animated-img" src="https://i.ibb.co/NYFGwLt/survey-form-animated.gif" alt="FCC: Survey Form - gif">
</div>
<h4 class="project-name">FCC: Survey Form</h4>
</article>
<article class="project-tile glass">
<a href="https://codepen.io/ourystd/full/QRKYbL" target="_blank" rel="noreferer"></a>
<div class="project-img-wrapper">
<img class="static-img" src="https://i.ibb.co/7VnGWbj/todoapp-static.png" alt="Simple TodoApp UI">
<img class="animated-img" src="https://i.ibb.co/f0NGcWH/todoapp-animated.gif" alt="Simple TodoApp UI - gif">
</div>
<h4 class="project-name">Simple TodoApp UI</h4>
</article>
<article class="project-tile glass">
<a href="https://codepen.io/ourystd/full/MxLbXQ" target="_blank" rel="noreferer"></a>
<div class="project-img-wrapper">
<img class="static-img" src="https://i.ibb.co/VJmTkBf/auth-form-static.png" alt="Flipable Auth Form">
<img class="animated-img" src="https://i.ibb.co/K5vCTQ7/auth-form-animated.gif" alt="Flipable Auth Form - gif">
</div>
<h4 class="project-name">Flipable Auth Form</h4>
</article>
</div>
<div class="btn-wrapper">
<a href="https://codepen.io/ourystd/" target="_blank" rel="noreferer" class="btn glass">See more projects</a>
</div>
</section>
<section id="contacts" class="content-section contacts-section">
<h3>Let's get in touch</h3>
<p class="info-msg">I'll get back to you as soon as possible</p>
<div class="contacts-links">
<a id="profile-link" href="https://github.com/ourystd/" target="_blank" rel="noreferer" class="glass btn">My Github</a>
<a id="linkedin-link" href="https://linkedin.com/in/ourystd/" target="_blank" rel="noreferer" class="glass btn">Let's Connect</a>
<a id="email-link" href="mailto:amadoury313@gmail.com" target="_blank" rel="noreferer" class="glass btn">Leave me a mail</a>
</div>
</section>
</main>
<footer class="page-footer">
<div class="footer-content">
<div class="copy-right">© 2022 - MIT</div>
<div class="credits">By Oury For FCC</div>
</div>
</footer>
</div>*, *::before, *::after {
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
padding: 0;
margin: 0;
background-color: #000749;
color: #fff;
width: 100vw;
overflow-x: hidden;
font-family: 'IBM Plex Sans', sans-serif;
}
.glass {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
.navmenu {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.navmenu .nav-link {
display: inline-block;
padding: 20px 25px;
color: #fafafa;
text-decoration: none;
font-weight: 400;
font-family: 'Clash Display', serif;
letter-spacing: 1.5px;
border-bottom: 1px solid transparent;
}
.navmenu .nav-link:hover {
color: yellow;
text-shadow: 2px -2px 10px #FFB30B;
border-bottom-color: yellow;
}
h1, h2, h3 {
font-family: 'Clash Display', serif;
}
h1 {
font-weight: 700;
font-size: 3rem;
text-shadow: 2px -2px 10px #FFB30B;
}
h2 {
font-weight: 500;
font-style: italic;
}
.content-section {
max-width: 1300px;
margin: 0 auto;
padding: 3.5rem 25px;
padding-right: 45px;
}
.welcome-section {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100vh;
}
@media (min-width: 1300px) {
.welcome-section {
clip-path: polygon(0 0, 100% 0, 100% 85%, 68% 89%, 34% 83%, 0 90%);
}
}
.featured-projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 3.75rem;
width: 100%;
margin: 20px auto;
}
h3 {
font-weight: 500;
font-size: 2rem;
text-align: center;
text-transform: capitalize;
text-shadow: 0 1px #fafafa;
}
.project-tile {
position: relative;
text-align: center;
border-radius: 5px;
transition: .35s;
overflow: hidden;
padding-bottom: 8px;
}
.project-tile:not(:hover) {
box-shadow: none;
}
.project-tile a {
position: absolute;
inset: 0;
}
.project-tile .project-name {
padding: 0 10px;
}
.project-tile .project-img-wrapper {
width: 100%;
height: calc(100% - 55px);
overflow: hidden;
transition: border-radius .34s;
}
.project-img-wrapper img {
max-width: 100%;
height: 100%;
margin: 0 auto;
}
.project-img-wrapper .static-img {
display: block;
}
.project-img-wrapper .animated-img {
display: none;
}
.project-tile:not(:hover) .project-img-wrapper {
border-radius: 5px 5px 0 15px;
}
.project-tile:hover .project-img-wrapper .animated-img {
display: block;
}
.project-tile:hover .project-img-wrapper .static-img {
display: none;
}
.project-tile:hover .project-name {
color: yellow;
text-shadow: 2px -2px 10px #FFB30B;
}
.btn-wrapper {
width: 100%;
text-align: center;
}
.btn {
display: inline-block;
margin: 20px auto;
padding: 10px 15px;
border-radius: 4px;
color: #fafafa;
text-decoration: none;
font-family: 'Clash Display', serif;
font-weight: 500;
font-size: 1.3rem;
letter-spacing: 1.2px;
text-transform: capitalize;
transition: .34s;
}
.btn:hover {
color: yellow;
text-shadow: 2px -2px 10px #FFB30B;
}
.btn:not(:hover) {
box-shadow: none;
}
.contacts-section {
min-height: 500px;
text-align: center;
}
.info-msg {
margin-top: 0;
}
.contacts-links {
display: flex;
flex-wrap: wrap;
max-width: 700px;
margin: 20px auto
}
.page-footer {
background-color: #008A93;
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1300px;
margin: 0 auto;
padding: 10px 25px;
padding-right: 45px;
}
@media (max-width: 600px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.3rem;
}
.featured-projects {
grid-template-columns: 1fr;
}
.content-section, .footer-content {
padding: 3rem 1rem;
}
.footer-content {
padding: 10px 1rem;
}
}
@media (max-width: 413px) {
.navbar {
padding: 0;
}
.navmenu .nav-link {
padding: 15px 15px;
font-size: .9rem;
}
}
@media (max-width: 350px) {
.navmenu .nav-link {
padding: 15px 10px;
}
}
::-webkit-scrollbar {
width: 0.7rem;
}
@media screen and (max-width: 700px) {
::-webkit-scrollbar {
max-width: 0.4rem !important;
}
}
::-webkit-scrollbar-track {
border: 0;
outline: 0;
background: #000749;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(31, 38, 135, 0.52);
}
::-webkit-scrollbar-thumb:hover {
background-color: #008A93;
}// !! IMPORTANT README:
// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.
/***********
INSTRUCTIONS:
- Select the project you would
like to complete from the dropdown
menu.
- Click the "RUN TESTS" button to
run the tests against the blank
pen.
- Click the "TESTS" button to see
the individual test cases.
(should all be failing at first)
- Start coding! As you fulfill each
test case, you will see them go
from red to green.
- As you start to build out your
project, when tests are failing,
you should get helpful errors
along the way!
************/
// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!
// Once you have read the above messages, you can delete all comments.
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.