Currently, I am working on a prototype portfolio site for a school project. My strength lies in the front end development area. Interestingly, when I check the site normally, there seems to be no padding or margin visible. However, upon using inspect element and resizing the window down to the breakpoint, it appears much more appealing with the appropriate margins, padding, and shadows.
CSS
.neumorphicDefault {
background-color: transparent;
box-shadow: 0.5rem 0.5rem 1rem #d1d9e6,
-0.5rem -0.5rem 1rem #ffffff;
text-decoration: none;
margin: 1rem;
text-align: center;
}
.neumorphicActive {
background-color: transparent;
box-shadow: inset 5px 5px 10px #d1d9e6,
inset -5px -5px 10px #ffffff;
text-decoration: none;
margin: 1rem;
padding: 1rem;
}
<!-- HTML -->
<div class="container-fluid" id="cover">
<!-- NAVIGATION -->
<div class="d-flex justify-content-center">
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<i class="fa-solid fa-burger align-middle"></i>
</span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link rounded-pill text-custom-gray neumorphicActive" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#projects">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link rounded-pill text-custom-gray neumorphicDefault" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- WELCOME SECTION -->
<div class="container-fluid ms-lg-5 mt-5 p-sm-5 welcomeSection">
<div class="row">
<div class="col-8">
<div class="text-custom-gray m-1" style="font-size: 5vw"> Hello, I am <span id="nameSpan">Chandler Renteria</span></div>
<div class="text-custom-gray m-1" style="font-size: 5vw"> Full-Stack Developer</div>
<div class="d-flex">
<a class="rounded-pill ms-0 mw-25 text-custom-gray neumorphicDefault" href="#portfolio">See My Work</a>
<a class="rounded-pill mw-50 text-custom-gray neumorphicDefault" href="#contact">Start A Conversation</a>
</div>
</div>
<div class="col welcomeGraphic">
<div class="graphic w-100">Placeholder</div>
</div>
</div>
</div>
</div>