rodude123/my-portfolio
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started work on off canvas navigation and standardized a few properties

Browse Source
This commit is contained in:
Rohit Pai
2021-07-19 20:00:26 +01:00
parent 447cc814e9
commit 50ab7f40be
4 changed files with 65 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/main.css
+46 -19
View File
@@ -17,7 +17,7 @@
--headingFS: 1.5rem;
}
/*** Standard Styles ****/
/*** Template Styles ****/
a:visited{
color: inherit;
@@ -44,52 +44,63 @@ a.btn, form input[type="submit"]{
text-decoration: none;
display: inline-block;
padding: 1rem 2rem;
border-radius: 10px;
border-radius: 0.625em;
border: 0.3215em solid var(--primaryDefault);
color: #FFFFFF;
}
a.btn:hover{
border: 0.3215em solid var(--primaryHover);
}
a.btnPrimary, form input[type="submit"]{
background: var(--primaryDefault);
color: #FFFFFF;
border: 5px solid var(--primaryDefault);
cursor: pointer;
}
a.btnOutline{
background: #FFFFFF;
color: var(--primaryDefault);
border: 5px solid var(--primaryDefault)
}
a.btnPrimary:hover, form input[type="submit"]:hover{
background: var(--primaryHover);
box-shadow: 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
border: 5px solid var(--primaryHover);
}
a.btnOutline:hover{
box-shadow: 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
border: 5px solid var(--primaryHover);
}
a.btn:active, form input[type="submit"]:active{
box-shadow: inset 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
padding: 0.8rem 1.8rem;
}
.boxShadowOut:hover{
box-shadow: 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
}
.boxShadowIn:active{
box-shadow: inset 0 6px 4px 0 hsla(0, 0%, 0%, 0.25);
}
.textShadow:hover{
text-shadow: 0 6px 4px hsla(0, 0%, 0%, 0.25);
}
/*** Standard Styles ****/
body{
font-family: Noto Sans KR, sans-serif;
font-style: normal;
font-weight: 500;
font-size: 18px;
font-size: 1.125rem;
line-height: 1.625rem;
}
header{
background: url("../imgs/hero.jpg") bottom left;
background-position-y: 700px;
background: url("../imgs/hero.jpg") no-repeat bottom;
background-size: cover;
height: 40%;
color: #FFFFFF;
backdrop-filter: grayscale(100%);
position: relative;
}
nav{
@@ -105,6 +116,7 @@ nav h1 {
nav a{
text-decoration: none;
color: #FFFFFF;
}
nav ul {
@@ -120,12 +132,12 @@ nav ul li {
list-style: none;
}
nav ul li:hover a::before, nav ul li a.active{
content: '<';
nav ul li span{
visibility: hidden;
}
nav ul li:hover a::after, nav ul li a.active{
content: '>';
nav ul li a:hover > span{
visibility: visible;
}
header div{
@@ -155,3 +167,18 @@ i.fa-chevron-down{
font-size: 3.75em;
margin: 1.5rem 0;
}
@media screen and (max-width: 75em) {
nav{
flex-direction: column;
justify-content: left;
align-items: end;
gap: 1em;
}
nav ul{
flex-direction: column;
padding: 0;
}
}
src/index.html
+17 -17
View File
@@ -16,16 +16,16 @@
<h1>rohit pai</h1>
</a>
<ul>
<li><a href="#about">about</a></li>
<li><a href="#curiculumvitae">cv</a></li>
<li><a href="#projects">projects</a></li>
<li><a href="#contact">contact</a></li>
<li><a href="#">blog</a></li>
<li><a href="#about" class="textShadow"><span>&lt;</span>about<span>&gt;</span></a></li>
<li><a href="#curiculumvitae" class="textShadow"><span>&lt;</span>cv<span>&gt;</span></a></li>
<li><a href="#projects" class="textShadow"><span>&lt;</span>projects<span>&gt;</span></a></li>
<li><a href="#contact" class="textShadow"><span>&lt;</span>contact<span>&gt;</span></a></li>
<li><a href="#" class="textShadow"><span>&lt;</span>blog<span>&gt;</span></a></li>
</ul>
</nav>
<div>
<h1>full stack developer_</h1>
<a href="" class="btn btnPrimary">Contact Me</a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">Contact Me</a>
<a href="#about"><i class="fas fa-chevron-down"></i></a>
</div>
</header>
@@ -38,7 +38,7 @@
exercitationem fugiat harum itaque laudantium placeat repellat suscipit velit! Aliquam architecto autem
beatae consectetur, dicta dolorum eligendi esse harum hic iure labore, libero molestias nemo neque nisi
nostrum odio sed sunt tempora totam voluptatem voluptatibus.</p>
<a href="other/rohitpaicv.pdf" class="btn btnPrimary" download="">Download CV</a></div>
<a href="other/rohitpaicv.pdf" class="btn btnPrimary boxShadowIn boxShadowOut" download="">Download CV</a></div>
<div id="curiculumvitae">
<h1>curriculum vitae</h1>
<div class="cvGrid">
@@ -61,8 +61,8 @@
iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit,
repudiandae.</p>
<div class="flexCol">
<a href="" class="btn btnPrimary">testing</a>
<a href="" class="btn btnOutline">testing</a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut">testing</a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut">testing</a>
</div>
</div>
</div>
@@ -75,8 +75,8 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, voluptates.</p>
</div>
<div>
<a href="" class="btn btnPrimary"></a>
<a href="" class="btn btnOutline"></a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
</div>
@@ -86,8 +86,8 @@
<p>Adipisci aspernatur consectetur debitis fugiat minus mollitia rem ullam, voluptate.</p>
</div>
<div>
<a href="" class="btn btnPrimary"></a>
<a href="" class="btn btnOutline"></a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
</div>
@@ -97,12 +97,12 @@
<p>Beatae culpa distinctio dolorum eius et fugit optio reiciendis soluta!</p>
</div>
<div>
<a href="" class="btn btnPrimary"></a>
<a href="" class="btn btnOutline"></a>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a>
<a href="" class="btn btnOutline boxShadowIn boxShadowOut"></a>
</div>
</div>
</div>
<a href="" class="btn btnPrimary"></a></div>
<a href="" class="btn btnPrimary boxShadowIn boxShadowOut"></a></div>
</div>
<div id="contact">
<div id="findme">
@@ -141,7 +141,7 @@
<div class="formControl">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea></div>
<input type="submit" class="btn btnPrimary" value="Say Hello">
<input type="submit" class="btn btnPrimary boxShadowIn boxShadowOut" value="Say Hello">
</form>
</div>
</div>