diff --git a/ADF/LICENSE b/ADF/LICENSE new file mode 100644 index 0000000..8ba2564 --- /dev/null +++ b/ADF/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2015 Eliseo Papa + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/ADF/README.md b/ADF/README.md new file mode 100644 index 0000000..99d2d44 --- /dev/null +++ b/ADF/README.md @@ -0,0 +1,65 @@ +# markdown-cv + +A curriculum vitae maintained in plain text and rendered to HTML and PDF using CSS. + +For more details, see the [project page](http://elipapa.github.io/markdown-cv), or the blog post on [why I switched to markdown for my CV](http://elipapa.github.io/blog/why-i-switched-to-markdown-for-my-cv.html). + +*** + +## Customization + +Simply [fork the markdown-cv repo](https://github.com/elipapa/markdown-cv) + +![](https://help.github.com/assets/images/help/repository/fork_button.jpg) + +and edit the `index.md` file [directly in Github](https://help.github.com/articles/editing-files-in-your-repository/) + +![](https://help.github.com/assets/images/help/repository/edit-file-edit-button.png) + +adding your skills, jobs and education. + +![](https://help.github.com/assets/images/help/repository/edit-readme-light.png) + +## Distribution + +To transform your plain text CV into a beautiful and shareable HTML page, you have two options: + +### I. Use Github Pages to publish it online + +1. Delete the existing `gh-pages` branch from your fork. It will only contain this webpage. You can either use git or [the Github web interface](https://help.github.com/articles/creating-and-deleting-branches-within-your-repository/#deleting-a-branch). +2. Create a new branch called `gh-pages`. +3. Head to *yourusername*.github.io/markdown-cv to see your CV live. + +Any change you want to make to your CV from then on would have to be done on the `gh-pages` branch and will be immediately rendered by Github Pages. + +### II. Build it locally and print a PDF + +1. To [install jekyll](https://jekyllrb.com/docs/installation/), run `gem install bundler jekyll` from the command line. +3. [Clone](https://help.github.com/en/articles/cloning-a-repository) your fork of markdown-cv to your local machine. +3. Type `jekyll serve` to render your CV at http://localhost:4000. +4. You can edit the `index.md` file and see the changes live in your browser. +5. To print a PDF, press ⌘ + p. Print and web CSS media queries should take care of the styling. + +## Styling + +The included CSS will render your CV in two styles: +s +1. `kjhealy` the original default, inspired by [kjhealy's vita +template](https://github.com/kjhealy/kjh-vita). +2. `davewhipp` is a tweaked version of `kjhealy`, with bigger fonts and dates + right aligned. + +To change the default style, simply change the variable in the +`_config.yml` file. + +Any other styling is possible. More CSS style contributions and forks are welcome! + +### Author + +Eliseo Papa ([Twitter](http://twitter.com/elipapa)/[Github](http://github.com/elipapa)/[Website](https://elipapa.github.io)). + +![Eliseo Papa](https://s.gravatar.com/avatar/eae1f0c01afda2bed9ce9cb88f6873f6?s=100) + +### License + +[MIT License](https://github.com/elipapa/markdown-cv/blob/master/LICENSE) diff --git a/ADF/favicon.ico b/ADF/favicon.ico new file mode 100644 index 0000000..c3bca6c Binary files /dev/null and b/ADF/favicon.ico differ diff --git a/ADF/index.html b/ADF/index.html index 45ed24d..875d2fc 100644 --- a/ADF/index.html +++ b/ADF/index.html @@ -1,54 +1,173 @@ - - - - - - Slider - - - - - -
-
-
-

A.D. mood! make my life easier

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 🐄 -
-
-
-
-
-
-
-

jak se dneska máš pšouku?

-
-
-
-
- - - - - + + + + + Martin Fencl's CV | CV + + + + +
+
+

Martin Fencl

+

Software test developer, Python engineer, HW tester.

+ + + +
+ +
+ +


+


+ +

  + 

+ +


+ +

  + 

+ +


+ +

Currently

+ +

I work as a freelancer and I’m searching for interesting projects that I would enjoy.

+ +

Interest in

+ + + +

Education

+ +

2008-2012

+


+

Completion of the study program in the field of Electronics Mechanics

+ + +

2013-2018

+


+

Completion of the study program in the field of Applied Electrical Engineering

+ + +

2018-2020

+


+

Completion of the study program in the field of commercial electrical engineering

+ + +

Work Experience

+

2013-2013

+


+

IT service worker / support

+ + +

2016-2017

+


+

Development programmer - development department (internship)

+ + +

technologies / tools used:
+– LabView
+– Python

+ +

2017-2020

+


+

Development programmer - technology department (internship)

+ + +

