From 69cfbf1b44036d9f4e3be3782ce29ad35186f118 Mon Sep 17 00:00:00 2001 From: Luke Else Date: Fri, 22 Apr 2022 20:32:38 +0100 Subject: [PATCH] Created Business Card Site --- index.html | 43 ++++++++++++++++ style.css | 147 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 190 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..0d5a319 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + Luke Else + + +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
const aboutMe = { +
name: 'Luke Else',
+
title: 'Software Engineer + Student',
+
contact: { +
email: 'mail@luke-else.co.uk',
+
website:'https://git.luke-else.co.uk'
} +
} +
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
this.addEventListener('mouseover', () => { +
this.flipCard = true;
}); +
+
+ \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..93192fb --- /dev/null +++ b/style.css @@ -0,0 +1,147 @@ +*, *:before, *:after { + box-sizing: border-box; + outline: none; + } + + html { + font-family: "Source Sans Pro", sans-serif; + font-size: 16px; + font-smooth: auto; + font-weight: 300; + line-height: 1.5; + color: #444; + } + + body { + position: relative; + display: flex; + align-items: center; + justify-content: center; + /* width: 99%; */ + height: 98vh; + background: linear-gradient(45deg, #372c75, #5e5e5e); + } + + code, .card .line-numbers { + font-family: "Lucida Console", Monaco, monospace; + font-size: 14px; + } + + .card { + position: relative; + width: 30rem; + height: 15rem; + perspective: 150rem; + } + .card-front, .card-back { + position: absolute; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin: auto; + border-radius: 5px; + box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4); + transition: 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); + backface-visibility: hidden; + overflow: hidden; + } + .card-front:before, .card-front:after, .card-back:before, .card-back:after { + position: absolute; + } + .card-front:before, .card-back:before { + top: -40px; + right: -40px; + content: ""; + width: 80px; + height: 80px; + background-color: rgba(255, 255, 255, 0.08); + transform: rotate(45deg); + z-index: 1; + } + .card-front:after, .card-back:after { + content: "+"; + top: 0; + right: 10px; + font-size: 24px; + transform: rotate(45deg); + z-index: 2; + } + .card-front { + width: 100%; + height: 100%; + background: linear-gradient(45deg, #101010, #2c3e50); + } + .card-front:after { + color: #212f3c; + } + .card-back { + background: linear-gradient(-45deg, #101010, #2c3e50); + transform: rotateX(180deg); + } + .card-back:after { + color: #11181f; + } + .card:hover .card-front { + transform: rotateX(-180deg); + } + .card:hover .card-back { + transform: rotateX(0deg); + } + .card .line-numbers { + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + margin: 0; + padding: 0 10px; + background-color: rgba(255, 255, 255, 0.03); + font-size: 13px; + } + .card .line-numbers > div { + padding: 2.5px 0; + opacity: 0.15; + } + .card code, .card .line-numbers { + color: whitesmoke; + } + .card .indent { + padding-left: 30px; + } + .card .operator { + color: #4dd0e1; + } + .card .string { + color: #9ccc65; + } + .card .variable { + color: #BA68C8; + } + .card .property { + color: #ef5350; + } + .card .method { + color: #29b6f6; + } + .card .function { + color: #FDD835; + } + .card .boolean { + color: #4dd0e1; + } + +a:link { text-decoration: none; } + + +a:visited { text-decoration: none; } + + +a:hover { text-decoration: none; } + + +a:active { text-decoration: none; } \ No newline at end of file