adding svg icon links, changes for searchable effects on cards
This commit is contained in:
Michael
parent
e4e7ce7fea
commit
b55c979231
14
css/home.css
14
css/home.css
|
|
@ -9,6 +9,9 @@ html
|
|||
/* NAVIGATION BAR */
|
||||
.nav_bar
|
||||
{
|
||||
padding-top: 1rem;
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
display: flex;
|
||||
height: 30%;
|
||||
width: 100vw;
|
||||
|
|
@ -21,7 +24,14 @@ html
|
|||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav_left_item
|
||||
.nav_right_item
|
||||
{
|
||||
|
||||
background: none;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
.nav_right_item > img
|
||||
{
|
||||
min-height: 60px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -19,46 +19,10 @@
|
|||
id="nav_left_holder"
|
||||
class="nav_left_holder"
|
||||
>
|
||||
<button
|
||||
id="button1"
|
||||
class="banner_button"
|
||||
hx-get="PATH TO MORE INFO"
|
||||
hx-target="#core_container"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<p>About Me</p>
|
||||
</button>
|
||||
<button id="button1"class="nav_left_item"<p>About Me</p></button>
|
||||
<button id="button2"class="nav_left_item"><p>App Developement</p></button>
|
||||
<button id="button3"class="nav_left_item"><p>App Deployments</p></button>
|
||||
|
||||
<button
|
||||
id="button2"
|
||||
class="banner_button"
|
||||
hx-get="PATH TO MORE INFO"
|
||||
hx-target="#core_container"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<p>App Developement</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="button3"
|
||||
class="nav_left_item"
|
||||
hx-get="PATH TO MORE INFO"
|
||||
hx-target="#core_container"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<p>App Deployments</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="button4"
|
||||
class="banner_button"
|
||||
hx-get="PATH TO MORE INFO"
|
||||
hx-target="#core_container"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<p>Thanks To</p>
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="search"
|
||||
class="search_field"
|
||||
|
|
@ -95,24 +59,12 @@
|
|||
<img src="../img/linkedin.svg" alt="Find me on Linkedin">
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="button3"
|
||||
class="nav_right_item"
|
||||
hx-get="PATH TO MORE INFO"
|
||||
hx-target="#core_container"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<p>Resume</p>
|
||||
<button id="button3"class="nav_right_item">
|
||||
<img src="../img/resume.svg" alt="Download my Resume!">
|
||||
</button>
|
||||
|
||||
<button
|
||||
id="button4"
|
||||
class="banner_button"
|
||||
hx-get="PATH TO MORE INFO"
|
||||
hx-target="#core_container"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<p>Contact</p>
|
||||
<button id="button4"class="nav_right_item">
|
||||
<img src="../img/contact.svg" alt="Let's talk!">
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
|
@ -122,7 +74,15 @@
|
|||
|
||||
<!--Body Area -->
|
||||
<section
|
||||
id=#core_container
|
||||
></section>
|
||||
id=#card_container
|
||||
>
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card_image"></div>
|
||||
<div class="card_title"></div>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
15
img/contact.svg
Normal file
15
img/contact.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="47.162" height="47.999" viewBox="0 0 47.162 47.999">
|
||||
<g>
|
||||
<path d="M31.846,0A15.332,15.332,0,0,0,16.532,15.314c0,.059.006.117.009.176-.406-.033-.813-.063-1.227-.063A15.331,15.331,0,0,0,0,30.741V47.272a.727.727,0,0,0,.384.641A.711.711,0,0,0,.728,48a.731.731,0,0,0,.4-.121L7.3,43.784A15.309,15.309,0,0,0,30.629,30.741c0-.061-.009-.119-.01-.18.4.039.813.066,1.228.066a15.238,15.238,0,0,0,8.017-2.271l6.168,4.1a.734.734,0,0,0,.4.121.714.714,0,0,0,.344-.086.729.729,0,0,0,.384-.641V15.313A15.335,15.335,0,0,0,31.846,0ZM15.314,44.6A13.8,13.8,0,0,1,7.69,42.31a.73.73,0,0,0-.8,0L1.454,45.917V30.741A13.859,13.859,0,1,1,15.314,44.6ZM45.705,30.49l-5.433-3.6a.72.72,0,0,0-.4-.123.727.727,0,0,0-.4.121,13.79,13.79,0,0,1-7.624,2.291,12.078,12.078,0,0,1-1.311-.08A15.334,15.334,0,0,0,18,15.68c-.007-.121-.019-.242-.019-.365a13.86,13.86,0,0,1,27.719,0V30.49Z" fill="#1a171b"/>
|
||||
<path d="M23.072,30.013H15.313a.728.728,0,1,0,0,1.456h7.759a.728.728,0,0,0,0-1.456Z" fill="#1a171b"/>
|
||||
<path d="M7.556,31.468h3.878a.728.728,0,0,0,0-1.456H7.556a.728.728,0,1,0,0,1.456Z" fill="#1a171b"/>
|
||||
<path d="M23.072,23.226H19.581a.727.727,0,1,0,0,1.454h3.491a.727.727,0,0,0,0-1.454Z" fill="#1a171b"/>
|
||||
<path d="M7.556,24.679H15.7a.727.727,0,0,0,0-1.454H7.556a.727.727,0,1,0,0,1.454Z" fill="#1a171b"/>
|
||||
<path d="M19.192,36.8H7.556a.728.728,0,1,0,0,1.456H19.192a.728.728,0,1,0,0-1.456Z" fill="#1a171b"/>
|
||||
<path d="M33.543,15.314a.729.729,0,0,0-.728-.727H26.027a.727.727,0,1,0,0,1.454h6.788A.727.727,0,0,0,33.543,15.314Z" fill="#1a171b"/>
|
||||
<path d="M39.6,14.587H36.7a.727.727,0,1,0,0,1.454H39.6a.727.727,0,0,0,0-1.454Z" fill="#1a171b"/>
|
||||
<path d="M29.178,8.525A.728.728,0,0,0,28.45,7.8H24.088a.728.728,0,1,0,0,1.456H28.45A.729.729,0,0,0,29.178,8.525Z" fill="#1a171b"/>
|
||||
<path d="M39.6,7.8H32.33a.728.728,0,0,0,0,1.456H39.6a.728.728,0,0,0,0-1.456Z" fill="#1a171b"/>
|
||||
<path d="M39.6,21.376H31.847a.727.727,0,1,0,0,1.454H39.6a.727.727,0,0,0,0-1.454Z" fill="#1a171b"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
1
img/resume.svg
Normal file
1
img/resume.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><title>PROFILE</title><path d="M30.13,51.31h20a1.75,1.75,0,0,0,1.75-1.75V44.44a11.067,11.067,0,0,0-4.4-8.832,9.977,9.977,0,1,0-14.713,0A11.08,11.08,0,0,0,28.38,44.44v5.12A1.75,1.75,0,0,0,30.13,51.31Zm10-28.894a6.477,6.477,0,1,1-6.477,6.477A6.485,6.485,0,0,1,40.126,22.417ZM31.88,44.44a7.576,7.576,0,0,1,3.87-6.594,9.857,9.857,0,0,0,8.754,0A7.56,7.56,0,0,1,48.38,44.44v3.37H31.88Z"/><path d="M112.654,4.75H15.346A1.75,1.75,0,0,0,13.6,6.5v115a1.75,1.75,0,0,0,1.75,1.75h97.308a1.75,1.75,0,0,0,1.75-1.75V6.5A1.75,1.75,0,0,0,112.654,4.75Zm-1.75,115H17.1V8.25H110.9Z"/><path d="M26.346,65.75h75.308a1.75,1.75,0,1,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M26.346,80.194h75.308a1.75,1.75,0,0,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M26.346,109.083h75.308a1.75,1.75,0,0,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M26.346,94.639h75.308a1.75,1.75,0,1,0,0-3.5H26.346a1.75,1.75,0,0,0,0,3.5Z"/><path d="M64,22.417h37.654a1.75,1.75,0,0,0,0-3.5H64a1.75,1.75,0,0,0,0,3.5Z"/><path d="M64,36.861h37.654a1.75,1.75,0,0,0,0-3.5H64a1.75,1.75,0,0,0,0,3.5Z"/><path d="M64,51.306h37.654a1.75,1.75,0,0,0,0-3.5H64a1.75,1.75,0,0,0,0,3.5Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in a new issue