all HTML done. Need css polishing though
This commit is contained in:
parent
2a7085d4ca
commit
7c01dcef6f
|
@ -0,0 +1,19 @@
|
|||
<div class="container">
|
||||
ALEX
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
vertical-align: bottom;
|
||||
align-self: flex-end;
|
||||
|
||||
// font settings
|
||||
font-size: 80mm;
|
||||
color: #e4e4e4;
|
||||
|
||||
transform: translate(32%, -32%) rotate(-90deg);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,33 @@
|
|||
<div class="container">
|
||||
<div/>
|
||||
<div/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
transform: translate(31mm, 31mm) rotate(-45deg);
|
||||
display: grid;
|
||||
justify-self: end;
|
||||
vertical-align: bottom;
|
||||
align-self: flex-end;
|
||||
|
||||
z-index: 0;
|
||||
|
||||
> div:nth-child(1) {
|
||||
padding-top: 5mm;
|
||||
//border-bottom: #4472c4 dashed 2mm;
|
||||
|
||||
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
|
||||
background-position: top;
|
||||
background-size: 6mm 1.5mm;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
background-color: #2f5496;
|
||||
width: 100mm;
|
||||
height: 30mm;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,33 @@
|
|||
<div class="container">
|
||||
<div/>
|
||||
<div/>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
position: absolute;
|
||||
transform: translate(-31.9mm, 0mm) rotate(-45deg);
|
||||
display: grid;
|
||||
justify-self: start;
|
||||
vertical-align: top;
|
||||
align-self: flex-start;
|
||||
|
||||
z-index: 0;
|
||||
|
||||
> div:nth-child(1) {
|
||||
background-color: #2f5496;
|
||||
width: 100mm;
|
||||
height: 15mm;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
padding-top: 5mm;
|
||||
//border-bottom: #4472c4 dashed 2mm;
|
||||
|
||||
background-image: linear-gradient(to right, #4472c4 70%, rgba(255,255,255,0) 0%);
|
||||
background-position: bottom;
|
||||
background-size: 6mm 1.5mm;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,26 +1,40 @@
|
|||
<script>
|
||||
// Left side
|
||||
import NameAndImage from "../Comps/NameAndImage.svelte";
|
||||
import ShortProfile from "../Comps/ShortProfile.svelte"
|
||||
import CombinedContacts from "../Comps/CombinedContacts.svelte"
|
||||
import LinkedInQR from "../Comps/LinkedInQR.svelte";
|
||||
|
||||
// Right side
|
||||
import Profile from "../Comps/Profile.svelte";
|
||||
import Education from "../Comps/Education.svelte";
|
||||
import Experience from "../Comps/Experience.svelte";
|
||||
|
||||
// Decorations
|
||||
import LeftTopDecor from "../Comps/LeftTopDecor.svelte";
|
||||
import BottomRightDecor from "../Comps/BottomRightDecor.svelte";
|
||||
import AlexWatermark from "../Comps/AlexWatermark.svelte";
|
||||
</script>
|
||||
|
||||
<div class="cv-container-container include-in-print">
|
||||
<div class="cv-container">
|
||||
<div class="cv-container sections">
|
||||
<div id="left-section">
|
||||
<NameAndImage/>
|
||||
<ShortProfile/>
|
||||
<CombinedContacts/>
|
||||
<LinkedInQR/>
|
||||
<LeftTopDecor/>
|
||||
<BottomRightDecor/>
|
||||
<div>
|
||||
<NameAndImage/>
|
||||
<ShortProfile/>
|
||||
<CombinedContacts/>
|
||||
<LinkedInQR/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-section">
|
||||
<Profile/>
|
||||
<Experience/>
|
||||
<Education/>
|
||||
<AlexWatermark/>
|
||||
<div>
|
||||
<Profile/>
|
||||
<Experience/>
|
||||
<Education/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -35,7 +49,7 @@
|
|||
}
|
||||
|
||||
.cv-container-container * {
|
||||
color: black;
|
||||
color: black; // Set all text black
|
||||
}
|
||||
|
||||
.cv-container {
|
||||
|
@ -46,7 +60,6 @@
|
|||
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: auto;
|
||||
}
|
||||
|
||||
|
@ -55,25 +68,52 @@
|
|||
print-color-adjust:exact !important;
|
||||
}}
|
||||
|
||||
#left-section{
|
||||
background-color: #bdd6ee;
|
||||
width: calc(100% / 3 * 1);
|
||||
left: 0;
|
||||
.sections {
|
||||
> div {
|
||||
display: grid;
|
||||
z-index: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
// Needed to cuttoff the extra decoration
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
padding-top: 20mm;
|
||||
padding-bottom: 20mm;
|
||||
}
|
||||
#left-section{
|
||||
background-color: #bdd6ee;
|
||||
width: calc(100% / 3 * 1);
|
||||
|
||||
#right-section{
|
||||
width: calc(100% / 3 * 2);
|
||||
> div {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
left: 0;
|
||||
|
||||
padding-top: 30mm;
|
||||
padding-bottom: 20mm;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
padding-top: 30mm;
|
||||
padding-bottom: 20mm;
|
||||
}
|
||||
}
|
||||
|
||||
#right-section{
|
||||
width: calc(100% / 3 * 2);
|
||||
|
||||
padding-top: 30mm;
|
||||
padding-bottom: 20mm;
|
||||
|
||||
> div {
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
|
||||
left: 0;
|
||||
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
padding-top: 30mm;
|
||||
padding-bottom: 20mm;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue