Updated button styles to have hover

dist/css/main.css

@@ -1 +1 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--primaryDefault:hsla(79, 62%, 51%, 1);--primaryHover:hsla(79, 75%, 41%, 1);--errorDefault:hsla(0, 62%, 51%, 1);--grey:hsla(0, 0%, 39%, 1);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}h1{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:2.25rem;line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:1.5rem;line-height:2.1875rem}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:18px;line-height:1.625rem}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--primaryDefault:hsla(79, 62%, 51%, 1);--primaryHover:hsla(79, 75%, 41%, 1);--errorDefault:hsla(0, 62%, 51%, 1);--grey:hsla(0, 0%, 39%, 1);--mutedGrey:hsla(0, 0%, 67%, 0.58);--titleFS:2.25rem;--generalFS:1.125rem;--headingFS:1.5rem}a:visited{color:inherit}h1,nav{font-family:Share Tech Mono,monospace;font-style:normal;font-weight:400;font-size:2.25rem;line-height:2.5625rem;text-transform:lowercase}h2{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:1.5rem;line-height:2.1875rem}a.btn,form input[type=submit]{text-decoration:none;display:inline-block;padding:1rem 2rem;border-radius:10px}a.btnPrimary{background:var(--primaryDefault);color:#fff;border:5px solid var(--primaryDefault)}a.btnOutline{background:#fff;color:var(--primaryDefault);border:5px solid var(--primaryDefault)}form input[type=submit]{border:none;cursor:pointer}a.btnPrimary:hover,form input[type=submit]:hover{background:var(--primaryHover);box-shadow:0 6px 4px 0 hsla(0,0%,0%,.25);border:5px solid var(--primaryHover)}a.btnOutline:hover{box-shadow:0 6px 4px 0 hsla(0,0%,0%,.25);border:5px solid var(--primaryHover)}body{font-family:Noto Sans KR,sans-serif;font-style:normal;font-weight:500;font-size:18px;line-height:1.625rem}header{background:url(../imgs/hero.jpg) bottom left;background-position-y:700px;background-size:cover;height:40%;color:#fff;backdrop-filter:grayscale(100%)}nav{display:flex;flex-direction:row;justify-content:space-between;padding:.25em}nav h1{margin:0}nav a{text-decoration:none}nav ul{display:flex;flex-direction:row;gap:1em;margin:0;justify-content:right;align-items:flex-end}nav ul li{list-style:none}nav ul li a.active,nav ul li:hover a::before{content:'<'}nav ul li a.active,nav ul li:hover a::after{content:'>'}header div{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:10em}header div .btn{margin:2em 0}header div button{background:0 0;border:none;display:inline-block;text-align:center;text-decoration:none;font-size:2rem;cursor:pointer}i.fa-chevron-down{color:var(--mutedGrey);font-size:3.75em;margin:1.5rem 0}

dist/imgs/blog.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14.625c0 .484-.387.875-.864.875h-5.273c-.477 0-.863-.392-.863-.875s.387-.875.863-.875h5.272c.478 0 .865.391.865.875zm-6.191-4.375h2.466c.448 0 .809-.392.809-.875s-.361-.875-.81-.875h-2.465c-.447 0-.809.392-.809.875s.362.875.809.875zm14.691 1.75c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.039c0-.383-.311-.692-.691-.692h-1.138c-.583 0-.69-.446-.69-.996-.001-2.36-1.91-4.273-4.265-4.273h-2.952c-2.355 0-4.264 1.913-4.264 4.272v5.455c0 2.36 1.909 4.273 4.264 4.273h5.474c2.353 0 4.262-1.913 4.262-4.272v-3.767z"/></svg>

dist/imgs/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13.718 10.528c0 .792-.268 1.829-.684 2.642-1.009 1.98-3.063 1.967-3.063-.14 0-.786.27-1.799.687-2.58 1.021-1.925 3.06-1.624 3.06.078zm10.282 1.472c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-1.194c0-3.246-2.631-5.601-6.256-5.601-4.967 0-7.744 3.149-7.744 7.073 0 3.672 2.467 6.517 7.024 6.517 2.52 0 4.124-.726 5.122-1.288l-.687-.991c-1.022.593-2.251 1.136-4.256 1.136-3.429 0-5.733-2.199-5.733-5.473 0-5.714 6.401-6.758 9.214-5.071 2.624 1.642 2.524 5.578.582 7.083-1.034.826-2.199.799-1.821-.756 0 0 1.212-4.489 1.354-4.975h-1.364l-.271.952c-.278-.785-.943-1.295-1.911-1.295-2.018 0-3.722 2.19-3.722 4.783 0 1.73.913 2.804 2.38 2.804 1.283 0 1.95-.726 2.364-1.373-.3 2.898 5.725 1.557 5.725-3.525z"/></svg>

dist/imgs/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm2.218 18.616c-.354.069-.468-.149-.468-.336v-1.921c0-.653-.229-1.079-.481-1.296 1.56-.173 3.198-.765 3.198-3.454 0-.765-.273-1.389-.721-1.879.072-.177.312-.889-.069-1.853 0 0-.587-.188-1.923.717-.561-.154-1.159-.231-1.754-.234-.595.003-1.193.08-1.753.235-1.337-.905-1.925-.717-1.925-.717-.379.964-.14 1.676-.067 1.852-.448.49-.722 1.114-.722 1.879 0 2.682 1.634 3.282 3.189 3.459-.2.175-.381.483-.444.936-.4.179-1.413.488-2.037-.582 0 0-.37-.672-1.073-.722 0 0-.683-.009-.048.426 0 0 .46.215.777 1.024 0 0 .405 1.25 2.353.826v1.303c0 .185-.113.402-.462.337-2.782-.925-4.788-3.549-4.788-6.641 0-3.867 3.135-7 7-7s7 3.133 7 7c0 3.091-2.003 5.715-4.782 6.641z"/></svg>

dist/imgs/instagram.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.829 6.302c-.738-.034-.96-.04-2.829-.04s-2.09.007-2.828.04c-1.899.087-2.783.986-2.87 2.87-.033.738-.041.959-.041 2.828s.008 2.09.041 2.829c.087 1.879.967 2.783 2.87 2.87.737.033.959.041 2.828.041 1.87 0 2.091-.007 2.829-.041 1.899-.086 2.782-.988 2.87-2.87.033-.738.04-.96.04-2.829s-.007-2.09-.04-2.828c-.088-1.883-.973-2.783-2.87-2.87zm-2.829 9.293c-1.985 0-3.595-1.609-3.595-3.595 0-1.985 1.61-3.594 3.595-3.594s3.595 1.609 3.595 3.594c0 1.985-1.61 3.595-3.595 3.595zm3.737-6.491c-.464 0-.84-.376-.84-.84 0-.464.376-.84.84-.84.464 0 .84.376.84.84 0 .463-.376.84-.84.84zm-1.404 2.896c0 1.289-1.045 2.333-2.333 2.333s-2.333-1.044-2.333-2.333c0-1.289 1.045-2.333 2.333-2.333s2.333 1.044 2.333 2.333zm-2.333-12c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.958 14.886c-.115 2.545-1.532 3.955-4.071 4.072-.747.034-.986.042-2.887.042s-2.139-.008-2.886-.042c-2.544-.117-3.955-1.529-4.072-4.072-.034-.746-.042-.985-.042-2.886 0-1.901.008-2.139.042-2.886.117-2.544 1.529-3.955 4.072-4.071.747-.035.985-.043 2.886-.043s2.14.008 2.887.043c2.545.117 3.957 1.532 4.071 4.071.034.747.042.985.042 2.886 0 1.901-.008 2.14-.042 2.886z"/></svg>

dist/imgs/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"/></svg>

dist/imgs/phone.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3.445 17.827c-3.684 1.684-9.401-9.43-5.8-11.308l1.053-.519 1.746 3.409-1.042.513c-1.095.587 1.185 5.04 2.305 4.497l1.032-.505 1.76 3.397-1.054.516z"/></svg>

dist/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><header><nav><a href="/"><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></ul></nav><div><h1>full stack developer</h1><a href="" class="btn btnPrimary">Contact Me</a> <button><i class="fas fa-chevron-down"></i></button></div></header><main><div id="about"><h1>about</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex 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><div id="curiculumvitae"><h1>curriculum vitae</h1><div class="cvGrid"><div><h2>Education</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!</div></div><div><h2>Work</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!</div></div></div></div><div id="projects"><div class="mainProj"><h1>project title to be generated</h1><div><img src="" alt=""><div class="flexRow"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque iure iusto libero molestias nobis nostrum placeat praesentium quia quo reprehenderit, repudiandae.</p><div class="flexCol"><a href="" class="btn btnPrimary"></a> <a href="" class="btn btnOutline"></a></div></div></div></div><div class="otherProj"><h1>other projects</h1><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><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></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><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></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><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></div></div></div><a href="" class="btn btnPrimary"></a></div></div><div id="contact"><div id="findme"><h1>find me</h1><div class="flexRow socialIcons"><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div></div><img src="" alt="" class="profile"></div><div id="sayhello"><h1>say hello</h1><form action="" id="contactForm"><div class="flName"><div class="formControl"><label for="fName">First Name</label> <input type="text" name="fName" id="fName"></div><div class="formControl"><label for="lName">Last Name</label> <input type="text" name="lName" id="lName"></div></div><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><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"></form></div></div><footer class="flexRow"><p>&copy; 2021 Rohit Pai all rights reserved</p><button class="goBackToTop"></button></footer></main></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/main.css"><script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script></head><body><header><nav><a href="/"><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></ul></nav><div><h1>full stack developer_</h1><a href="" class="btn btnPrimary">Contact Me</a> <a href="#about"><i class="fas fa-chevron-down"></i></a></div></header><main><div id="about"><h1>about</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis dolore, illum minus molestias officiis quidem similique ut. Autem consectetur eum, fugit illum ipsam laudantium magnam magni minima nesciunt numquam officia, soluta unde, voluptates! Aliquid aut, beatae dignissimos, dolorem ex 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><div id="curiculumvitae"><h1>curriculum vitae</h1><div class="cvGrid"><div><h2>Education</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem ipsum nobis officia sequi. Beatae hic molestiae quibusdam repellendus vero voluptatem!</div></div><div><h2>Work</h2><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam atque blanditiis doloribus labore minima odio recusandae tempore. Totam, ut!</div></div></div></div><div id="projects"><div class="mainProj"><h1>project title to be generated</h1><div><img src="" alt=""><div class="flexRow"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorem dolores esse itaque 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></div></div></div></div><div class="otherProj"><h1>other projects</h1><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><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></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><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></div></div></div><div class="oProjGrid"><img src="" alt=""><div class="flexCol"><div><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></div></div></div><a href="" class="btn btnPrimary"></a></div></div><div id="contact"><div id="findme"><h1>find me</h1><div class="flexRow socialIcons"><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div><div><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></div></div><img src="" alt="" class="profile"></div><div id="sayhello"><h1>say hello</h1><form action="" id="contactForm"><div class="flName"><div class="formControl"><label for="fName">First Name</label> <input type="text" name="fName" id="fName"></div><div class="formControl"><label for="lName">Last Name</label> <input type="text" name="lName" id="lName"></div></div><div class="formControl"><label for="email">Email</label> <input type="email" id="email" name="email"></div><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"></form></div></div><footer class="flexRow"><p>&copy; 2021 Rohit Pai all rights reserved</p><button class="goBackToTop"></button></footer></main></body></html>

src/css/main.css

@@ -9,6 +9,7 @@
     --primaryHover: hsla(79, 75%, 41%, 1);
     --errorDefault: hsla(0, 62%, 51%, 1);
     --grey: hsla(0, 0%, 39%, 1);
+    --mutedGrey: hsla(0, 0%, 67%, 0.58);
 
     /* font sizes */
     --titleFS: 2.25rem;
@@ -16,7 +17,13 @@
     --headingFS: 1.5rem;
 }
 
-h1{
+/*** Standard Styles ****/
+
+a:visited{
+    color: inherit;
+}
+
+h1, nav{
     font-family: Share Tech Mono, monospace;
     font-style: normal;
     font-weight: normal;
@@ -33,6 +40,44 @@ h2{
     line-height: 2.1875rem;
 }
 
+a.btn, form input[type="submit"]{
+    text-decoration: none;
+    display: inline-block;
+    padding: 1rem 2rem;
+    border-radius: 10px;
+}
+a.btnPrimary{
+    background: var(--primaryDefault);
+    color: #FFFFFF;
+    border: 5px solid var(--primaryDefault)
+}
+
+a.btnOutline{
+    background: #FFFFFF;
+    color: var(--primaryDefault);
+    border: 5px solid var(--primaryDefault)
+}
+
+form input[type="submit"]{
+    border: none;
+    cursor: pointer;
+}
+
+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{
+
+}
+
 body{
     font-family: Noto Sans KR, sans-serif;
     font-style: normal;
@@ -40,3 +85,80 @@ body{
     font-size: 18px;
     line-height: 1.625rem;
 }
+
+header{
+    background: url("../imgs/hero.jpg") bottom left;
+    background-position-y: 700px;
+    background-size: cover;
+    height: 40%;
+    color:  #FFFFFF;
+    backdrop-filter: grayscale(100%);
+}
+
+nav{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0.25em;
+}
+
+nav h1 {
+    margin: 0;
+}
+
+nav a{
+    text-decoration: none;
+}
+
+nav ul {
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    margin: 0;
+    justify-content: right;
+    align-items: flex-end;
+}
+
+nav ul li {
+    list-style: none;
+}
+
+nav ul li:hover a::before, nav ul li a.active{
+    content: '<';
+}
+
+nav ul li:hover a::after, nav ul li a.active{
+    content: '>';
+}
+
+header div{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding-top: 10em;
+}
+
+header div .btn {
+    margin: 2em 0;
+}
+
+header div button{
+    background: none;
+    border: none;
+    display: inline-block;
+    text-align: center;
+    text-decoration: none;
+    font-size: 2rem;
+    cursor: pointer;
+}
+
+i.fa-chevron-down{
+    color: var(--mutedGrey);
+    font-size: 3.75em;
+    margin: 1.5rem 0;
+}
+
+
+
+

src/index.html

@@ -24,9 +24,9 @@
             </ul>
         </nav>
         <div>
-            <h1>full stack developer</h1>
+            <h1>full stack developer_</h1>
             <a href="" class="btn btnPrimary">Contact Me</a>
-                <button><i class="fas fa-chevron-down"></i></button>
+            <a href="#about"><i class="fas fa-chevron-down"></i></a>
         </div>
     </header>
     <main>
@@ -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" 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"></a>
+                            <a href="" class="btn btnPrimary">testing</a>
-                            <a href="" class="btn btnOutline"></a>
+                            <a href="" class="btn btnOutline">testing</a>
                         </div>
                     </div>
                 </div>