aboutsummaryrefslogtreecommitdiff
path: root/resume-v1.1/src
diff options
context:
space:
mode:
authorSyndamia <kamen.d.mladenov@protonmail.com>2021-08-19 13:52:27 +0300
committerSyndamia <kamen.d.mladenov@protonmail.com>2021-08-19 13:52:27 +0300
commitab1215fb6367c1d4b4e11aba672d992147451644 (patch)
tree6bd41bf100b5c3715078c2e716e1cbea4b3c696f /resume-v1.1/src
parentd7fad2b6019eea264c3bd33b7098ba27b95cdcf8 (diff)
downloadcss-snippets-ab1215fb6367c1d4b4e11aba672d992147451644.tar
css-snippets-ab1215fb6367c1d4b4e11aba672d992147451644.tar.gz
css-snippets-ab1215fb6367c1d4b4e11aba672d992147451644.zip
Renamed resume to resume-v1 and added resume-v1.1HEADmain
Diffstat (limited to 'resume-v1.1/src')
-rw-r--r--resume-v1.1/src/resume.html210
-rw-r--r--resume-v1.1/src/sample-profile-picture.jpegbin0 -> 432231 bytes
-rw-r--r--resume-v1.1/src/style.css217
3 files changed, 427 insertions, 0 deletions
diff --git a/resume-v1.1/src/resume.html b/resume-v1.1/src/resume.html
new file mode 100644
index 0000000..56aec74
--- /dev/null
+++ b/resume-v1.1/src/resume.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="./style.css">
+ <title>Resume - Gosho Petrov</title>
+</head>
+
+<body>
+ <main class="page">
+ <article class="content">
+ <summary id="about">
+ <div id="data">
+ <div id="name">
+ Ivan Mishov
+ </div>
+ <div id="text-data">
+ <div class="info">
+ <div class="stacked-info">
+ <b>Date of birth</b><br>
+ 06.11.1998
+ </div>
+ <div class="stacked-info">
+ <b>Address</b><br>
+ <a href="https://goo.gl/maps/wz1R2DsZEVcGhEkw7" target="_blank">
+ Tupac Lane, Las Vegas, USA
+ </a>
+ </div>
+ <div class="stacked-info">
+ <b>Phone Number</b><br>
+ <a href="tel:(999)888-8888">
+ (999)888-8888
+ </a>
+ </div>
+ </div>
+ <div class="info">
+ <div class="stacked-info">
+ <b>Email</b><br>
+ <a href="mailto:bill.gates@microsoft.com" target="_blank">
+ im@dumbass.com
+ </a>
+ </div>
+ <div class="stacked-info">
+ <b>GitHub account</b><br>
+ <a href="https://github.com/torvalds" target="_blank">
+ github.com/im
+ </a>
+ </div>
+ <div class="stacked-info">
+ <b>LinkedIn profile</b><br>
+ <a href="https://www.linkedin.com/in/wozniaksteve/">
+ linkedin.com/im
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <img id="picture-data" src="./sample-profile-picture.jpeg">
+ </div>
+ </summary>
+ <section class="info-section">
+ <div class="section-head">
+ <div class="section-title">
+ Profile
+ </div>
+ <hr>
+ </div>
+ <div class="card end-card">
+ <div class="card-content">
+ “Some quotations," said Zellaby, "are greatly improved by lack of context.”
+ </div>
+ </div>
+ </section>
+ <section class="info-section">
+ <div class="section-head">
+ <div class="section-title">
+ Education
+ </div>
+ <hr>
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 2000<br>↦ 2004
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ <a href="https://memeuniversity.lol/" target="_blank">Meme University</a> - More value than Harvard online
+ </div>
+ Go from Meme Newbie to a Meme Lord!
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1994<br>↦ 2004
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Imaginary University
+ </div>
+ Yep, it's true.
+ </div>
+ </div>
+ <div class="card end-card">
+ <div class="card-title">
+ 1994<br>↦ 2004
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ <a href="https://www.nipissingu.ca/" target="_blank">The coolest university</a>
+ </div>
+ I'll have you know, I gratuated top of my class.
+ </div>
+ </div>
+ <div class="section-head">
+ <div class="section-title">
+ Experience
+ </div>
+ <hr>
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1990<br>↦ now
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ <a href="https://en.wikipedia.org/wiki/Megamind" target="_blank">Megamind Inc.</a>
+ </div>
+ We put the Mega inside your mind
+ </div>
+ </div>
+ <div class="card end-card">
+ <div class="card-title">
+ 1890<br>↦ 1990
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Intergalatical Time Federation
+ </div>
+ Learned how to control time.
+ </div>
+ </div>
+ </section>
+ <section class="info-section">
+ <div class="section-head">
+ <div class="section-title">
+ Projects
+ </div>
+ <hr>
+ </div>
+ <div class="card">
+ <div class="card-title">
+ 1990<br>↦ now
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Yo mama
+ </div>
+ HA, goteem
+ </div>
+ </div>
+ <div class="card end-card">
+ <div class="card-title">
+ 1989<br>↦ 1999
+ </div>
+ <div class="card-content">
+ <div class="card-sub-title">
+ Crime
+ </div>
+ </div>
+ </div>
+ <div class="section-head">
+ <div class="section-title">
+ Skills
+ </div>
+ <hr>
+ </div>
+ <div class="card">
+ <div class="card-content">
+ <table class="ratings">
+ <tr>
+ <td>Dumb</td>
+ <td>●●●●●</td>
+ <td>Other, Idk</td>
+ <td>●●●○○</td>
+ </tr>
+ <tr>
+ <td>Making normal static content</td>
+ <td>○○○○○</td>
+ <td>Writing</td>
+ <td>○○○○○</td>
+ </tr>
+ </table>
+ <br>
+ <table class="ratings">
+ <tr>
+ <td>Alzheimer</td>
+ <td>●●●●●</td>
+ <td>Alzheimer</td>
+ <td>●○○○○</td>
+ </tr>
+ </table>
+ </div>
+ </section>
+ </article>
+ </main>
+</body>
+
+</html>
diff --git a/resume-v1.1/src/sample-profile-picture.jpeg b/resume-v1.1/src/sample-profile-picture.jpeg
new file mode 100644
index 0000000..1aa4565
--- /dev/null
+++ b/resume-v1.1/src/sample-profile-picture.jpeg
Binary files differ
diff --git a/resume-v1.1/src/style.css b/resume-v1.1/src/style.css
new file mode 100644
index 0000000..82c6e1c
--- /dev/null
+++ b/resume-v1.1/src/style.css
@@ -0,0 +1,217 @@
+
+:root {
+ --font-color: #444;
+ --padding: .24in;
+ --picture-size: 10em;
+ --page-margin: 5mm;
+}
+
+* {
+ font-size: 19px;
+ font-family: sans-serif;
+}
+
+hr {
+ width: auto;
+ border: 1px solid var(--font-color);
+ margin: .9em 0;
+}
+
+body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background-color: white;
+}
+
+a, a:visited {
+ font-size: inherit;
+ color: #004080;
+}
+
+/* The whole page */
+
+.page {
+ width: 210mm;
+ height: 297mm;
+ margin: 0 auto;
+}
+
+.content {
+ width: calc(100% - 2 * var(--page-margin));
+ height: calc(100% - 2 * var(--page-margin));
+ border: 3px solid var(--font-color);
+ box-sizing: border-box;
+ padding: var(--padding);
+ margin: var(--page-margin);
+ display: flex;
+ flex-direction: column;
+}
+
+.content > * {
+ width: 100%;
+}
+
+/* About/Summary */
+
+#about {
+ display: flex;
+ width: 100%;
+ height: fit-content;
+ position: relative;
+}
+
+#data {
+ flex: 1;
+ height: var(--picture-size);
+ display: flex;
+ flex-direction: column;
+}
+
+#name {
+ font-size: 2.5em;
+ font-weight: bold;
+ margin-bottom: .2em;
+}
+
+#text-data {
+ font-size: .7em;
+ flex: 1;
+ display: flex;
+}
+
+.info {
+ flex: 1;
+ font-size: inherit;
+ display: flex;
+ flex-direction: column;
+}
+
+.info > * {
+ flex: 1;
+}
+
+.stacked-info {
+ font-size: inherit;
+ line-height: 1.3em;
+ margin-top: .8em;
+ border-left: 1px solid var(--font-color);
+ box-sizing: border-box;
+ padding: 0 1em;
+}
+
+.stacked-info:first-child {
+ margin-top: 0;
+}
+
+.stacked-info > b {
+ font-size: inherit;
+}
+
+#picture-data {
+ height: var(--picture-size);
+ width: var(--picture-size);
+}
+
+#picture-data > img {
+ width: var(--picture-size);
+ margin: auto 0;
+}
+
+/* Sections */
+
+.section-head {
+ margin: 0.5em 0;
+ display: flex;
+ align-items: center;
+}
+
+.section-title {
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+.section-head > hr {
+ flex: 1;
+ margin-left: 0.5em;
+}
+
+/* Card */
+
+.card {
+ width: 100%;
+ display: flex;
+ margin-bottom: 1em;
+}
+
+.card-title {
+ width: 15%;
+ padding-right: 0.5em;
+}
+
+.card-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.card-content > .card {
+ margin-top: 1em;
+}
+
+.card-content > .card > .card-title {
+ width: 24%;
+}
+
+.card-content > .card:first-child {
+ margin-top: 0;
+}
+
+.card-sub-title {
+ border-left: 3px solid var(--font-color);
+ padding-left: .5em;
+ font-weight: bold;
+ margin-bottom: .3em;
+}
+
+.end-card, .card:last-child {
+ margin-bottom: 0;
+}
+
+/* Rating */
+
+.ratings {
+ width: 100%;
+ border: none;
+ table-layout: fixed;
+ border-collapse: colapse;
+ border-spacing: 0;
+}
+
+.ratings td {
+ padding: 2px 0;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.ratings td:nth-child(2n) {
+ border-right: 1px solid black;
+}
+
+.ratings td:last-child {
+ border-right-width: 0;
+}
+
+/* Proper printing */
+
+@page {
+ size: A4;
+ margin: 5mm;
+}
+@media print {
+ html, body, .page, .content {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ }
+}
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 12:42:56 +0000