81 lines
2.1 KiB
Svelte
81 lines
2.1 KiB
Svelte
<script lang="ts"></script>
|
|
<div class="contactContainer">
|
|
<div class="contacts">
|
|
<div class="header"><img src="/profile_pic.jpg" alt="profile" class="profile" /></div>
|
|
<ul class="contact-list">
|
|
<li><i class="fas fa-at"></i> e-mail: <a href="mailto://gianmarco@pettinato.eu">gianmarco@pettinato.eu</a></li>
|
|
<li><i class="fab fa-telegram-plane"></i> telegram: <a href="https://t.me/jatus_93">@jatus_93</a></li>
|
|
<li><i class="fab fa-twitter"></i> twitter: <a href="https://twitter.com/jatus_93">@jatus_93</a></li>
|
|
<li><i class="fab fa-linkedin-in"></i> linkedin: <a href="https://www.linkedin.com/in/gianmarco-pettinato/">Gianmarco Pettinato</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<style lang="scss">
|
|
@import './static/colors.scss';
|
|
.contactContainer{
|
|
margin: auto;
|
|
background-color:$navajo-white;
|
|
border-radius: 10px;
|
|
width: 90%;
|
|
border-radius: 10px;
|
|
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
padding: 1vh;
|
|
}
|
|
|
|
.contacts{
|
|
background-color: $cultured;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
flex-wrap: wrap;
|
|
align-items: center ;
|
|
border-radius: 10px;
|
|
padding: 1vh;
|
|
background-color: $cultured;
|
|
border-style: solid;
|
|
border-width: 0.1px;
|
|
}
|
|
|
|
.contacts>ul{
|
|
list-style: none;
|
|
}
|
|
.contacts>ul>li{
|
|
text-align: start;
|
|
}
|
|
|
|
.profile{
|
|
border-radius: 50%;
|
|
width: 35vw;
|
|
max-width: 150px;
|
|
border: solid $rich-black-fogra-29 1px;
|
|
box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
-webkit-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
-moz-box-shadow: -1px 2px 2px -1px $rich-black-fogra-29;
|
|
|
|
}
|
|
|
|
a,a:visited{
|
|
// text-decoration: none;
|
|
color: $rich-black-fogra-29;
|
|
margin: 2px;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.contactContainer{
|
|
display: flex;
|
|
height: auto;
|
|
max-width: $cv-max-width;
|
|
width: 80vw;
|
|
}
|
|
|
|
.contacts{
|
|
width: 98%;
|
|
}
|
|
|
|
.contacts>ul{
|
|
margin: unset;
|
|
}
|
|
}
|
|
</style> |