technologies / tools used:
+– Git
+– LabVIEW
+– Python
+– Visual Basic for Applications (VBA)
+– Structured Text (ST)
+– 3D printing (SLA, DMLS)
+– Measuring and analysis technology

+ +

2017-2020

+


+

Software test engineer – DITET5 (Schweinfurth team for EMF projects)

+ + +

technologies / tools used:
+– Dspace SCALEXIO (rapid control prototyping (RCP) applications)
+– Exam (test extension/orchestrator)
+– Python

+ +

2020-

+


+

Software test developer

+ + +

technologies / tools used:
+– Apache Kafka (event streaming platform)
+– Python
+– Git
+– Flask, Flask-RestAPI
+– Django
+– Docker, Docker-compose
+– Helm, Skaffold
+– Kubernetes (and local minikube)

+ +
+ +
+ + + +
+
+ \ No newline at end of file diff --git a/ADF/media/davewhipp-print.css b/ADF/media/davewhipp-print.css new file mode 100644 index 0000000..79b3ddd --- /dev/null +++ b/ADF/media/davewhipp-print.css @@ -0,0 +1,194 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* end of reset */ + + + +body { + font: normal normal 400; + font-size: 12pt; + line-height: 1.35em; + /*also written as... font: normal normal 400 100%/1.5em;*/ + font-family: Avenir,Verdana,sans-serif; + /*margin-top: 1em; + margin-left: 1em;*/ +} + +p { + position: relative; + left: 25%; + margin-bottom: 0.2em; + margin-right: 0; + width: 60%; +} + +code { + font: normal normal; + font-size: 90%; + /*line-height: 1em;*/ + font-family: Monaco,Menlo,monospace,sans-serif; + color: #ccc; +} + +p code { + position: absolute; + text-align: right; + right: -20%; +} + + +ul { + position: relative; + left: 25%; + width: 75%; + margin-bottom: 1em; + /*margin-top: -0.5em;*/ +} + +/*uncomment to get dashes in the list*/ +/*li:before { + content: "-"; + position: relative; + left: -0.25em; +}*/ + +li { + /*second line indent*/ + padding-left: 1.25em; + text-indent: -1.25em; + /*color: #777;*/ +} + +li ul { + position: relative; + left: 0; + width: 100%; + margin-top: 0.25em; +} + +h1,h2,h3,h4 { + font-weight: 400; + font-family: Avenir,Cousine,Verdana,sans-serif; + width: 80%; +} + +h1 { + text-align: left; + font-size: 3em; + line-height: 1em; + position: relative; + left: 25%; +} + +h1+p { + /*subtitle*/ + font-style: italic; + font-size: 110%; +} + +h2 { + font-size: 1.1em; + color: #a00; + margin-top: 2em; + position: relative; + top: 1.2em; + text-align: right; + width: 20%; +} + + +h3 { + font-size: 1em; + line-height: 2em; + color: #ccc; + position: relative; + top: 1.6em; + text-align: right; + width: 20%; +} + +a { + color: inherit; + text-decoration:none +} + +a:hover { + color:#39f +} + +#webaddress { + margin-top: 1em; + position: relative; + left: 25%; + color: #ccc; + font-family: Monaco,Menlo,monospace,sans-serif; + font-size: 90%; +} + +#webaddress a { + text-decoration: none; +} + +em { + font-style: normal; + color: #2d4e5e +} + +strong { + font-weight: bold; +} + +#ghbutton { + display: none; + visibility: hidden; +} + + + diff --git a/ADF/media/davewhipp-screen.css b/ADF/media/davewhipp-screen.css new file mode 100644 index 0000000..adacc45 --- /dev/null +++ b/ADF/media/davewhipp-screen.css @@ -0,0 +1,195 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* end of reset */ + + + +body { + font: normal normal 400; + font-size: 100%; + line-height: 1.5em; + /*also written as... font: normal normal 400 100%/1.5em;*/ + font-family: Avenir,Verdana,sans-serif; + margin-top: 1em; + margin-left: 1em; +} + +p { + position: relative; + left: 25%; + margin-bottom: 0.7em; + margin-right: 0; + width: 55%; +} + +code { + font: normal normal; + font-size: 90%; + /*line-height: 1em;*/ + font-family: Monaco,Menlo,monospace,sans-serif; + color: #aaa; +} + +p code { + position: absolute; + text-align: right; + right: -20%; +} + + +ul { + position: relative; + left: 25%; + width: 75%; + margin-bottom: 1.5em; + margin-top: -0.5em; +} + +/*uncomment to get dashes in the list*/ +/*li:before { + content: "-"; + position: relative; + left: -0.25em; +}*/ + +li { + /*second line indent*/ + padding-left: 1.25em; + text-indent: -1.25em; + /*color: #777;*/ +} + +li ul { + position: relative; + left: 0; + width: 100%; + margin-top: 0.25em; +} + +h1,h2,h3,h4 { + font-weight: 400; + font-family: Avenir,Cousine,Verdana,sans-serif; + width: 80%; +} + +h1 { + text-align: left; + font-size: 3em; + line-height: 1em; + position: relative; + left: 25%; +} + +h1+p { + /*subtitle*/ + font-style: italic; + font-size: 110%; +} + +h2 { + font-size: 1.1em; + color: #bc412b; + margin-top: 3em; + position: relative; + top: 1.4em; + text-align: right; + width: 20%; +} + +h3 { + font-size: 1em; + line-height: 2em; + position: relative; + top: 1.7em; + text-align: right; + width: 20%; +} + +a { + color: inherit; + /*text-decoration:none*/ +} + +a:hover { + color:#39f +} + +#webaddress { + margin-top: 1em; + position: relative; + left: 25%; + color: #bc412b; + font-family: Monaco,Menlo,monospace,sans-serif; + font-size: 100%; +} + +#webaddress a { + text-decoration: none; +} + +em { + /* font-weight: bold; */ + font-style: italic; +} + +strong { + font-weight: bold; +} + +#address { + display: none; +} + + + +/* +@media only screen and (max-width: 480px) { + make one column somehow... +}*/ \ No newline at end of file diff --git a/ADF/media/kjhealy-print.css b/ADF/media/kjhealy-print.css new file mode 100644 index 0000000..1996e09 --- /dev/null +++ b/ADF/media/kjhealy-print.css @@ -0,0 +1,194 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* end of reset */ + + + +body { + font: normal normal 400; + font-size: 10pt; + line-height: 1.35em; + /*also written as... font: normal normal 400 100%/1.5em;*/ + font-family: Verdana,sans-serif; + /*margin-top: 1em; + margin-left: 1em;*/ +} + +p { + position: relative; + left: 28%; + margin-bottom: 0.2em; + margin-right: 0; + width: 70%; +} + +code { + font: normal normal; + font-size: 60%; + /*line-height: 1em;*/ + font-family: Menlo,monospace,sans-serif; + color: #ccc; +} + +p code { + position: absolute; + left: -11%; +} + + +ul { + position: relative; + left: 28%; + width: 65%; + margin-bottom: 1em; + /*margin-top: -0.5em;*/ +} + +/*uncomment to get dashes in the list*/ +/*li:before { + content: "-"; + position: relative; + left: -0.25em; +}*/ + +li { + /*second line indent*/ + padding-left: 1.25em; + text-indent: -1.25em; + /*color: #777;*/ +} + +li ul { + position: relative; + left: 0; + width: 100%; + margin-top: 0.25em; +} + +h1,h2,h3,h4 { + font-weight: 400; + font-family: Cousine,Verdana,sans-serif; + width: 65%; +} + +h1 { + text-align: left; + font-size: 3em; + line-height: 1em; + position: relative; + left: 28%; +} + +h1+p { + /*subtitle*/ + font-style: italic; + font-size: 110%; +} + +h2 { + font-size: 1.1em; + color: #a00; + margin-top: 2em; + position: relative; + top: 1.2em; + text-align: right; + width: 18%; +} + + +h3 { + font-size: 1em; + line-height: 2em; + color: #ccc; + position: relative; + top: 1.6em; + text-align: right; + width: 18%; +} + +a { + color: inherit; + text-decoration:none +} + +a:hover { + color:#39f +} + +#webaddress { + margin-top: 1em; + position: relative; + left: 28%; + color: #ccc; + font-family: Menlo,monospace,sans-serif; + font-size: 80%; +} + +#webaddress a { + text-decoration: none; +} + +em { + font-style: normal; + color: #2d4e5e +} + +strong { + font-weight: bold; +} + +#ghbutton { + display: none; + visibility: hidden; +} + + + + diff --git a/ADF/media/kjhealy-screen.css b/ADF/media/kjhealy-screen.css new file mode 100644 index 0000000..a8bffae --- /dev/null +++ b/ADF/media/kjhealy-screen.css @@ -0,0 +1,196 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* end of reset */ + + + +body { + font: normal normal 400; + font-size: 80%; + line-height: 1.5em; + /*also written as... font: normal normal 400 100%/1.5em;*/ + font-family: Verdana,sans-serif; + margin-top: 1em; + margin-left: 1em; +} + +p { + position: relative; + left: 33%; + margin-bottom: 0.7em; + margin-right: 0; + width: 65%; +} + +code { + font: normal normal; + font-size: 75%; + /*line-height: 1em;*/ + font-family: Menlo,monospace,sans-serif; + color: #aaa; +} + +p code { + position: absolute; + left: -14%; +} + + +ul { + position: relative; + left: 33%; + width: 65%; + margin-bottom: 1.5em; + margin-top: -0.5em; +} + +/*uncomment to get dashes in the list*/ +/*li:before { + content: "-"; + position: relative; + left: -0.25em; +}*/ + +li { + /*second line indent*/ + padding-left: 1.25em; + text-indent: -1.25em; + /*color: #777;*/ +} + +li ul { + position: relative; + left: 0; + width: 100%; + margin-top: 0.25em; +} + +h1,h2,h3,h4 { + font-weight: 400; + font-family: Cousine,Verdana,sans-serif; + width: 65%; +} + +h1 { + text-align: left; + font-size: 3em; + line-height: 1em; + position: relative; + left: 33%; +} + +h1+p { + /*subtitle*/ + font-style: italic; + font-size: 110%; +} + +h2 { + font-size: 1.1em; + color: #a00; + margin-top: 3em; + position: relative; + top: 1.4em; + text-align: right; + width: 20%; +} + +h3 { + font-size: 1em; + line-height: 2em; + position: relative; + top: 1.7em; + text-align: right; + width: 20%; +} + +a { + color: inherit; + /*text-decoration:none*/ +} + +a:hover { + color:#39f +} + +#webaddress { + position: relative; + left: 33%; + margin-bottom: 0.7em; + margin-right: 0; + width: 65%; + color: #aaa; + font-family: Menlo,monospace,sans-serif; + font-size: 80%; +} + +#webaddress a { + text-decoration: none; +} + +em { + font-weight: bold; + font-style: italic; +} + +strong { + font-weight: bold; +} + +#address { + display: none; +} + + + +/* +@media only screen and (max-width: 480px) { + make one column somehow... +}*/ diff --git a/ADF/scripts/script.js b/ADF/scripts/script.js deleted file mode 100644 index 0cf1a8d..0000000 --- a/ADF/scripts/script.js +++ /dev/null @@ -1,83 +0,0 @@ -$(function() { - var slider = $("#slider"); - - slider.slider({ - range: "max", - min: 1, - max: 6, - value: 3, - slide: function(event, ui) { - $("#text_ad").text(getText(ui.value)); - $("#amount").text(ui.value); - localStorage.setItem("sliderValue", ui.value.toString()); - updateFace(ui.value); - } - }); - - var savedValue = localStorage.getItem("sliderValue"); - if (savedValue) { - slider.slider("value", parseInt(savedValue)); - $("#text_ad").text(getText(savedValue)); - $("#amount").text(savedValue); - } - - // Manuální spuštění funkce updateFace při načítání stránky - updateFace(slider.slider("value")); - - slider.slider('pips', { - first: 'pip', - last: 'pip', - }); - - function updateFace(value) { - var face = $(".face-wrapper").children(); - - switch (value) { - case 1: - removeClass(); - $(face).addClass("case1"); - break; - case 2: - removeClass(); - $(face).addClass("case2"); - break; - case 3: - removeClass(); - $(face).addClass("case3"); - break; - case 4: - removeClass(); - $(face).addClass("case4"); - break; - case 5: - removeClass(); - $(face).addClass("case5"); - break; - case 6: - removeClass(); - $(face).addClass("case6"); - break; - } - } - - function removeClass() { - $(".face-wrapper").children().removeClass("case1 case2 case3 case4 case5 case6"); - } - - function getText(value) { - switch (parseInt(value)) { - case 1: - return "1 test"; - case 2: - return "2 test"; - case 3: - return "3 test"; - case 4: - return "4 test"; - case 5: - return "5 test"; - case 6: - return "6 test"; - } - } -}); \ No newline at end of file diff --git a/ADF/server.js b/ADF/server.js deleted file mode 100644 index 8082176..0000000 --- a/ADF/server.js +++ /dev/null @@ -1,11 +0,0 @@ -const express = require('express'); -const path = require('path'); - -const app = express(); -const port = 3000; - -app.use(express.static(path.join(__dirname, ''))); - -app.listen(port, () => { - console.log(`Server běží na http://localhost:${port}`); -}); diff --git a/ADF/styles/styles.css b/ADF/styles/styles.css deleted file mode 100644 index 9c0bd7f..0000000 --- a/ADF/styles/styles.css +++ /dev/null @@ -1,474 +0,0 @@ - @import url("https://fonts.googleapis.com/css?family=Baloo"); - *:focus { - outline: none; -} - .left { - left: 0px; -} - .right { - right: 0px; -} - html, body { - height: 100%; - width: 100%; - font-family: 'Baloo', cursive; - font-size: 1.5em; - letter-spacing: .8px; - color: tomato; - background-color: #4F0E91; -} -/** FLEXBOX **/ - .flexbox { - display: flex; - justify-content: center; - flex-direction: column; - width: 50%; - margin: 0 auto; - transform: translateY(5%); -} - .flexbox .flex-item { - padding: 0px 20px; - flex: 1 100%; - width: 100%; - align-self: center; -} -/** SLIDER **/ - #slider { - border-radius: 50px; -} - #slider .ui-slider-handle { - border: none; - background-color: #fff; - border-radius: 100%; - cursor: -webkit-grab; - cursor: -moz-grab; -} - #slider .ui-slider-handle:active { - cursor: -webkit-grabbing; - cursor: -moz-grabbing; -} - #slider.ui-slider { - border: 5px solid #fff; - background: -webkit-linear-gradient(left, #84b6e5, #ECA58F 50%); -} - #slider .ui-slider-range-max { - border-radius: 50px; - background-color: #4F0E91 !important; -} - .ui-slider-horizontal .ui-slider-range-max { - background-color: #4F0E91; -} - .ui-slider-horizontal .ui-slider-range-max { - background-color: #4F0E91 !important; -} - .ui-slider-pips .ui-slider-line { - background: #fff !important; - opacity: .5; - width: 5px; - border-radius: 50px; - position: absolute; - z-index: -1; - height: 20px; -} - .mood-box { - height: 100%; - width: 100%; -} -/*********************************** *************FACE ***********************************/ - .face-wrapper { - border: 3px solid #4F0E91; - border-radius: 100%; - width: 220px; - height: 220px; - overflow: hidden; - z-index: 3; - margin: 0 auto; - position: relative; - animation: neutral 6.5s infinite ease-in-out; -} - .face-wrapper div { - position: absolute; - transition: all .8s ease-in-out; -} - #face-bg { - width: 250px; - height: 250px; - margin: 0px auto; - top: -10px; - left: -10px; - position: absolute; - background-color: #db9553; - z-index: 1; - overflow: hidden; -} - #face-bg .face-light { - height: 100%; - width: 100%; - left: 0px; - border-radius: 100%; - background-color: #E5B384; -} - #face-bg.case1 { - background-color: #5399db; -} - #face-bg.case1 .face-light { - background: #84b6e5; - border-radius: 100%; - height: 220px; - width: 220px; - top: 40px; - left: 10px; -} - #face-bg.case2 { - background-color: #948d86; -} - #face-bg.case2 .face-light { - background: #A9B5C0; - border-radius: 100%; - height: 220px; - width: 220px; - top: 0px; - left: -20px; -} - #face-bg.case4 { - background-color: #e85b51; -} - #face-bg.case4 .face-light { - background: #ECA58F; - border-radius: 100%; - height: 220px; - width: 220px; - top: 0px; - left: 20px; -} - #face-bg.case5 { - background-color: #ff3279; -} - #face-bg.case5 .face-light { - background: #FF80AC; - border-radius: 100%; - height: 220px; - width: 220px; - bottom: 40px; - left: 10px; -} - #face-bg.case6 { - background-color: #ff3279; -} - #face-bg.case6 .face-light { - background: #FF80AC; - border-radius: 100%; - height: 220px; - width: 220px; - bottom: 40px; - left: 10px; -} - #face-bg.case6 .cow { - position: absolute; - scale: 1.3; - bottom: 10%; - left: 90%; - transform: translateX(-50%); - font-size: 2em; -} -/*End Face BG*/ - #eyes { - width: 50%; - height: 20px; - z-index: 2; - top: 30%; - left: calc(50% - 1.5em); -} - #eyes .eyebrow { - top: -5px; - width: 30px; - height: 10px; - position: absolute; - border-radius: 10px 10px 20px 20px; - background: #db9553; -} - #eyes .eyebrow.left { - left: calc(-.13em); -} - #eyes .eyebrow.right { - right: calc(-.13em); -} - #eyes .eye { - background: #343838; - height: 40px; - width: 20px; - border-radius: 50px; - overflow: hidden; -} - #eyes .eye .eyelid { - background: #db9553; - width: 25px; - top: -2px; - left: -2px; - height: 0%; - border-radius: 100% 100% 0% 0%; - animation: blink 10s ease-in 2s infinite; -} - #eyes.case1 { - transform: translateX(0px) translateY(40px); -} - #eyes.case1 .eyebrow { - background: #5399db; - border-radius: 0px 0px 100px 100px; - z-index: 4; - transform: rotate(-60deg); -} - #eyes.case1 .eyebrow.right { - transform: rotate(60deg); -} - #eyes.case1 .eyelid { - background: #5399db; -} - #eyes.case1 .bottomlid { - width: 20px; - height: 20px; - background: #84b6e5; -} - #eyes.case2 { - transform: translateX(-40px) translateY(20px); -} - #eyes.case2 .eyebrow { - background: #948d86; - height: 20px; - border-radius: 50px 50px 60px 60px; - transform: rotate(-20deg); -} - #eyes.case2 .eyebrow.right { - transform: rotate(20deg); -} - #eyes.case2 .eyelid { - background: #948d86; -} - #eyes.case4 { - transform: translateX(20px) translateY(-10px); -} - #eyes.case4 .eyebrow { - background: #e85b51; - height: 20px; - border-radius: 80px 80px 60px 60px; - transform: rotate(-20deg); -} - #eyes.case4 .eyebrow.right { - transform: rotate(20deg); -} - #eyes.case4 .eyelid { - background: #e85b51; -} - #eyes.case5 { - transform: translateX(5px) translateY(-20px); -} - #eyes.case5 .eye { - width: 20px; -} - #eyes.case5 .eyebrow { - background: #ff3279; - height: 20px; - border-radius: 80px 80px 60px 60px; - transform: rotate(-40deg); -} - #eyes.case5 .eyebrow.right { - transform: rotate(40deg); -} - #eyes.case5 .eyelid { - background: #ff3279; -} - #eyes.case5 .bottomlid { - position: absolute; - background: #FF80AC; - width: 25px; - height: 25px; - border-radius: 50px; - top: 22px; - z-index: 2; -} - #eyes.case6 { - transform: translateX(5px) translateY(-20px); -} - #eyes.case6 .eye { - width: 20px; -} - #eyes.case6 .eyebrow { - background: #ff3279; - height: 20px; - border-radius: 80px 80px 60px 60px; - transform: rotate(-40deg); -} - #eyes.case6 .eyebrow.right { - transform: rotate(40deg); -} - #eyes.case6 .eyelid { - background: #ff3279; -} - #eyes.case6 .bottomlid { - position: absolute; - background: #FF80AC; - width: 25px; - height: 25px; - border-radius: 50px; - top: 22px; - z-index: 2; -} -/*End Eyes*/ - #mouth { - width: 120px; - height: 4px; - z-index: 3; - top: 70%; - left: calc(50% - 1.5em); - position: absolute; - background: #db9553; -} - #mouth #mouth-open { - width: 100px; - height: 100px; - bottom: -20px; - position: absolute; -} - #mouth.case1 { - width: 100px; - height: 100px; - border-radius: 50%; - background: #343838; - transform: translateX(0px) translateY(20px); -} - #mouth.case1 #mouth-open { - width: 120px; - height: 120px; - display: block; - top: 5px; - left: -12px; - border-radius: 50%; - background: #84b6e5; -} - #mouth.case2 { - width: 50px; - height: 4px; - border-radius: 50px; - background: #343838; - transform: translateX(-20px) translateY(0px) rotate(20deg); -} - #mouth.case3 #mouth-open { - display: none; - width: 30px; - height: 40px; - border-top: 20px solid #343838; - border-left: 40px solid transparent; - border-right: 40px solid transparent; - top: 0px; - left: -12px; - border-radius: 0%; -} - #mouth.case4 { - width: 30px; - height: 4px; - border-radius: 50px; - background: #343838; - transform: rotate(20deg) translateY(-40px) translateX(40px) scale(0.8); -} - #mouth.case4 #mouth-open { - width: 0px; - height: 0px; - display: block; - border-top: 20px solid #343838; - border-left: 40px solid transparent; - border-right: 40px solid transparent; - top: 0px; - left: -12px; - border-radius: 10%; -} - #mouth.case5 { - top: 105px; - border-radius: 50px; - background: #343838; - transform: rotate(-15deg); -} - #mouth.case5 #mouth-open { - width: 0px; - height: 0px; - display: block; - border-top: 20px solid #343838; - border-left: 40px solid transparent; - border-right: 40px solid transparent; - top: 0px; - left: -12px; - border-radius: 10%; -} - #mouth.case6 { - top: 105px; - border-radius: 50px; - background: #343838; - transform: rotate(-15deg); -} - #mouth.case6 #mouth-open { - width: 0px; - height: 0px; - display: block; - border-top: 70px solid #343838; - border-left: 83px solid transparent; - border-right: 70px solid transparent; - /* background: #FF80AC; - */ - border-radius: 10px; - top: -7px; - left: -7px; - transform: translateX(-10px) scale(0.8); -} -/*End Mouth*/ -/** KEYFRAMES **/ - @keyframes blink { - 0% { - height: 0%; - } - 5% { - height: 100%; - } - 8% { - height: 0%; - } - 100% { - height: 0%; - } -} - @keyframes neutral { - 0% { - transform: rotate(0deg); - } - 10% { - transform: rotate(-5deg); - } - 40% { - transform: rotate(10deg); - } - 80% { - transform: rotate(-10deg); - } - 90% { - transform: rotate(5deg); - } - 100% { - transform: rotate(0deg); - } -} - .ui-slider-horizontal .ui-slider-range-max { - background: red; -} - .ui-slider { - position: relative; - text-align: left; -} - .ui-slider .ui-slider-handle { - position: absolute; - z-index: 2; - width: 1.2em; - height: 1.2em; - cursor: default; -} - -.h_main { - text-align: center; -} diff --git a/ADF/styles/styles.scss b/ADF/styles/styles.scss deleted file mode 100644 index acf6790..0000000 --- a/ADF/styles/styles.scss +++ /dev/null @@ -1,482 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Baloo'); - -$background: #4F0E91; -$slider-light: #fff; - -$black: #343838; -$orange: #E5B384; -$face-shadow: #db9553; - -$pale: #A9B5C0; -$pale-shadow: #948d86; - -$pink: #ECA58F; -$pink-shadow: #e85b51; - -$darkblue: #84b6e5; -$darkblue-shadow: #5399db; - -$red: #FF80AC; -$red-shadow: #ff3279; - -*:focus{ - outline: none; -} - -.left{ - left: 0px; - } - -.right{ - right: 0px; - } - -html,body{ - height: 100%; - width: 100%; - font-family: 'Baloo', cursive; - font-size: 1.5em; - letter-spacing: .8px; - color: tomato; - background-color: $background; -} - -/** -FLEXBOX -**/ - -.flexbox{ - display: flex; - justify-content: center; - flex-direction: column; - width: 50%; - margin: 0 auto; - transform: translateY(5%); - - .flex-item{ - padding: 0px 20px; - flex: 1 100%; - width: 100%; - align-self: center; - } -} - -/** -SLIDER -**/ - -#slider{ - border-radius: 50px; - - .ui-slider-handle{ - border:none; - background-color: $slider-light; - border-radius: 100%; - cursor: -webkit-grab; cursor:-moz-grab; - &:active{ - cursor: -webkit-grabbing; cursor:-moz-grabbing; - } - } - - &.ui-slider{ - border: 5px solid $slider-light; - background: -webkit-linear-gradient(left, $darkblue, $pink 50%);; - } - - .ui-slider-range-max{ - border-radius: 50px; - background-color: $background !important; - } - -} - - -.ui-slider-horizontal .ui-slider-range-max{ - background-color: $background; -} -.ui-slider-horizontal .ui-slider-range-max{ - background-color: $background !important; -} - - -.ui-slider-pips .ui-slider-line{ - background: #fff !important; - opacity: .5; - width:5px; - border-radius: 50px; - position:absolute; - z-index: -1; - height:20px; - } - -.mood-box{ - height: 100%; - width: 100%; - -} - -/*********************************** -*************FACE -***********************************/ - - -.face-wrapper{ - border: 3px solid $background; - border-radius: 100%; - width: 220px; - height: 220px; - overflow:hidden; - z-index:3; - margin: 0 auto; - position:relative; - animation: neutral 6.5s infinite ease-in-out; - - div{ - position: absolute; - transition: all .8s ease-in-out; - } -} - - -#face-bg{ - width: 250px; - height: 250px; - margin: 0px auto; - top: -10px; - left: -10px; - position:absolute; - background-color: $face-shadow; - z-index: 1; - - - .face-light{ - height: 100%; - width: 100%; - left: 0px; - border-radius:100%; - background-color: $orange; - } - - &.case1{ - background-color: $darkblue-shadow; - .face-light{ - background: $darkblue; - border-radius: 100%; - height: 220px; - width: 220px; - top: 40px; - left: 10px; - } - } - - &.case2{ - background-color: $pale-shadow; - .face-light{ - background: $pale; - border-radius: 100%; - height: 220px; - width: 220px; - top: 0px; - left: -20px; - } - } - - &.case4{ - background-color: $pink-shadow; - .face-light{ - background: $pink; - border-radius: 100%; - height: 220px; - width: 220px; - top: 0px; - left: 20px; - } - } - - &.case5{ - background-color: $red-shadow; - .face-light{ - background: $red; - border-radius: 100%; - height: 220px; - width: 220px; - bottom: 40px; - left: 10px; - } - } -}/*End Face BG*/ - -#eyes{ - width: 50%; - height: 20px; - z-index: 2; - top: 30%; - left: calc(50% - 1.5em); - - .eyebrow{ - top: -5px; - width:30px; - height:10px; - position:absolute; - border-radius: 10px 10px 20px 20px; - background: $face-shadow; - - &.left{ - left: calc(-.13em); - } - - &.right{ - right: calc(-.13em); - } - } - - .eye{ - background: $black; - height: 40px; - width: 20px; - border-radius: 50px; - overflow:hidden; - - .eyelid{ - background: $face-shadow; - width: 25px; - top: -2px; - left: -2px; - height: 0%; - border-radius: 100% 100% 0% 0%; - animation: blink 10s ease-in 2s infinite; - } - } - - &.case1 { - transform: translateX(0px) translateY(40px); - - .eyebrow{ - background:$darkblue-shadow; - border-radius: 0px 0px 100px 100px; - z-index: 4; - transform: rotate(-60deg); - - &.right{ - transform: rotate(60deg); - } - } - .eyelid{ - background: $darkblue-shadow; - } - - .bottomlid{ - width: 20px; - height: 20px; - background: $darkblue; - } - } - - &.case2{ - transform: translateX(-40px) translateY(20px); - - .eyebrow{ - background: $pale-shadow; - height: 20px; - border-radius: 50px 50px 60px 60px; - transform: rotate(-20deg); - &.right{ - transform: rotate(20deg); - } - } - .eyelid{ - background: $pale-shadow; - } - } - - &.case4{ - transform: translateX(20px) translateY(-10px); - - .eyebrow{ - background: $pink-shadow; - height: 20px; - border-radius: 80px 80px 60px 60px; - transform: rotate(-20deg); - - &.right{ - transform: rotate(20deg); - } - - } - .eyelid{ - background: $pink-shadow; - } - } - - &.case5{ - transform: translateX(5px) translateY(-20px); - - .eye{ - width: 20px; - } - - .eyebrow{ - background: $red-shadow; - height: 20px; - border-radius: 80px 80px 60px 60px; - transform: rotate(-40deg); - &.right{ - transform: rotate(40deg); - } - } - .eyelid{ - background: $red-shadow; - } - - .bottomlid{ - position:absolute; - background: $red; - width: 25px; - height: 25px; - border-radius: 50px; - top: 22px; - z-index:2; - } - } - - -}/*End Eyes*/ - -#mouth{ - width: 120px; - height: 4px; - z-index: 3; - top: 70%; - left: calc(50% - 1.5em); - position:absolute; - - background: $face-shadow; - - - #mouth-open{ - width: 100px; - height: 100px; - bottom: -20px; - position: absolute; - - - - } - - &.case1{ - width: 100px; - height: 100px; - border-radius: 50%; - background: $black; - transform: translateX(0px) translateY(20px); - - #mouth-open{ - width: 120px; - height: 120px; - display: block; - top: 5px; - left: -12px; - border-radius: 50%; - background: $darkblue; - } - } - - - - &.case2{ - width: 50px; - height: 4px; - border-radius: 50px; - background: $black; - transform: translateX(-20px) translateY(0px) rotate(20deg); - - #mouth-open{ - - } - } - - &.case3{ - #mouth-open{ - display:none; - width:30px; - height:40px; - border-top: 20px solid $black; - border-left: 40px solid transparent; - border-right: 40px solid transparent; - top: 0px; - left: -12px; - border-radius: 0%; - } - } - - &.case4{ - width: 30px; - height: 4px; - border-radius: 50px; - background: $black; - transform: rotate(20deg) translateY(-40px) translateX(40px) scale(.8); - - #mouth-open{ - width:0px; - height:0px; - display: block; - border-top: 20px solid $black; - border-left: 40px solid transparent; - border-right: 40px solid transparent; - top: 0px; - left: -12px; - border-radius: 10%; - } - } - - &.case5{ - top: 105px; - border-radius: 50px; - background: #343838; - transform: rotate(-15deg); - - #mouth-open{ - width: 0px; - height: 0px; - display: block; - border-top: 70px solid #343838; - border-left: 83px solid transparent; - border-right: 70px solid transparent; - /* background: #FF80AC; */ - border-radius: 10px; - top: -7px; - left: -7px; - transform: translateX(-10px) scale(.8); - } - } -}/*End Mouth*/ - - -/** -KEYFRAMES -**/ - - -@keyframes blink{ - 0%{ height: 0%}; - 5%{height: 100%}; - 8%{height: 0%}; - 100%{height: 0%}; -} - -@keyframes neutral{ - 0%{ transform: rotate(0deg)}; - 10%{transform:rotate(-5deg)}; - 40%{ transform: rotate(10deg)}; - 80%{transform:rotate(-10deg)}; - 90%{transform:rotate(5deg)}; - 100%{transform:rotate(0deg)}; -} - - -.ui-slider-horizontal .ui-slider-range-max{ - background: red; -} - - -