commit 551b49a8f6c611aa8fddaf418cba5be47c296af0 Author: Aurelien Rebourg Date: Thu May 13 02:17:19 2021 +0100 website diff --git a/.vs/Ezotose-1.github.io/v16/.suo b/.vs/Ezotose-1.github.io/v16/.suo new file mode 100644 index 0000000..15412b6 Binary files /dev/null and b/.vs/Ezotose-1.github.io/v16/.suo differ diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json new file mode 100644 index 0000000..6b61141 --- /dev/null +++ b/.vs/VSWorkspaceState.json @@ -0,0 +1,6 @@ +{ + "ExpandedNodes": [ + "" + ], + "PreviewInSolutionExplorer": false +} \ No newline at end of file diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite new file mode 100644 index 0000000..e457c67 Binary files /dev/null and b/.vs/slnx.sqlite differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..2e9ac8a --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# AurelReb.github.io +Web Design, Front End Dorset diff --git a/assets/css/footer.css b/assets/css/footer.css new file mode 100644 index 0000000..2dfce33 --- /dev/null +++ b/assets/css/footer.css @@ -0,0 +1,136 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#fff; + background-color:#183153; +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #fff } + +/* Footer headings */ +footer h4 { + font-family: serif; + font-weight: normal; + font-style: italic; + font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: sans-serif; + font-weight: normal; + font-style: italic; + color: #34cdf1; + margin: 0 auto 36px auto; + font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #fff +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); + color: #34cdf1; +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #fff +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #fff +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#fff; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #fff +} \ No newline at end of file diff --git a/assets/css/global.css b/assets/css/global.css new file mode 100644 index 0000000..308d27d --- /dev/null +++ b/assets/css/global.css @@ -0,0 +1,88 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1600px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +/* Desktops */ +@media all and (min-width: 768px) { + body { + width: 60%; + margin-left: auto; + margin-right: auto; + } + } + +/* Mobiles */ +@media all and (min-width: 767px) { + body { + width: 80%; + margin-left: auto; + margin-right: auto; + } + } + +body { + text-align: center; + font-family: sans-serif; +} + +h1 { + font-size: 78px; + font-weight: normal; + letter-spacing: -2px; + margin-bottom: 12px; + line-height: 1.2; +} + +h2 { + font-size: 42px; + letter-spacing: 6px; + margin-bottom: 48px; + line-height: 1.2; +} + +h3 { + font-size: 24px; + margin-top: 48px; + margin-bottom: 20px; + line-height: 1.2; + text-transform: uppercase; +} + +p { + font-size: 20px; + margin-bottom: 16px; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: #333; +} + +li { + float: left; +} + +li a { + display: block; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +/* Change the link color to #111 (black) on hover */ +li a:hover { + background-color: #111; +} diff --git a/assets/css/header.css b/assets/css/header.css new file mode 100644 index 0000000..27616b9 --- /dev/null +++ b/assets/css/header.css @@ -0,0 +1,215 @@ + +/* ======= HERO BLOCK, FLEXBOX TWO COLUMNS ===== */ +.hero-block-two-columns { + display: flex; justify-content: space-between; flex-wrap: wrap; + background-color: #183153; +} + +@media (min-width: 1200px) { + .hero-block-two-columns { min-height: 90vh } +} + +@media (min-width: 768px) and (max-width: 1199px) { + .hero-block-two-columns { min-height: 460px } +} + +/* Desktops only - inside padding */ +@media (min-width:768px) { + .hero-block-two-columns { padding: 2% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media (max-width:767px) { + .hero-block-two-columns { padding: 7% 8% 1% 8% } +} + +/* Desktops - 2 columns */ +@media (min-width:768px) { + .hero-block-two-columns .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media (max-width:767px) { + .hero-block-two-columns .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + + +/* Hero block height and spacing */ +@media (min-width: 768px) { + .hero-block-two-columns h1 { margin-top: 2% } + + .hero-block-two-columns .item-2:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center + } +} + +@media (max-width: 767px) { + .hero-block-two-columns { + margin-top: 16%; + margin-bottom: 10% + } + + .hero-block-two-columns .item-2:nth-child(2) { padding-bottom: 5% } + .hero-block-two-columns .item-2:nth-child(1) { order: 2 } +} + +.hero-block-two-columns .item-2 h1 { + font-family: 'Poppins', sans-serif; + color: #fff; + font-weight: 600; + line-height: 1.1; + margin-bottom: 20px; + letter-spacing: -1px; + font-size: calc(30px + (52 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block-two-columns .item-2 h2 { + font-weight: 300; + color: #fff; + line-height: 1.5; + margin-bottom: 30px; + font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block-two-columns .item-2 img { + margin-bottom: 0 +} + +@media (max-width: 767px) { + .hero-block-two-columns .item-2 img { + max-width: 400px; text-align: center; margin-left: auto; margin-right: auto; + } +} + +/* Button container */ +.container-btn { display: flex } + +/* All buttons */ +.container-btn .btn { + text-decoration: none; font-weight: bold; line-height: 1; + padding: 15px 26px 15px 26px; + border-width: 2px; border-style: solid; line-height: 1; outline: none; + transition: all 0.2s ease-in-out; + display: inline-block; + font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* Solid buttons */ +.container-btn .btn-solid:any-link { + background-color: #50e3c2; border-color: #50e3c2; color: #222; +} + +.container-btn :is(.btn-solid:focus, .btn-solid:hover,.btn-solid:active) { + background-color: #222; border-color: #222; color: #fff; +} + +/* Gradient buttons */ +.container-btn .btn-gradient:any-link { + border-color: #183153; + background-image: linear-gradient(to right,#3ec7e0,#526bf4); color: #fff; +} + +.container-btn :is(.btn-gradient:focus, .btn-gradient:hover, .btn-gradient:active) { + background-image: linear-gradient(90deg,#e052a0,#f15c41); color: #fff; +} + + +/* Ghost buttons */ +.container-btn .btn-ghost:any-link { + border: solid 2px #fff; color: #fff; background-color: transparent; +} + +.container-btn :is(.btn-ghost:focus, .btn-ghost:hover, .btn-ghost:active) { + background-color: #222; border-color: #222; color: #fff; +} + +.container-btn .btn-ghost i { color: #fff } +.container-btn .btn-ghost:focus i, +.container-btn .btn-ghost:hover i, +.container-btn .btn-ghost:active i { color: #fff } + +/* Buttons: corner styles */ +.container-btn .btn-soft { border-radius: 5px } +.container-btn .btn-rounded { border-radius: 30px } + +/* Buttons: Font Awesome icons */ +.container-btn .btn i { margin-right: 10px; } + +/* Big desktops */ +@media (min-width: 1025px) { + .container-btn a:first-child { margin-right: 30px } +} + +/* Not big or small desktops, or big tablets */ +@media (max-width: 1024px) { + .container-btn { margin-top: 42px; flex-direction: column } + .container-btn .btn { align-self: flex-start } + .container-btn a:first-child { margin-bottom: 32px } + .container-btn a:last-child { margin-bottom: 0 } + .container-btn.text-center-mobile .btn { + text-align: center; margin-left: auto; margin-right: auto + } +} + +@media (min-width: 768px) { + .container-btn { text-align: left } + .container-btn .btn { align-items: flex-start } +} + +@media (max-width: 767px) { + .container-btn .btn { text-align: center; margin-left: auto; margin-right: auto } +} + + + + +/* ---------------------------------------------- + * Generated by Animista + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +.slide-in-left { + animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.slide-in-right { + animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.fade-in { + animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; +} + +@keyframes slide-in-left { + 0% { transform: translateX(-1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + + @-webkit-keyframes slide-in-right { + 0% { transform: translateX(1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + +@keyframes slide-in-right { + 0% { transform: translateX(1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + +@-webkit-keyframes fade-in { + 0% { opacity: 0 } + 100% { opacity: 1 } +} + +@keyframes fade-in { + 0% { opacity: 0 } + 100% { opacity: 1 } +} \ No newline at end of file diff --git a/assets/css/hero-img.css b/assets/css/hero-img.css new file mode 100644 index 0000000..48b3d47 --- /dev/null +++ b/assets/css/hero-img.css @@ -0,0 +1,265 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background-color: #edc3a5; +} + +section { + text-align: center; + font-family: 'Fjalla One', sans-serif; +} + +.hero-block { + position: relative; + height: 80vh; + min-height: 500px; + display: flex; + flex-direction: column; + /* Vertically center text */ + justify-content: center; + overflow: hidden +} + +.end-block { + position: relative; + height: 30vh; + min-height: 200px; + display: flex; + flex-direction: column; + /* Vertically center text */ + justify-content: center; + overflow: hidden; + padding-bottom: 8%; +} + + +.cheer { + border-radius: 50%; + width : 20%; + margin-top:100px; + display: block; + margin-left: auto; + margin-right: auto; + box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75); +} + + +/* Horizontally center text, left to right */ +.hero-block.text-center { align-items: center } +.hero-text-container { text-align: center } + +/* Stack order */ +.hero-block .hero-text-container { z-index: 3 } +.hero-block [class*="bg-overlay"] { z-index: 2 } +.hero-block h1, .hero-block h2 { z-index: 1 } + +/* Desktops */ +@media (min-width: 768px) { .hero-block { padding: 0 7% 3% 7% } } + +/* Mobiles */ +@media (max-width: 767px) { .hero-block { padding: 0 12% 5% 12% } } + +.hero-block h1, .hero-block h2 { + line-height: 1.2; + color:#fff; + text-shadow: 2px 2px #222; +} + +.hero-block h1 { + font-size: calc(48px + (120 - 48) * ((100vw - 320px) / (1600 - 320))); + margin-bottom: 24px; +} + +.hero-block h2 { + font-weight: normal; + font-size: calc(20px + (48 - 20) * ((100vw - 320px) / (1600 - 320))); +} + +.bg-text { + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0, 0.6); /* Black w/opacity/see-through */ + color: white; + font-weight: bold; + border: 3px solid #f1f1f1; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 2; + width: 80%; + padding: 20px; + text-align: center; +} + +.animate-spawn{ + animation:animateSpawn 3s; + } @keyframes animateSpawn{ + 0%{ + opacity:0 + } + 100%{ + opacity:1 + } + } + +.hero-img { + position: absolute; + top: 0; right: 0; bottom: 0; left: 0; + /* Always 3rd in stack. Behind 3 and behind 2. */ + z-index: 0; + + /* Add the blur effect */ + filter: blur(3px); + -webkit-filter: blur(3px); +} + +.hero-img img { + object-fit: cover; width: 100%; height: 100%; +} + +/* Optional overlay */ + +[class*="bg-overlay"] { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)); +} + +.bg-overlay-red { + background-image: linear-gradient(rgba(245,0,34,0.5),rgba(204,0,34,0.5)); +} + +.bg-overlay-green { + background-image: linear-gradient(rgba(0,102,0,0.5),rgba(0,102,0,0.5)); +} + +.bg-overlay-blue { + background-image: linear-gradient(rgba(0,0,179,0.5),rgba(0,0,179,0.5)); +} + +.bg-overlay-purple { + background-image: linear-gradient(rgba(179, 0, 134,0.5),rgba(179, 0, 134,0.5)); +} + + + + +/* Regular and larger screens */ +@media (min-width: 1200px) { + section { + margin-left: auto; + margin-right: auto; + padding: 3.5% 0 4% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .section-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + section { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + section { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + section { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + section { padding: 7% 10% 8% 10% } +} + +/* Coloured backgrounds */ +.bg-header { background-color: #f5f9fb } +.bg-blue-light { background-color: #d8f0f5 } +.bg-blue-dark { background-color: #1435b3 } + +/* Light blue section background: h1 headings and p text paragraphs */ +.bg-blue-light h1 { color: #1435b3 } +.bg-blue-light p { color: #222 } + +/* Dark blue section background: h1 headings and p text paragraphs */ +.bg-blue-dark h1 { color: #fff } +.bg-blue-dark p { color: #fff } + + +/* =============== UTILTY CLASSES ============== */ +.text-center { text-align: center !important } + +p { + font-size: 20px; + margin-bottom: 16px; + text-decoration: none; + color : #3f1f09; +} +p.hover { + color : #2a1506; + font-weight : bold; +} + +a { + text-decoration: none; + color : #3f1f09; +} +a:hover { + color : #2a1506; + font-weight : bold; + animation:textSpawn 1s; + } @keyframes textSpawn{ + 0%{ + opacity:0.3 + } + 100%{ + opacity:1 + } +} +h3 { + font-size: 24px; + margin-top: 48px; + margin-bottom: 20px; + line-height: 1.2; + text-transform: uppercase; +} + +section h3 { + margin-top: 0; +} + +.dark-section { + background-color: #3B1E00; + color: #fdfff5; +} +.dark-section a { + color: #fdfff5dc; +} +.dark-section a:hover { + color: #fdfff59f; +} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..37dac8a --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,396 @@ + +/* Default font and colours */ +h1, h2, h3 { color: #fff} +p, li { color: #fff } +.bg-light-slate { background-color: #515e7b } +.bg-pastel-grey { background-color: #edf5f1 } + + +/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .container-one-column { padding: 4% 20% 5% 20% } +} + +/* Mobiles */ +@media all and (max-width:767px) { + .container-one-column { + padding: 7% 7% 10% 7%; + text-align: center; + } +} + +.container-one-column h1 { + line-height: 1.2; margin-bottom: 32px; + font-size: calc(38px + (54 - 38) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h2 { + line-height: 1.3; margin-top:32px; margin-bottom: 12px; + font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h3 { + line-height: 1.4; margin-top:28px; margin-bottom: 2px; + font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column p, +.container-one-column li { + line-height: 1.5; margin-bottom:14px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column ul { margin-left: 17px } + + +/* ============== FAUX BUTTONS =================== */ + +a.button:link, a.button:visited, a.button:hover, a.button:active { + text-decoration: none; + color: inherit; + border-style: solid; + border-width: 2px; + padding: 14px 28px; + display: inline-block; + line-height: 1; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} + +a.button-solid:link, .button-solid:visited { + border-color:#34cdf1; + color: #000; + background-color: #34cdf1; +} + +a.button-solid:hover, .button-solid:active { + border-color:#183153; + background-color: #183153; + color: #fff +} + +a.button-ghost:link, a.button-ghost:visited { + border-color: #403d50; + background-color: transparent; + color: #403d50 +} + +a.button-ghost:hover, .button-ghost:active { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +a.button-soft { border-radius: 5px } +a.button-round { border-radius: 25px } + +/* Hide button icons on narrow desktop sceens */ +@media all and (min-width:768px) and (max-width: 1024px) { + .container-flexbox .item-3 a.button i { display: none} +} + + +/* ============== FANCY HYPERLINKS =================== */ + +a.fancy-link:link, a.fancy-link:visited, +a.fancy-link:hover, a.fancy-link:active { + text-decoration: none; + color: inherit; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom: 2px; +} + +a.fancy-link:link, a.fancy-link:visited { + color: #34cdf1; + border-bottom-color:#34cdf1 +} + +a.fancy-link:hover, a.fancy-link:active { + color: #fff; + border-bottom-color: #fff +} + +/* Buttons: corner styles */ +.btn-soft { border-radius: 5px } +.btn-rounded { border-radius: 30px } + +/* Buttons: Font Awesome icons */ +.btn i { margin-right: 10px; } + + +/* ============== FLEXBOX MULTI-COLUMN LAYOUTS ================== */ + + +/* ============ PARENT FLEXBOX CONTAINERS ========== */ + +.container-flexbox { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Desktops only - inside padding */ +@media all and (min-width:768px) { + .container-flexbox { padding: 2% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media all and (max-width:767px) { + .container-flexbox { padding: 7% 8% 1% 8% } +} + +/* ====== INNER FLEXBOX COLUMN: 1 COLUMN EVERY SCREEN ======= */ + +.container-flexbox .item-1 { + width: 100%; + padding: 1% 6% 0 6%; + text-align: center; +} + +/* ====== FLEXBOX ITEM COLUMNS: 2 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ====== */ + +/* Desktops - 2 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + +.container-flexbox .item-2 h2 { + font-size: calc(24px + (48 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +.container-flexbox .item-2 p { + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */ + + +/* Desktops - 3 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-3 { width: 30% } + .container-flexbox .item-3 { margin-bottom: 6% } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-3 { width: 100% } + .container-flexbox .item-3 { margin-bottom: 14% } +} + + +/* Spacing under images in children of parent flexbox containers */ +.container-flexbox img { margin-bottom: 20px } + +/* Drop shadow effect around images */ +img.image-shadow { + box-shadow: 8px 10px 8px #888; + margin-bottom: 20px +} + +/* Makes square images circles */ +img.image-circle { + border-radius: 100%; +} + +.container-flexbox .item-1 h2 { + color: #34cdf1; + line-height: 1.2; margin-bottom: 20px; + letter-spacing:-1px; + font-weight: 600; + font-size: calc(24px + (48 - 24) * ((100vw - 320px)/(1600 - 320))); +} + +.container-flexbox .item-1 p { + line-height: 1.7; + font-size: calc(18px + (26 - 18) * ((100vw - 320px)/(1600 - 320))); + color: #fff; +} + +@media all and (max-width:767px) { + .container-flexbox .item-1 { text-align: center } +} + +.container-flexbox .item-1, +.container-flexbox .item-2 p, +.container-flexbox .item-3 p { + line-height: 1.5; margin-bottom: 40px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); + color: #fff; +} + +.container-flexbox .item-2 h3, +.container-flexbox .item-3 h3 { + line-height: 1.2; margin-bottom: 12px; + color:#34cdf1 +} + +/* Centre-align text within two, three and four columns on mobiles */ +@media all and (max-width:767px) { + .container-flexbox .item-2, + .container-flexbox .item-3 { text-align: center } + .container-flexbox .item-3 img { + width: 90%; + max-width: 390px; + margin-left: auto; + margin-right: auto; + } +} + +.container-flexbox .item-3 h3, +.container-flexbox .item-3-2 h3 { + font-size: calc(20px + (26 - 20) * ((100vw - 320px)/(1600 - 320))); + margin-bottom:12px; + margin-top: 32px; + line-height: 1.6; + font-weight: 600; +} + +.container-flexbox .item-3 img { + margin-top: 12px +} + + +/* =============== BEGIN CONTACT FORM CSS ============= */ + +/* == Contact form container == */ + +/* All screens */ +.container-contact-form { + text-align: center; + background-color: #183153 +} + +/* Desktop */ +@media all and (min-width:1024px) { + .container-contact-form { + margin: 4% 23% 4% 23%; + padding: 2% 4% 1% 4% + } +} + +/* Mobiles */ +@media all and (max-width:1023px) { + .container-contact-form { + margin: 6% 8% 18% 8%; + padding: 7% 8% 8% 8%; + } +} + +/* == Contact form heading and text == */ + +/* Heading */ +.container-contact-form h3 { + font-weight: bold; + color: #fff; + line-height: 1.2; + margin-bottom: 3%; + font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +/* Text */ +.container-contact-form p { + font-weight: normal; + color: #fff; + line-height: 1.5; + margin-bottom: 7%; + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* == Contact form fields == */ + +#contact-form .flex-row { display: flex; justify-content: space-between } + +/* Desktop */ +@media all and (min-width: 1024px) { + #contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% } + #contact-form .flex-row .item-name, + #contact-form .flex-row .item-email { width: 47% } + #contact-form .flex-row .item-textarea { width: 64% } + #contact-form .flex-row .item-btn { width: 30%; align-self: flex-end } +} + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form .flex-row { flex-direction: column; text-align: center; } +} + +#contact-form label, #contact-form input, #contact-form textarea { + font-family: 'Poppins', sans-serif; + color: #fff; + display: block; +} + +#contact-form label { + font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); + font-weight: bold; + margin-bottom: 8px; + display: flex; + align-items: baseline; +} + +#contact-form [type="text"], +#contact-form [type="email"], +#contact-form textarea { width: 100% } +#contact-form ::placeholder { font-size: 94% } + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form [type="text"], + #contact-form [type="email"], + #contact-form textarea { margin-bottom: 20px } +} + +#contact-form input, #contact-form textarea { + padding: 10px 12px; + border: 2px solid rgb(49,145,131); + background-color: #f0f0f0; + border-radius: 5px; +} + +#contact-form input:focus, +#contact-form textarea:focus { + background-color: #fff; +} + +#contact-form.flex-row .item-btn { width: 26% } + +#contact-form #btn-submit { + float: right; + border: none; + color: #000; + font-weight: bold; + padding: 18px 28px; + font-size: 18px; + border-color:#34cdf1; + color: #000; + background-color: #34cdf1; +} + + +#contact-form #btn-submit:hover, +#contact-form #btn-submit:active { + background-color: red; + color: #fff +} + +#contact-form #btn-submit i.fas { + margin-left: 9px; + font-size: 104% +} + diff --git a/assets/css/menus.css b/assets/css/menus.css new file mode 100644 index 0000000..ffe32b8 --- /dev/null +++ b/assets/css/menus.css @@ -0,0 +1,332 @@ + +.unhide-content-under-sticky-menu { padding-top: 72px !important } + +/* === ALL SCREEN SIZES ====== */ + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { + width: 100%; + font-family: 'Poppins', sans-serif; +} + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-transparent, + .container-menu-desktop.menu-light, + .container-menu-desktop.menu-dark { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-transparent, + .container-menu-bar-mobile.menu-light, + .container-menu-bar-mobile.menu-dark, + .flyout-menu.menu-transparent, + .flyout-menu.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* prevents content from disappearing udner sticky menus */ +.sticky-anchor { + position: relative; + border-top: 90px solid transparent; + margin: -90px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } + + .sticky-anchor:before { + content: ""; + position: absolute; + top: -2px; + left: 0; + right: 0; + } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically cente#5ba745 in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; + /* soften corners */ + /* border-radius: 4px; */ + /* rounded corners */ + border-radius: 100px +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 40px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320))); + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 6px 20px 6px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ + font-family: 'Poppins', sans-serif; +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu { + box-shadow: 0px 1px 10px #888 +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu div.fly-out-profile-box, +.flyout-menu div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu div.fly-out-profile-box img, +.flyout-menu div.fly-out-profile-box p { width: 47% } + +.flyout-menu div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ======= Dark background menu - desktops and mobiles ======= */ + +/* background colour */ +.menu-dark { + background-color: #183153; + transition: all .5s ease-in-out +} + +/* menu links */ +.menu-dark ul li a:link, .menu-dark ul li a:visited { color: #fff } +.menu-dark ul li a:hover, .menu-dark ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-dark ul li a.btn-cta:link, +.menu-dark ul li a.btn-cta:visited { + background-color: #34cdf1; + color: #fff; + border-color:#fff +} + +.menu-dark ul li a.btn-cta:hover, +.menu-dark ul li a.btn-cta:active { + background-color: #fff; + color: #34cdf1; + border-color:#fff +} + +/* on mobiles only - various content */ +.menu-dark.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-dark.flyout-menu h4, +.menu-dark.flyout-menu h5, +.menu-dark.flyout-menu h5 a, +.menu-dark.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-dark .item-icon .bar1, +.menu-dark .item-icon .bar2, +.menu-dark .item-icon .bar3 { background-color: #fff } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-dark.flyout-menu h5 a:link, +.menu-dark.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-dark.flyout-menu h5 a:hover, +.menu-dark.flyout-menu h5 a:active { + border-bottom-color: #34cdf1; +} + +/* profile image border colour */ +.menu-dark.flyout-menu div.fly-out-profile-box img { border-color: #34cdf1 } + +/* contact icons */ +.menu-dark.flyout-menu .fly-out-social-icons a i { color:#fff } + +.menu-dark ul li .btn-cta:any-link { + border-color: #183153 !important; + background-image: linear-gradient(to right,#3ec7e0,#526bf4); color: #fff !important; +} + +.menu-dark ul li :is(.btn-cta:focus, .btn-cta:hover, .btn-cta:active) { + background-image: linear-gradient(90deg,#e052a0,#f15c41); color: #fff; +} \ No newline at end of file diff --git a/assets/css/resets.css b/assets/css/resets.css new file mode 100644 index 0000000..f8bff24 --- /dev/null +++ b/assets/css/resets.css @@ -0,0 +1,25 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +/* h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } */ +/* p, li { word-break: break-word; hyphens: auto } */ + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: 'Poppins', sans-serif; + background-color: #183153; +} \ No newline at end of file diff --git a/assets/img/contact-pic.jpg b/assets/img/contact-pic.jpg new file mode 100644 index 0000000..c20987b Binary files /dev/null and b/assets/img/contact-pic.jpg differ diff --git a/assets/img/exercises.png b/assets/img/exercises.png new file mode 100644 index 0000000..c60ed0c Binary files /dev/null and b/assets/img/exercises.png differ diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 0000000..fd4d62d Binary files /dev/null and b/assets/img/favicon.ico differ diff --git a/assets/img/home-pic.jpg b/assets/img/home-pic.jpg new file mode 100644 index 0000000..f32441a Binary files /dev/null and b/assets/img/home-pic.jpg differ diff --git a/assets/img/kaktana.png b/assets/img/kaktana.png new file mode 100755 index 0000000..c027746 Binary files /dev/null and b/assets/img/kaktana.png differ diff --git a/assets/img/portfolio-pic.jpg b/assets/img/portfolio-pic.jpg new file mode 100644 index 0000000..36e0979 Binary files /dev/null and b/assets/img/portfolio-pic.jpg differ diff --git a/assets/img/profile-pic.jpg b/assets/img/profile-pic.jpg new file mode 100644 index 0000000..cd04eaa Binary files /dev/null and b/assets/img/profile-pic.jpg differ diff --git a/assets/img/prog.jpg b/assets/img/prog.jpg new file mode 100644 index 0000000..3402ecf Binary files /dev/null and b/assets/img/prog.jpg differ diff --git a/assets/img/project-ireland.jpg b/assets/img/project-ireland.jpg new file mode 100644 index 0000000..2379516 Binary files /dev/null and b/assets/img/project-ireland.jpg differ diff --git a/assets/img/project-smoothie.jpg b/assets/img/project-smoothie.jpg new file mode 100644 index 0000000..b0d0a5a Binary files /dev/null and b/assets/img/project-smoothie.jpg differ diff --git a/assets/img/project-van-gogh.png b/assets/img/project-van-gogh.png new file mode 100644 index 0000000..2a31ac4 Binary files /dev/null and b/assets/img/project-van-gogh.png differ diff --git a/assets/img/website-logo.png b/assets/img/website-logo.png new file mode 100644 index 0000000..cf6abde Binary files /dev/null and b/assets/img/website-logo.png differ diff --git a/assets/js/menus.js b/assets/js/menus.js new file mode 100644 index 0000000..e024a05 --- /dev/null +++ b/assets/js/menus.js @@ -0,0 +1,48 @@ +// Code to detect click of option within fly-out menu +let specifiedElement = document.querySelector('.flyout-menu'); +document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } +}); + +// Code to show/hide fly-out mobile menu --> +document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) +const pageContainer = document.querySelector('.page-container'); + +function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } +} + + diff --git a/contact/index.html b/contact/index.html new file mode 100644 index 0000000..5baabcc --- /dev/null +++ b/contact/index.html @@ -0,0 +1,198 @@ + + + + + + + + Contact | Aurelien Rebourg Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Aurelien Rebourg, web designer, Dublin +

Hi, I'm Aurelien Rebourg, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
aurelien.rebourg@gmail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Realise your digital potential

+

Helping businesses of every size and type get the most from digital platforms.

+
+
+ hero image +
+ +
+ + + + +
+

Get in touch

+

Use the form below to let me know a little more about your objectives and I'll get back to you.

+ + +
+ + + +
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + + + +
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/exercises.html b/exercises.html new file mode 100644 index 0000000..b9a736c --- /dev/null +++ b/exercises.html @@ -0,0 +1,40 @@ + + + + + + Aurélien Rebourg | Home Page + + + + + + + +

Hello

+

I'm Aurélien Rebourg

+ +

This is my website. It has been created to show my new web design skills

+ + + Kaktana logo + + + + diff --git a/exercises/assets/css/buttons-icons.css b/exercises/assets/css/buttons-icons.css new file mode 100644 index 0000000..9485acc --- /dev/null +++ b/exercises/assets/css/buttons-icons.css @@ -0,0 +1,240 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + + +/* ============== HEADERS AND SECTIONS ============ */ + +/* Default header and widths */ +header, section { width: 100% } + +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child { margin-bottom: 0 } + +/* =================== HEADER ================ */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + header { + margin-left: auto; + margin-right: auto; + padding: 1% 0 3% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .header-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + header { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + header { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + header { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + header { padding: 7% 10% 8% 10% } +} + +/* Image in header */ +header img { + max-width: 800px; + margin-left: auto; + margin-right: auto; + margin-bottom: 24px; +} + +/* Main heading in header */ +header h1 { + font-family: 'Fira Sans', sans-serif; + font-size: calc(48px + (84 - 48) * ((100vw - 320px) / (1140 - 320))); + color: #1435b3; + letter-spacing: 1px; + margin-bottom: 20px; + font-weight: 500; +} + +/* Sub-heading in header */ +header h2 { + font-family: 'Fira Sans', sans-serif; + font-size: calc(19px + (22 - 18) * ((100vw - 320px) / (1140 - 320))); + color: #2F4F4F; + line-height: 1.6; + font-weight: 500; +} + +/* ======================= SECTIONS ======================== */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + section { + margin-left: auto; + margin-right: auto; + padding: 3.5% 0 4% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .section-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + section { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + section { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + section { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + section { padding: 7% 10% 8% 10% } +} + +/* Sections: main heading */ +section h1 { + font-family: 'Fira Sans', sans-serif; + font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (1140 - 320))); + letter-spacing: 1px; + color: #1435b3; + margin-bottom: 12px; + line-height: 1.2; + font-weight: 500; +} + +/* Sections: text paragraphs */ +section p { + font-family: 'Arvo', serif; + font-size: calc(17px + (21 - 17) * ((100vw - 320px) / (1140 - 320))); + color: #2F4F4F; + margin-bottom: 20px; + line-height: 1.7; +} + +/* Coloured backgrounds */ +.bg-header { background-color: #f5f9fb } +.bg-blue-light { background-color: #d8f0f5 } + +/* Default gradient direction: top to bottom */ +.bg-blue-dark { background-image: linear-gradient(#0575e6, #1435b3) } + +/* Gradient direction: left to right */ +.bg-blue-dark { background-image: linear-gradient(90deg, #0575e6, #1435b3) } + +/* Light blue section background: h1 headings and p text paragraphs */ +.bg-blue-light h1 { color: #1435b3 } +.bg-blue-light p { color: #222 } + +/* Dark blue section background: h1 headings and p text paragraphs */ +.bg-blue-dark h1 { color: #fff } +.bg-blue-dark p { color: #fff } + +/* =============== BUTTONS AND ICONS ============== */ + +.container-btn { + margin-top: 32px; margin-bottom: 32px; + display: flex; +} + +.container-btn .btn { + align-self: flex-start; +} + +@media (min-width: 767px) { + .container-btn a:first-child { margin-right: 40px } + /* .container-btn { justify-content: center } */ +} + +@media (max-width: 767px) { + .container-btn { flex-direction: column } + .container-btn a:first-child { margin-bottom: 32px } + .container-btn a:last-child { margin-bottom: 0 } + .container-btn .btn { align-self: center } +} + + +/* All buttons */ +.btn { + font-family: sans-serif; text-decoration: none; + padding: 14px 26px; font-size: 18px; font-weight: bold; + /* text-transform: uppercase; + letter-spacing: 1px; + word-spacing: 102%; */ +} + +/* Solid buttons */ +.btn-solid:link, .btn-solid:visited { + background-color: blue; + color: #fff; + } + + .btn-solid:focus, .btn-solid:hover, .btn-solid:active { + background-color: darkblue; + color: #fff; + } + + /* Gradient buttons */ + .btn-gradient:link, .btn-gradient:visited { + background-image: linear-gradient(90deg,#e052a0,#f15c41); + color: #fff; + } + + .btn-gradient:focus, .btn-gradient:hover, .btn-gradient:active { + background-image: linear-gradient(to right,#3ec7e0,#526bf4); + color: #fff; + } + + /* Ghost buttons */ + .btn-ghost:link, .btn-ghost:visited { + border: solid 2px #000; + color: #000; + background-color: transparent; + padding: 12px 24px; + } + + .btn-ghost:focus, .btn-ghost:hover, .btn-ghost:active { + border: solid 2px blue; + color: blue; + background-color: transparent; + padding: 12px 24px; + } + + /* Button corner styles */ +.btn-soft { border-radius: 5px } +.btn-rounded { border-radius: 30px } + +/* Buttons with Font Awesome icons */ +.btn i { margin-right: 10px; } + +/* =============== UTILTY CLASSES ============== */ +.text-center { text-align: center !important } \ No newline at end of file diff --git a/exercises/assets/css/forms.css b/exercises/assets/css/forms.css new file mode 100644 index 0000000..5f8a56d --- /dev/null +++ b/exercises/assets/css/forms.css @@ -0,0 +1,273 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + + +/* ============== HEADERS AND SECTIONS ============ */ + +/* Default header and widths */ +header, section { width: 100% } + +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child { margin-bottom: 0 } + +/* =================== HEADER ================ */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + header { + margin-left: auto; + margin-right: auto; + padding: 1% 0 3% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .header-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + header { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + header { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + header { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + header { padding: 7% 10% 8% 10% } +} + +/* Image in header */ +header img { + max-width: 800px; + margin-left: auto; + margin-right: auto; + margin-bottom: 24px; +} + +/* Main heading in header */ +header h1 { + font-family: 'Fira Sans', sans-serif; + font-size: calc(48px + (84 - 48) * ((100vw - 320px) / (1140 - 320))); + color: #1435b3; + letter-spacing: 1px; + margin-bottom: 20px; + font-weight: 500; +} + +/* Sub-heading in header */ +header h2 { + font-family: 'Fira Sans', sans-serif; + font-size: calc(19px + (22 - 18) * ((100vw - 320px) / (1140 - 320))); + color: #2F4F4F; + line-height: 1.6; + font-weight: 500; +} + +/* ======================= SECTIONS ======================== */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + section { + margin-left: auto; + margin-right: auto; + padding: 3.5% 0 4% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .section-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + section { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + section { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + section { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + section { padding: 7% 10% 8% 10% } +} + +/* Sections: main heading */ +section h1 { + font-family: 'Fira Sans', sans-serif; + font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (1140 - 320))); + letter-spacing: 1px; + color: #1435b3; + margin-bottom: 12px; + line-height: 1.2; + font-weight: 500; +} + +/* Sections: text paragraphs */ +section p { + font-family: 'Arvo', serif; + font-size: calc(17px + (21 - 17) * ((100vw - 320px) / (1140 - 320))); + color: #2F4F4F; + margin-bottom: 20px; + line-height: 1.7; +} + +/* Coloured backgrounds */ +.bg-header { background-color: #f5f9fb } +.bg-blue-light { background-color: #d8f0f5 } + +/* Default gradient direction: top to bottom */ +.bg-blue-dark { background-image: linear-gradient(#0575e6, #1435b3) } + +/* Gradient direction: left to right */ +.bg-blue-dark { background-image: linear-gradient(90deg, #0575e6, #1435b3) } + +/* Light blue section background: h1 headings and p text paragraphs */ +.bg-blue-light h1 { color: #1435b3 } +.bg-blue-light p { color: #222 } + +/* Dark blue section background: h1 headings and p text paragraphs */ +.bg-blue-dark h1 { color: #fff } +.bg-blue-dark p { color: #fff } + + +/* =============== BUTTONS AND ICONS ============== */ +.container-btn { + margin-top: 32px; margin-bottom: 32px; + display: flex; +} + +.container-btn .btn { + align-self: flex-start; +} + +@media (min-width: 767px) { + .container-btn a:first-child { margin-right: 40px } +} + +@media (max-width: 767px) { + .container-btn { flex-direction: column } + .container-btn a:first-child { margin-bottom: 32px } + .container-btn a:last-child { margin-bottom: 0 } +} + +/* All buttons */ +.btn { + font-family: sans-serif; text-decoration: none; + padding: 14px 26px; font-size: 18px; font-weight: bold; +} + +/* Solid buttons */ +.btn-solid, .btn-solid:link, .btn-solid:visited { + background-color: blue; + color: #fff; +} + +.btn-solid:focus, .btn-solid:hover, .btn-solid:active { + background-color: darkblue; + color: #fff; +} + +/* Gradient buttons */ +.btn-gradient, .btn-gradient:link, .btn-gradient:visited { + background-image: linear-gradient(90deg,#e052a0,#f15c41); + color: #fff; +} + + .btn-gradient:focus, .btn-gradient:hover, .btn-gradient:active { + background-image: linear-gradient(to right,#3ec7e0,#526bf4); + color: #fff; +} + + /* Ghost buttons */ +.btn-ghost, .btn-ghost:link, .btn-ghost:visited { + border: solid 2px #000; + color: #000; + background-color: transparent; + padding: 12px 24px; +} + + .btn-ghost:focus, .btn-ghost:hover, .btn-ghost:active { + border: solid 2px blue; + color: blue; + background-color: transparent; + padding: 12px 24px; +} + +/* Button corner styles */ +.btn-soft { border-radius: 5px } +.btn-rounded { border-radius: 30px } + +/* Buttons with Font Awesome icons */ +.btn i { margin-right: 10px; } + + +/* =============== FORMS ============== */ +.container-form { + display: flex; + margin-top: 32px; margin-bottom: 32px; + align-items: stretch; + padding: 20px; background-color: lightgray; +} + +@media (min-width: 767px) { + .container-form input { margin-right: 32px; min-width: 320px } +} + +@media (max-width: 767px) { + .container-form { flex-direction: column } + .container-form input { margin-bottom: 24px; width: 100%; } +} + +.container-form .btn { padding: 6px 20px } +.container-form input { + padding: 6px 6px; + border: solid 1px gray; + font-size: 18px; + font-family: sans-serif; +} + +.container-form #form-status { + background-color: #e4f5e8; + border: solid 1px green; + padding: 10px; + line-height: 1.1; + font-size: 18px; + color: #000; + display: none; + font-family: sans-serif; + margin-top: 12px; + max-width: 320px; +} + +/* =============== UTILITY CLASSES ============== */ +.text-center { text-align: center !important } \ No newline at end of file diff --git a/exercises/assets/css/global.css b/exercises/assets/css/global.css new file mode 100644 index 0000000..38e2922 --- /dev/null +++ b/exercises/assets/css/global.css @@ -0,0 +1,188 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1600px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +/* Desktops */ +@media (min-width: 768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width: 767px) { body { padding: 12% 8% } } + +body { + font-family: sans-serif; + background-color: #3B1E00; + color : white; + text-align: center; + font-family: 'Fjalla One', sans-serif; +} + +img { + border-radius: 50%; + width : 20%; + margin-top:100px; + display: block; + margin-left: auto; + margin-right: auto; + box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.75); +} + +h1 { + font-size: 78px; + font-weight: normal; + letter-spacing: -2px; + margin-bottom: 12px; + line-height: 1.2; + font-family: 'Heebo', sans-serif; +} + +h2 { + font-size: 42px; + letter-spacing: 6px; + margin-bottom: 48px; + line-height: 1.2; +} + +h3 { + font-size: 24px; + margin-top: 48px; + margin-bottom: 20px; + line-height: 1.2; + text-transform: uppercase; +} + +p { + font-size: 20px; + margin-bottom: 16px; + text-decoration: none; + color : lightgray; +} +p.hover { + color : white; + font-weight : bold; +} + +a { + text-decoration: none; + color : lightgray; +} +a:hover { + color : white; + font-weight : bold; + animation:textSpawn 1s; + } @keyframes textSpawn{ + 0%{ + opacity:0.3 + } + 100%{ + opacity:1 + } + } + +.animate-spawn{ + position:relative; + animation:animateSpawn 5s; + } @keyframes animateSpawn{ + 0%{ + opacity:0 + } + 100%{ + opacity:1 + } + } + +.head-bar-color { + background-color: antiquewhite; + color: #222; + margin-bottom: 30px; + margin-top: -50px; +} + +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + + +/* ============== HEADERS AND SECTIONS ============ */ + +/* Default header and widths */ +header, section { width: 100% } + +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child { margin-bottom: 0 } + + + +/* ======================= SECTIONS ======================== */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + section { + margin-left: auto; + margin-right: auto; + padding: 3.5% 0 4% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .section-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + section { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + section { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + section { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + section { padding: 7% 10% 8% 10% } +} + +/* Coloured backgrounds */ +.bg-header { background-color: #f5f9fb } +.bg-blue-light { background-color: #d8f0f5 } +.bg-blue-dark { background-color: #1435b3 } + +/* Light blue section background: h1 headings and p text paragraphs */ +.bg-blue-light h1 { color: #1435b3 } +.bg-blue-light p { color: #222 } + +/* Dark blue section background: h1 headings and p text paragraphs */ +.bg-blue-dark h1 { color: #fff } +.bg-blue-dark p { color: #fff } + + +/* =============== UTILTY CLASSES ============== */ +.text-center { text-align: center !important } + +.link { + border-bottom: 1px solid lightblue; +} \ No newline at end of file diff --git a/exercises/assets/css/hero-image.css b/exercises/assets/css/hero-image.css new file mode 100644 index 0000000..0f21220 --- /dev/null +++ b/exercises/assets/css/hero-image.css @@ -0,0 +1,154 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: sans-serif; +} + + +/* Horizontal spacing: Desktops */ +@media (min-width: 768px) { .hero-text-container { padding: 0 7% 3% 7% } } + +/* Horizontal spacing: Mobiles */ +@media (max-width: 767px) { .hero-text-container { padding: 0 12% 5% 12% } } + +.hero-block { + min-height: 500px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + background-color: gray; + overflow: none; +} + +@media (min-width: 768px) { + .hero-block { height: 80vh } +} + +.hero-text-container { padding: 0 12% 4% 12%; z-index: 2 } + +.hero-bg-media { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + z-index: 0; +} + +.hero-bg-media img { + object-fit: cover; width: 100%; height: 100%; +} + +.bg-overlay { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + z-index: 1; + background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)); +} + +.hero-block h1, .hero-block h2 { + line-height: 1.2; + color:#fff; + text-shadow: 2px 2px #222; +} + +.hero-block h1 { + font-size: calc(64px + (112 - 64) * ((100vw - 320px) / (1600 - 320))); + margin-bottom: 24px; +} + +.hero-block h2 { + font-weight: normal; + font-size: calc(22px + (54 - 22) * ((100vw - 320px) / (1600 - 320))); + text-transform: uppercase; +} + +/** + * ---------------------------------------- + * animation slide-in-top + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + } + @keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +.slide-in-top { + -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + + +.slide-in-left { + -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +/** + * ---------------------------------------- + * animation slide-in-left + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + } + @keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} + + +/* ================ UTILITY CLASSES ============= */ +.text-center { text-align: center } \ No newline at end of file diff --git a/exercises/assets/css/hero-text.css b/exercises/assets/css/hero-text.css new file mode 100644 index 0000000..11da619 --- /dev/null +++ b/exercises/assets/css/hero-text.css @@ -0,0 +1,131 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background-color: beige; +} + +.hero-block { + min-height: 500px; + display: flex; + flex-direction: column; + justify-content: center; + background-color: gray; + background-image: linear-gradient(90deg,#ff0000,#6b0000); +} + +@media (min-width: 768px) { + .hero-block { height: 80vh } +} + +.hero-text-container { padding: 0 12% 4% 12% } + +.hero-block h1, .hero-block h2 { + line-height: 1.2; + color:#000; + text-shadow: 2px 2px #434343; +} + +.hero-block h1 { + font-size: calc(64px + (112 - 64) * ((100vw - 320px) / (1600 - 320))); + margin-bottom: 24px; +} + +.hero-block h2 { + font-weight: normal; + font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320))); + text-transform: uppercase; +} + +.slide-in-top { + -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.slide-in-left { + -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +/** + * ---------------------------------------- + * animation slide-in-top + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + } + @keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + } + + +/** + * ---------------------------------------- + * animation slide-in-left + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + } + @keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + } + +/* ================ UTILITY CLASSES ============= */ +.text-center { text-align: center } + diff --git a/exercises/assets/css/style-1.css b/exercises/assets/css/style-1.css new file mode 100644 index 0000000..b38128d --- /dev/null +++ b/exercises/assets/css/style-1.css @@ -0,0 +1,50 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +body { background-color: lightcyan } + +/* Desktops */ +@media (min-width: 768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width: 767px) { body { padding: 12% 8% } } + + +h1 { + color: blue; + font-size: 84px; + text-align: center; + font-weight: normal; + letter-spacing: -2px; + margin-bottom: 32px; +} + +h2 { + font-size: 36px; + margin-bottom: 4px; + color: blue; +} + +h3 { + font-size: 24px; + margin-bottom: 4px; + color: blue; +} + +p { + font-size: 18px; + font-family: sans-serif; + line-height: 1.6; + margin-bottom: 20px; + color: darkslateblue; +} diff --git a/exercises/assets/css/style-10.css b/exercises/assets/css/style-10.css new file mode 100644 index 0000000..15de4d8 --- /dev/null +++ b/exercises/assets/css/style-10.css @@ -0,0 +1,136 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +body { + background-color: #f8f5f3; + border-top: solid 20px #f820c0; + border-bottom: solid 20px #f820c0 +} + + +/* ==== Web page width ==== */ + +/* Desktops */ +@media (min-width:768px) { body { padding: 4% 18% } } + + +/* Mobiles */ +@media (max-width:767px) { body { padding: 12% 8% } } + + +/* Headings */ + +h1 { + font-family: 'Playfair Display', serif; + font-size: 64px; + letter-spacing: -1px; + text-align: center; + margin-bottom: 20px; + padding-bottom: 10px; + font-weight: normal; +} + +h2 { + font-family: 'Playfair Display', serif; + font-size: 36px; + text-align: center; + margin-bottom: 24px; + color: #f820c0 +} + +h3 { + font-family: 'Playfair Display', serif; + font-weight: bold; + font-size: 36px; + margin-top: 42px; + margin-bottom: 6px; +} + +/* Text paragraphs */ + +p { + font-family: 'Montserrat', sans-serif; + font-size: 20px; + line-height: 1.7; + margin-bottom: 16px; +} + +/* Images */ + +img { margin-bottom: 20px } + + +/* === Panel boxes === */ +.important-note-box { + margin: 54px 0; + padding: 16px; + border-style: solid; + border-width: 1px; + border-color: #000; +} + +/* Child sub-heading h3 inside panel boxes */ +.important-note-box h3 { + font-family: 'Montserrat', sans-serif; + font-size: 20px; + margin-top: 0; + margin-bottom: 2px; + letter-spacing: 1px; + text-transform: uppercase; +} + +/* Child paragraph p inside panel boxes */ +.important-note-box p { + font-size: 18px; + line-height: 1.5; + margin-bottom: 0; +} + +/* === Four different panel box styles === */ + +/* Panel box style 1 */ +.important-note-box.box-style-1 { + border-color: #1FA441; + box-shadow: 8px 10px 8px #888; + background-color: #E4F5E8; + } + + .important-note-box.box-style-1 h3 { color: #1FA441 } + + /* Panel box style 2 */ +.important-note-box.box-style-2 { + padding: 16px 0 16px 0; + border-width: 8px 0 4px 0; + border-color: #044E6C; + } + + .important-note-box.box-style-2 h3 { color: #044E6C } + .important-note-box.box-style-2 p { color: #044E6C } + + /* Panel box style 3 */ +.important-note-box.box-style-3 { + border-width: 0 0 0 20px; + border-left-color: #E66465; + background-color: #FFE7E8 +} + + /* Panel box style 4 */ +.important-note-box.box-style-4 { + padding: 22px; + border-radius: 10px; + border-color: #2c4763; + background-color: #1f364d; + } + + .important-note-box.box-style-4 h3 { color: #9cb3c9 } + .important-note-box.box-style-4 p { color: #fff } \ No newline at end of file diff --git a/exercises/assets/css/style-11.css b/exercises/assets/css/style-11.css new file mode 100644 index 0000000..6a382cd --- /dev/null +++ b/exercises/assets/css/style-11.css @@ -0,0 +1,152 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + + +/* ============== HEADERS AND SECTIONS ============ */ + +/* Default header and widths */ +header, section { width: 100% } + +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child { margin-bottom: 0 } + +/* =================== HEADER ================ */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + header { + margin-left: auto; + margin-right: auto; + padding: 1% 0 3% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .header-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + header { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + header { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + header { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + header { padding: 7% 10% 8% 10% } +} + +/* Image in header */ +header img { + max-width: 800px; + margin-left: auto; + margin-right: auto; + margin-bottom: 24px; +} + +/* Main heading in header */ +header h1 { + font-family: 'Roboto Condensed', sans-serif; + font-size: calc(48px + (84 - 48) * ((100vw - 320px) / (1140 - 320))); + color: #3e414f; + letter-spacing: 8px; + margin-bottom: 20px; + text-transform: uppercase; + word-spacing: 102%; +} + +/* Sub-heading in header */ +header h2 { + font-family: 'Roboto Condensed', sans-serif; + font-size: calc(19px + (26 - 18) * ((100vw - 320px) / (1140 - 320))); + color: #000; + line-height: 1.6; +} + +/* ======================= SECTIONS ======================== */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + section { + margin-left: auto; + margin-right: auto; + padding: 3.5% 0 4% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .section-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } +} + +/* Tablets and smaller desktops */ +@media (min-width: 1025px) and (max-width: 1199px ) { + section { padding: 3% 10% 4% 10% } +} + +/* Tablets */ +@media (min-width: 768px) and (max-width: 1024px) { + section { padding: 4% 5% 4% 5% } +} + +/* Larger mobiles */ +@media (min-width: 400px) and (max-width: 767px) { + section { padding: 7% 13% 8% 13% } +} + +/* Smaller mobiles */ +@media (max-width: 399px) { + section { padding: 7% 10% 8% 10% } +} + +/* Sections: main heading */ +section h1 { + font-family: 'Roboto Condensed', sans-serif; + font-size: calc(32px + (48 - 32) * ((100vw - 320px) / (1140 - 320))); + letter-spacing: 4px; + color: #e1f5fe; + margin-bottom: 12px; + line-height: 1.2; + text-transform: uppercase; + word-spacing: 102%; + font-weight: normal; +} + +/* Sections: text paragraphs */ +section p { + font-family: 'PT Sans', sans-serif; + font-size: calc(17px + (22 - 17) * ((100vw - 320px) / (1140 - 320))); + color: #fff; + margin-bottom: 20px; + line-height: 1.5; +} + +/* Coloured backgrounds */ +.bg-header { background-color: #b2e6fe } +.bg-dark-1 { background-color: #000000 } +.bg-dark-2 { background-color: #3e414f } + +/* =============== UTILTY CLASSES ============== */ +.text-center { text-align: center !important } \ No newline at end of file diff --git a/exercises/assets/css/style-12.css b/exercises/assets/css/style-12.css new file mode 100644 index 0000000..1905a6d --- /dev/null +++ b/exercises/assets/css/style-12.css @@ -0,0 +1,125 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +/* ======================= SECTIONS ======================== */ + +/* Regular and larger screens */ +@media (min-width: 1200px) { + section { + margin-left: auto; + margin-right: auto; + padding: 3.5% 0 4% 0; + padding-left: calc( (100% - 1140px)/2 ); + padding-right: calc( (100% - 1140px)/2 ); + } + .section-narrow { + padding-left: calc( (100% - 920px)/2 ); + padding-right: calc( (100% - 920px)/2 ); + } + } + + /* Tablets and smaller desktops */ + @media (min-width: 1025px) and (max-width: 1199px) { + section { padding: 3% 10% 4% 10% } + } + + /* Tablets */ + @media (min-width: 768px) and (max-width: 1024px) { + section { padding: 4% 5% 4% 5% } + } + + /* Larger mobiles */ + @media (min-width: 400px) and (max-width: 767px) { + section { padding: 7% 13% 8% 13% } + } + + /* Smaller mobiles */ + @media (max-width: 399px) { + section { padding: 7% 10% 8% 10% } + } +/* === COLUMN WIDTH ON MOBILES === */ +@media (max-width: 767px) { + .bono, .edge, .adam, .larry { + width: 100%; + } + } + +/* ==== Headings ==== */ + +h1 { + font-family: 'Roboto', sans-serif; + font-size: 64px; + text-align: center; + letter-spacing: -1px; + margin-bottom: 64px; +} + +h3 { + font-family: 'Roboto', sans-serif; + font-size: 28px; + margin-bottom: 2px; +} + +/* Paragraphs of text */ +p { + font-family: 'Roboto', sans-serif; + font-size: 18px; + color: #696969; + line-height: 1.5 +} + +/* == FLEXBOX PARENT CONTAINER == */ +.container-flexbox { + display: flex; + justify-content: space-between; + flex-wrap: wrap +} + +.bono { + background-color: #4081ec; + padding: 12px; + margin-bottom: 40px; + width: 23% +} + +.edge { + background-color: #ffbb33; + padding: 12px; + margin-bottom: 40px; + width: 23% +} + +.adam { + background-color: #f73345; + padding: 12px; + margin-bottom: 40px; + width: 23% +} + +.larry { + background-color: #e0e0e0; + padding: 12px; + margin-bottom: 40px; + width: 23% +} + +.bono h3, +.bono p, +.adam h3, +.adam p { color: #fff } + +.edge h3, +.edge p, +.larry h3, +.larry p { color: #000 } + diff --git a/exercises/assets/css/style-2.css b/exercises/assets/css/style-2.css new file mode 100644 index 0000000..e91cfaa --- /dev/null +++ b/exercises/assets/css/style-2.css @@ -0,0 +1,52 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +body { background-color: antiquewhite } + +/* Desktops */ +@media (min-width:768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width:767px) { body { padding: 12% 8% } } + +h1 { + font-size: 72px; + margin-bottom: 56px; + text-align: center; + letter-spacing: 4px; + font-family: sans-serif; + color: brown; +} + +h2 { + font-size: 30px; + margin-bottom: 64px; + font-family: sans-serif; + text-align: center; + line-height: 1.4; + text-transform: uppercase; + font-weight: normal; + color: brown; +} + +h3 { + font-size: 32px; + margin-bottom: 4px; + color: brown; +} + +p { + font-size: 22px; + line-height: 1.6; + margin-bottom: 20px; +} \ No newline at end of file diff --git a/exercises/assets/css/style-3.css b/exercises/assets/css/style-3.css new file mode 100644 index 0000000..3a2c9bd --- /dev/null +++ b/exercises/assets/css/style-3.css @@ -0,0 +1,47 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +body { background-color: purple } + +/* Desktops */ +@media (min-width:768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width:767px) { body { padding: 12% 8% } } + +h1 { + font-size: 84px; + margin-bottom: 64px; + text-align: center; + font-weight: normal; + letter-spacing: 4px; + color: white; +} + +h2 { + font-size: 28px; + margin-bottom: 4px; + margin-top: 54px; + text-transform: uppercase; + color: white; +} + +p { + font-size: 20px; + font-family: sans-serif; + line-height: 1.6; + margin-bottom: 20px; + color: white; +} + +a { color: white } \ No newline at end of file diff --git a/exercises/assets/css/style-4.css b/exercises/assets/css/style-4.css new file mode 100644 index 0000000..51b7953 --- /dev/null +++ b/exercises/assets/css/style-4.css @@ -0,0 +1,56 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +body { + background-color: #1f364d; + font-family: sans-serif +} + +/* Desktops */ +@media (min-width:768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width:767px) { body { padding: 12% 8% } } + +h1 { + font-size: 64px; + margin-bottom: 48px; + font-weight: normal; + letter-spacing: 4px; + color: white; +} + +h2 { + font-size: 32px; + margin-top: 30px; + margin-bottom: 4px; + letter-spacing: 1px; + color: deeppink; +} + +h3 { + font-size: 24px; + margin-top: 42px; + margin-bottom: 4px; + letter-spacing: 1px; + color: lightgreen; +} + +p { + font-size: 18px; + line-height: 1.6; + margin-bottom: 20px; + color: #81b8cd; +} + +a { color: white } \ No newline at end of file diff --git a/exercises/assets/css/style-5.css b/exercises/assets/css/style-5.css new file mode 100644 index 0000000..d2903b3 --- /dev/null +++ b/exercises/assets/css/style-5.css @@ -0,0 +1,91 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font: inherit; font-size: 100%; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + + +/* ================= ENDS ================ */ + +/* Desktops */ +@media (min-width: 768px) { body { padding: 4% 20%; } } + +/* Mobiles */ +@media (max-width: 767px) { body { padding: 12% 8% } } + + +/* Web page */ +body { + background-color: #FFFFBD; + font-family: 'Merriweather', serif; +} + +/* Main heading */ +h1 { + font-size: calc(48px + (84 - 48) * ((100vw - 320px) /(1600 - 320))); + line-height: 1.1; + font-weight: normal; + color: #3434B0; + letter-spacing: -1px; + text-align: center; + margin-bottom: 32px; +} + +/* Small headings */ +h2 { + font-size: calc(18px + (26 - 18) * ((100vw - 320px) /(1600 - 320))); + color:#3434B0; + line-height: 1.5; + margin-bottom: 42px; +} + +/* Smaller headings */ +h3 { + font-size: calc(32px + (38 - 32) * ((100vw - 320px) /(1600 - 320))); + color: #000; + letter-spacing:-1px; + margin-top: 40px; + margin-bottom: 2px; + line-height: 1.2; +} + +/* Text paragraphs */ +p { + font-size: calc(16px + (21 - 16) * ((100vw - 320px) /(1600 - 320))); + color: #455C80; + line-height: 1.6; + margin-top: 0; + margin-bottom: 22px; +} + +/* Images */ +img { + margin-bottom: 42px; + box-shadow: 8px 10px 8px #888; +} + +/* ====== HYPERLINK STYLES ====== */ + + +/* Passive link styles */ + +a:link, a:visited { + text-decoration: none; + padding-bottom: 2px; + color: #000; + border-bottom: solid 2px #000; +} + +/* Interactive link styles */ + +a:hover, a:focus, a:active { + text-decoration: none; + padding-bottom: 2px; + color: #f26f21; + border-bottom: solid 2px blue; +} \ No newline at end of file diff --git a/exercises/assets/css/style-6.css b/exercises/assets/css/style-6.css new file mode 100644 index 0000000..2b40c99 --- /dev/null +++ b/exercises/assets/css/style-6.css @@ -0,0 +1,74 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +/* Desktops */ +@media (min-width: 768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width: 767px) { body { padding: 12% 8% } } + +body {background-color: #c2ffc2 } + +h1, h2, h2 { color: #008000; letter-spacing: -2px; } + +/* Main heading */ +h1 { + font-family: 'Oswald', sans-serif; + font-weight: bold; + font-size: calc(38px + (64 - 38) * ((100vw - 320px) /(1600 - 320))); + line-height: 1.1; + margin-bottom: 30px; +} + +/* Small headings */ +h2 { + font-family: 'Oswald', sans-serif; + font-weight: bold; + font-size: calc(28px + (54 - 28) * ((100vw - 320px) /(1600 - 320))); + line-height: 1.3; + margin-top: 42px; + margin-bottom: 4px; + letter-spacing: 0.5px; +} + +/* Text paragraphs */ +p { + font-family: 'Lato', sans-serif; + font-size: calc(17px + (22 - 17) * ((100vw - 320px) /(1600 - 320))); + color: #011301; + line-height: 1.6; + margin-bottom: 20px; +} + + +/* Images */ +img { + margin-bottom: 32px; + border-radius: 15px; +} + +/* Passive link styles */ +a:link, a:visited { + text-decoration: none; + padding-bottom: 2px; + color: #006600; + border-bottom: solid 2px #006600; +} + +/* Interactive link styles */ +a:hover, a:focus, a:active { + text-decoration: none; + padding-bottom: 2px; + color: #222; + border-bottom: solid 2px #222; +} \ No newline at end of file diff --git a/exercises/assets/css/style-7.css b/exercises/assets/css/style-7.css new file mode 100644 index 0000000..516147b --- /dev/null +++ b/exercises/assets/css/style-7.css @@ -0,0 +1,72 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +/* Desktops */ +@media (min-width: 768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width: 767px) { body { padding: 12% 8% } } + + +/* Web page */ +body { + background-color: #d1274b +} + +/* Main heading */ +h1 { + font-family: serif; + font-weight: bold; + font-size: 112px; + color: #fff; + text-align: center; + line-height: 1.2; + margin-bottom: 30px; +} + +/* Small headings */ +h2 { + font-family: serif; + font-weight: bold; + font-size: 38px; + color: #fff; + text-align: center; + line-height: 1.3; + margin-bottom: 42px; + color:#DDA0DD +} + +/* Smaller headings */ +h3 { + font-family: serif; + font-weight: bold; + font-size: 56px; + color: #fff; + text-align: center; + line-height: 1.3; + letter-spacing:2px; + margin-top: 12px; + margin-bottom: 2px; +} + +/* Text paragraphs */ +p { + font-family: serif; + font-size: 28px; + color: #fff; + text-align: center; + line-height: 1.6; + margin-top:0; + margin-bottom: 32px; +} + diff --git a/exercises/assets/css/style-8.css b/exercises/assets/css/style-8.css new file mode 100644 index 0000000..3da301d --- /dev/null +++ b/exercises/assets/css/style-8.css @@ -0,0 +1,67 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +/* Desktops */ +@media (min-width: 768px) { body { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width: 767px) { body { padding: 12% 8% } } + + +/* Web page */ +body { + background-color: rgb(247,233,225) +} + +/* Main heading */ +h1 { + font-family: serif; + font-weight: bold; + font-size: 54px; + letter-spacing: -1px; + text-align: center; + margin-bottom: 32px; + line-height: 1.2; +} + +/* Small headings */ +h2 { + font-family: sans-serif; + font-weight: bold; + color: #5b569a; + font-size: 32px; + text-align:center; + margin-bottom: 42px; + line-height: 1.2; +} + +/* Smaller headings */ +h3 { + font-family: serif; + font-weight: bold; + font-size: 48px; + color: #5b569a; + margin-top: 32px; + margin-bottom: 4px; +} + +/* Text paragraphs */ +p { + font-family: sans-serif; + font-weight: normal; + font-size: 22px; + line-height: 1.6; + margin-top: 0; + margin-bottom: 20px; +} + diff --git a/exercises/assets/css/style-9.css b/exercises/assets/css/style-9.css new file mode 100644 index 0000000..2d5eef3 --- /dev/null +++ b/exercises/assets/css/style-9.css @@ -0,0 +1,85 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +h1, h2, h3, h4 { width: 100% } +input, button, textarea, select { font: inherit } + +/* ================= ENDS ================ */ + +/* ==== Web page width ==== */ + +/* Desktops */ +@media (min-width:768px) { body { padding: 4% 18% } } + + +/* Mobiles */ +@media (max-width:767px) { body { padding: 12% 8% } } + + +/* ==== Headings ==== */ + +h1 { + font-family: 'Roboto', sans-serif; + font-size: 64px; + text-align: center; + letter-spacing: -1px; + margin-bottom: 64px; +} + +h3 { + font-family: 'Roboto', sans-serif; + font-size: 28px; + margin-bottom: 2px; +} + +/* Paragraphs of text */ +p { + font-family: 'Roboto', sans-serif; + font-size: 18px; + color: #696969; + line-height: 1.5 +} + + +.bono { + background-color: #4081ec; + padding: 12px; + margin-bottom: 40px; + width: 220px +} + +.edge { + background-color: #ffbb33; + padding: 12px; + margin-bottom: 40px; + width: 220px +} + +.adam { + background-color: #f73345; + padding: 12px; + margin-bottom: 40px; + width: 220px +} + +.larry { + background-color: #e0e0e0; + padding: 12px; + margin-bottom: 40px; + width: 220px +} + +.bono h3, +.bono p, +.adam h3, +.adam p { color: #fff } + +.edge h3, +.edge p, +.larry h3, +.larry p { color: #000 } \ No newline at end of file diff --git a/exercises/assets/img/apple.png b/exercises/assets/img/apple.png new file mode 100644 index 0000000..64d0661 Binary files /dev/null and b/exercises/assets/img/apple.png differ diff --git a/exercises/assets/img/bedroom-arles-van-gogh.jpg b/exercises/assets/img/bedroom-arles-van-gogh.jpg new file mode 100644 index 0000000..604201c Binary files /dev/null and b/exercises/assets/img/bedroom-arles-van-gogh.jpg differ diff --git a/exercises/assets/img/blueberry.png b/exercises/assets/img/blueberry.png new file mode 100644 index 0000000..a21de87 Binary files /dev/null and b/exercises/assets/img/blueberry.png differ diff --git a/exercises/assets/img/book-of-kells.jpg b/exercises/assets/img/book-of-kells.jpg new file mode 100644 index 0000000..ddfe0e7 Binary files /dev/null and b/exercises/assets/img/book-of-kells.jpg differ diff --git a/exercises/assets/img/business.jpg b/exercises/assets/img/business.jpg new file mode 100644 index 0000000..fca3204 Binary files /dev/null and b/exercises/assets/img/business.jpg differ diff --git a/exercises/assets/img/business.png b/exercises/assets/img/business.png new file mode 100644 index 0000000..3833c70 Binary files /dev/null and b/exercises/assets/img/business.png differ diff --git a/exercises/assets/img/cafe-terrace-at-night-van-gogh.jpg b/exercises/assets/img/cafe-terrace-at-night-van-gogh.jpg new file mode 100644 index 0000000..ec8f8ac Binary files /dev/null and b/exercises/assets/img/cafe-terrace-at-night-van-gogh.jpg differ diff --git a/exercises/assets/img/cheers.jpg b/exercises/assets/img/cheers.jpg new file mode 100644 index 0000000..0119155 Binary files /dev/null and b/exercises/assets/img/cheers.jpg differ diff --git a/exercises/assets/img/cliffs-of-moher.jpg b/exercises/assets/img/cliffs-of-moher.jpg new file mode 100644 index 0000000..770d3af Binary files /dev/null and b/exercises/assets/img/cliffs-of-moher.jpg differ diff --git a/exercises/assets/img/dublin-zoo.jpg b/exercises/assets/img/dublin-zoo.jpg new file mode 100644 index 0000000..4a3a377 Binary files /dev/null and b/exercises/assets/img/dublin-zoo.jpg differ diff --git a/exercises/assets/img/guinness-storehouse.jpg b/exercises/assets/img/guinness-storehouse.jpg new file mode 100644 index 0000000..32d61d3 Binary files /dev/null and b/exercises/assets/img/guinness-storehouse.jpg differ diff --git a/exercises/assets/img/happy-users.png b/exercises/assets/img/happy-users.png new file mode 100644 index 0000000..b99f70a Binary files /dev/null and b/exercises/assets/img/happy-users.png differ diff --git a/exercises/assets/img/lemons-removebg-preview.png b/exercises/assets/img/lemons-removebg-preview.png new file mode 100644 index 0000000..7b8e23f Binary files /dev/null and b/exercises/assets/img/lemons-removebg-preview.png differ diff --git a/exercises/assets/img/national-aquatic-centre.jpg b/exercises/assets/img/national-aquatic-centre.jpg new file mode 100644 index 0000000..661c299 Binary files /dev/null and b/exercises/assets/img/national-aquatic-centre.jpg differ diff --git a/exercises/assets/img/programmer.png b/exercises/assets/img/programmer.png new file mode 100644 index 0000000..9e752d0 Binary files /dev/null and b/exercises/assets/img/programmer.png differ diff --git a/exercises/assets/img/starry-night-van-gogh.jpg b/exercises/assets/img/starry-night-van-gogh.jpg new file mode 100644 index 0000000..aef204f Binary files /dev/null and b/exercises/assets/img/starry-night-van-gogh.jpg differ diff --git a/exercises/assets/img/student-computer-screen.jpg b/exercises/assets/img/student-computer-screen.jpg new file mode 100644 index 0000000..fcb8874 Binary files /dev/null and b/exercises/assets/img/student-computer-screen.jpg differ diff --git a/exercises/assets/img/three-staff.png b/exercises/assets/img/three-staff.png new file mode 100644 index 0000000..3584bc5 Binary files /dev/null and b/exercises/assets/img/three-staff.png differ diff --git a/exercises/assets/img/visual-data.png b/exercises/assets/img/visual-data.png new file mode 100644 index 0000000..d70e3fe Binary files /dev/null and b/exercises/assets/img/visual-data.png differ diff --git a/exercises/assets/img/watermelon.png b/exercises/assets/img/watermelon.png new file mode 100644 index 0000000..071a72a Binary files /dev/null and b/exercises/assets/img/watermelon.png differ diff --git a/exercises/assets/img/yellow-house-van-gogh.jpg b/exercises/assets/img/yellow-house-van-gogh.jpg new file mode 100644 index 0000000..52b4c0b Binary files /dev/null and b/exercises/assets/img/yellow-house-van-gogh.jpg differ diff --git a/exercises/buttons-icons.html b/exercises/buttons-icons.html new file mode 100644 index 0000000..7dd2724 --- /dev/null +++ b/exercises/buttons-icons.html @@ -0,0 +1,69 @@ + + + + + + + Sample web page with buttons and icons + + + + + + + + + + + + + + + +
+
+ +
+

About Us

+ staff members +

We are an award-winning web, mobile and digital design agency. We can bring your ideas to life online, and transform visionary products and services into successful ones.

+
+ +
+

Section Heading One

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Two

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +
+ Order Now + Learn more +
+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Three

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Four

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+
+ + + \ No newline at end of file diff --git a/exercises/forms.html b/exercises/forms.html new file mode 100644 index 0000000..0182cbf --- /dev/null +++ b/exercises/forms.html @@ -0,0 +1,120 @@ + + + + + + + Sample web page with buttons and icons + + + + + + + + + + + + + + + +
+
+ +
+

About Us

+ staff members +

We are an award-winning web, mobile and digital design agency. We can bring your ideas to life online, and transform visionary products and services into successful ones.

+
+ +
+

Section Heading One

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Two

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +
+ Order Now + Learn more +
+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+ +
+ +
+

Section Heading Three

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Four

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +
+
+ + + +
+
+
+ + +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+
+ + + + \ No newline at end of file diff --git a/exercises/hero-image.html b/exercises/hero-image.html new file mode 100644 index 0000000..166b418 --- /dev/null +++ b/exercises/hero-image.html @@ -0,0 +1,40 @@ + + + + + + + + Hero Block with Image + + + + + + + + + + + + +
+ +
+

Aurelien Rebourg

+

Web Developement learner

+
+ +
+ sample background image +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/exercises/hero-text.html b/exercises/hero-text.html new file mode 100644 index 0000000..2b47310 --- /dev/null +++ b/exercises/hero-text.html @@ -0,0 +1,32 @@ + + + + + + + + Hero Block with Text + + + + + + + + + + +
+ +
+

Aurelien Rebourg

+

Leaner Web Developer

+
+ +
+ + + + + + \ No newline at end of file diff --git a/exercises/page-1.html b/exercises/page-1.html new file mode 100644 index 0000000..476a87e --- /dev/null +++ b/exercises/page-1.html @@ -0,0 +1,34 @@ + + + + + + + A Tale of Two Cities + + + + + + +

A Tale of Two Cities

+ +

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.

+ +

We had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.

+ +

Small Heading

+

There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of France. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.

+ +

Small Heading

+

All these things, and a thousand like them, came to pass in and close upon the dear old year one thousand seven hundred and seventy-five. Environed by them, while the Woodman and the Farmer worked unheeded, those two of the large jaws, and those other two of the plain and the fair faces, trod with stir enough, and carried their divine rights with a high hand.

+ +

Smaller Heading

+

A wonderful fact to reflect upon, that every human creature is constituted to be that profound secret and mystery to every other. A solemn consideration, when I enter a great city by night, that every one of those darkly clustered houses encloses its own secret; that every room in every one of them encloses its own secret; that every beating heart in the hundreds of thousands of breasts there, is, in some of its imaginings, a secret to the heart nearest it!

+ +

by Charles Dickens, published by Chapman & Hall in 1859.

+ +

Back to Home page

+ + + diff --git a/exercises/page-10.html b/exercises/page-10.html new file mode 100644 index 0000000..c65e11d --- /dev/null +++ b/exercises/page-10.html @@ -0,0 +1,53 @@ + + + + + + + + + + Sample web page with highlighted panels + + + + + + + + + + + + +

University of Tabi

+ + Student at computer screen + +

An innovative institution delivering world-class student experiences since 1975 .

+ +

Mission Statement

+

The Mission of Tabi University is to provide a nurturing environment and innovative curriculum that will inspire students to become competent professionals with the ability to think critically and improve quality of life for individuals and society.

+ +
+

Important Note

+

The text on this page contains important information for intending students and for other parties to their grant applications. This document will be updated to reflect any changes in legislation.

+
+ +
+

Important Note

+

The text on this page contains important information for intending students and for other parties to their grant applications. This document will be updated to reflect any changes in legislation.

+
+ +
+

Important Note

+

The text on this page contains important information for intending students and for other parties to their grant applications. This document will be updated to reflect any changes in legislation.

+
+ +
+

Important Note

+

The text on this page contains important information for intending students and for other parties to their grant applications. This document will be updated to reflect any changes in legislation.

+
+ + + \ No newline at end of file diff --git a/exercises/page-11.html b/exercises/page-11.html new file mode 100644 index 0000000..baa2478 --- /dev/null +++ b/exercises/page-11.html @@ -0,0 +1,62 @@ + + + + + + + + HTML5 Sample Web Page: Sections with alternating dark background colours. + + + + + + + + + + + + +
+
+ +
+

About Us

+ staff members +

We are an award-winning web, mobile and digital design agency. We can bring your ideas to life online, and transform visionary products and services into successful ones.

+
+ +
+

Section Heading One

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Two

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Three

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+

Section Heading Four

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea assumenda qui totam nam corrupti dolorum. Dolores minus doloribus obcaecati cupiditate odit voluptatem recusandae maxime consectetur, delectus labore asperiores enim nobis.

+ +

In pellentesque, odio suscipit ornare vulputate, est nunc consequat neque, nec faucibus nulla arcu id ligula. Proin laoreet cursus vulputate. Curabitur accumsan leo ipsum, et pellentesque velit pretium at. Etiam aliquam, ipsum eu tincidunt.

+
+ +
+
+ + + \ No newline at end of file diff --git a/exercises/page-12.html b/exercises/page-12.html new file mode 100644 index 0000000..b0d9892 --- /dev/null +++ b/exercises/page-12.html @@ -0,0 +1,52 @@ + + + + + + + Flexbox + + + + + + + + + + + + +
+
+ +
+
+ +
+

Bono

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+

Edge

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+

Adam

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+

Larry

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+
+ +
+
+ + \ No newline at end of file diff --git a/exercises/page-2.html b/exercises/page-2.html new file mode 100644 index 0000000..f16fb5e --- /dev/null +++ b/exercises/page-2.html @@ -0,0 +1,32 @@ + + + + + + + IBAT Chocolates + + + + + + +

IBAT Chocolates

+ +

We transform ethically-sourced organically-grown, high-quality cocoa beans into delicious chocolate.

+ +

O'Payo

+

Ethically-sourced cocoa beans supplied by Ingemann Fine Cocoa. Based in Tipitapa, Nicaragua, Ingemann currently receives wet beans from 450 small holders. These farmers receive a premium of 25% on their wet beans (compared to market rate for dried beans) as well as cultivation support and collection at farm gate.

+ +

Ingredients: Organic cocoa beans and organic sugar.

+ +

Nahua

+

Nahua is Costa Rica's leading fine flavour cocoa producer with a social mission committed to improving the lives of the local smallholder farmers. Like our other cocoa bean suppliers, Nuhua collects wet beans at the farm gate and ferments them centrally. This takes the burden of mastering the complex fermentation process off the farmer and ensures the cocoa beans are fermented and dried to an exacting standard.

+ +

Ingredients: Cocoa beans and organic sugar.

+ +

Back to Home page

+ + + + diff --git a/exercises/page-3.html b/exercises/page-3.html new file mode 100644 index 0000000..c703501 --- /dev/null +++ b/exercises/page-3.html @@ -0,0 +1,31 @@ + + + + + + + Purple Rain + + + + + + +

Purple Rain

+ +

Introduction

+

Purple Rain is a song by American musician Prince and his backing band The Revolution. It is the title track from the 1984 album of the same name, which in turn is the soundtrack album for the 1984 film of the same name.

+ +

Origins

+

Originally written as a country song and intended to be a collaboration with Stevie Nicks, Prince explained the meaning of the song as follows: "When there's blood in the sky... red and blue = purple. Purple rain pertains to the end of the world and being with the one you love and letting your faith/god guide you through the purple rain."

+ +

Recording

+

The song was recorded during a benefit concert for the Minnesota Dance Theatre at the First Avenue nightclub in Minneapolis on August 3, 1983. City Pages described the 70-minute performance as Prince's "sweatiest and most soulful hometown concert yet."

+ +

Reception and legacy

+

The song ranked number 144 on the Rolling Stone list of the 500 Greatest Songs of All Time. Q magazine placed it at number 40 in its list of the 100 Greatest Guitar Tracks, and Pitchfork named it the best song of the 1980s. The song is also included in The Rock and Roll Hall of Fame's 500 Songs that Shaped Rock and Roll.

+ +

Source: Wikipedia.

+

Back to Home page

+ + diff --git a/exercises/page-4.html b/exercises/page-4.html new file mode 100644 index 0000000..8790dc4 --- /dev/null +++ b/exercises/page-4.html @@ -0,0 +1,35 @@ + + + + + + + + Lorem Ipsum Text + + + + + + +

Lorem Ipsum Text

+ +

Introduction

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, nemo tenetur? Illum commodi voluptate voluptatibus ab fuga dolorum, totam corporis, quas eaque excepturi et ipsam provident nulla quia optio aperiam!

+ +

Sub-heading

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aliquid, consectetur ea eum quaerat earum voluptatibus similique dicta, iste magnam ratione nihil, sapiente fugit laudantium provident explicabo aperiam labore maiores.

+ +

Sub-heading

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt est facere veritatis ab nesciunt accusamus harum nam et, reiciendis culpa a, hic impedit placeat quibusdam ea corrupti soluta! Omnis, repellendus!

+ +

Smaller Sub-heading

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium doloremque asperiores veniam perspiciatis illo at labore praesentium non est totam quae laborum qui quod, illum amet eum facilis optio inventore?

+ +

Sub-heading

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia eius non magnam vitae est odio ex molestiae corrupti tempore ipsa ipsum deleniti, saepe facere aspernatur expedita excepturi incidunt suscipit totam!

+ +

Text Source: Lorem Ipsum, a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.

+

Back to Home page

+ + diff --git a/exercises/page-5.html b/exercises/page-5.html new file mode 100644 index 0000000..4c43259 --- /dev/null +++ b/exercises/page-5.html @@ -0,0 +1,56 @@ + + + + + + + Vincent van Gogh + + + + + + + + + + + + + + +

Vincent van Gogh

+ +

Among the most famous figures in Western art, Vincent van Gogh (1853-1890) was a Dutch post-impressionist painter who created about 2,100 artworks. They include landscapes, still lifes, portraits and self-portraits, and are characterised by bold colours and dramatic, impulsive and expressive brushwork.

+ +

The Arles Years

+

Van Gogh's two years at Arles in France (1888–89) were one of his most artistically productive periods. He was enchanted by the local countryside and light; his works from this period are rich in yellow, ultramarine and mauve. Among the most well-known works of that time is an oil painting of his rented room, entitled Bedroom in Arles.

+ +Bedroom in Arles, van Gogh +

On view: Vincent van Gogh Museum, Amsterdam

+ +

In Arles, the painter began a friendship with the owners of a local hotel, known as the Cafe de la Gare. The building inspired two more famous creations. The first of which is known as The Yellow House.

+ +The Yellow House, van Gogh +

On view: Vincent van Gogh Museum, Amsterdam

+ +

The second painting is one of many people's favourites: The Cafe Terrace at Night. The location at the Place du Forum in Arles was refurbished to replicate van Gogh's painting.

+ +The Cafe Terrace at Night, van Gogh +

On view: Kröller-Müller Museum, Otterlo

+ +

Life, Suffering and Death

+ +

After his time at Arles, van Gogh moved to a former monastery at nearby Saint-Remy. The building's garden and surrounding countryside became the main subjects of his paintings. Some of his works from this time are characterised by swirls, such as The Starry Night.

+ +Starry Night, van Gogh +

On view: The Museum of Modern Art, New York

+ +

Van Gogh suffered from mental illness all his life. He was not commercially successful, and his suicide at aged 37 came after years of poverty.

+ +

Van Gogh is known to have sold only a single painting in his lifetime; for 400 francs or about €1,800 in today's value. In 1990, one of his paintings, Portrait of Dr. Gachet, fetched $82.5 million at auction.

+ +

Source: All text and images from Wikipedia.

+ + + \ No newline at end of file diff --git a/exercises/page-6.html b/exercises/page-6.html new file mode 100644 index 0000000..5e05c52 --- /dev/null +++ b/exercises/page-6.html @@ -0,0 +1,74 @@ + + + + + + + + + Ireland's Top Five Visitor Attractions + + + + + + + + + + + + + +

Ireland's Top Five Visitor Attractions

+ + +

1: Guinness Storehouse, Dublin

+

2: Cliffs of Moher, Co. Clare

+

3: Dublin Zoo

+

4: National Aquatic Centre, Dublin

+

5: Book of Kells Exhibition, Trinity College, Dublin

+ + +

Visiting Ireland is like taking a great big breath of fresh air. Our welcoming country boasts Europe's largest green space to the longest defined coastal touring route in the world, Ireland is a country brimming with fun and fascinating ways for visitors to spend their days and nights. You'll discover just the right mountain to climb, painting to pore over, sports team to cheer on, or whatever else takes your fancy.

+

What are Ireland's most popular tourist attractions? According to a July 2019 report by the Irish Tourist Board, the top five paid visitor attractions are those listed below.

+ + +

Guinness Storehouse, Dublin

+ Guinness Storehouse + +

Located at St. James's Gate Brewery, the Guinness Storehouse is the home of the Black Stuff, the heart of Dublin and an unforgettable element of any Irish adventure. An exciting visitor experience begins at the bottom of the world's largest pint glass, where you will learn the story of the beer's four ingredients: water, barley, hops and yeast. Your journey continues up through seven floors filled with interactive experiences that fuse Guinness' long brewing heritage with Ireland's rich history. At the top, you'll be rewarded with a pint of perfection in our world-famous rooftop Gravity Bar. Now that's our kind of higher education!

+

Annual Number of Visitors: 1,711,281

+ + +

Cliffs of Moher, Co. Clare

+ Cliffs of Moher + +

You simply cannot travel to Ireland without paying a visit to the breathtaking Cliffs of Moher, situated in County Clare along the Wild Atlantic Way. The Cliffs of Moher have majestically faced the Atlantic for over 350 million years and their beauty is incomparable. The Cliffs are an area of outstanding natural beauty that is recognised as a UNESCO Global Geopark. Also, they are a haven for wildlife. Over 30,000 breeding bird pairs make the Cliffs their home annually, among them guillemots, razorbills, kittiwakes, peregrine falcons and the ever-popular cute puffins.

+

Annual Number of Visitors: 1,527,000

+ + +

Dublin Zoo

+ Dublin Zoo + +

Established in 1830, Dublin Zoo works in partnership with zoos worldwide to make a significant contribution to the conservation of the endangered species on Earth. Located in Dublin's Phoenix Park and covering over 28 hectares, the Zoo is divided into the following areas: Asian Forests, Orangutan Forest, The Kaziranga Forest Trail, Fringes of the Arctic, Sea Lion Cove, African Plains, Roberts House, House of Reptiles, City Farm and South American House. Home to some 400 animals in a safe environment, Dublin Zoo is where education and conservation combine for an exciting and stimulating day out for all the family.

+

Annual Number of Visitors: 1,264,300

+ + +

National Aquatic Centre, Dublin

+ + National Aquatic Centre + +

Located in the Dublin suburb of Blanchardstown, Dublin, the National Aquatic Centre is Ireland's largest and most popular Water Park. The 2,500-capacity venue has won numerous major awards, including Best Leisure Facility in Ireland. It has hosted pre-Olympic training camps for teams from 16 different countries and 190 athletes, among them eventual Water Polo Champions, Croatia, and the Synchronised Swimming Team from the USA.

+

Annual Number of Visitors: 1,099,756

+ + +

Book of Kells Exhibition, Trinity College, Dublin

+ Book of Kells + +

Based at Trinity College in the heart of Dublin city, the Book of Kells Exhibition is a must-see on the itinerary of all visitors to Ireland. It showcases the nation's greatest cultural treasure and the world's most famous medieval manuscript: the Book of Kells, a 9th-century manuscript that documents the four Gospels of the life of Jesus Christ. The Exhibition also features access to the Long Room, a magnificent and beautiful library, that houses 200,000 of Trinity College's oldest books.

+

Annual Number of Visitors: 983,410

+ +

Return to top of page

+ + diff --git a/exercises/page-7.html b/exercises/page-7.html new file mode 100644 index 0000000..fc81bd5 --- /dev/null +++ b/exercises/page-7.html @@ -0,0 +1,44 @@ + + + + + + + + Smooth Smoothies + + + + + + + + + +

Smooth Smoothies

+ +

Our world-class smoothies are great at any time of the day and offer a tasty alternative to sugary and unhealthy snacks!.

+ + Watermelon Wonder + +

Watermelon Wonder

+

Watermelon is a delicious and refreshing fruit that's also good for you. It is high in vitamin C, vitamin A and many healthy plant compounds, but contains only 60 calories per smoothie. And because watermelon has a high water content, this smoothie is hydrating and helps you feel full.

+ + Apple Delight + +

Apple Delight

+

Apples are an awesome source of fibre and vitamin C. They also contain polyphenols, which can have numerous health benefits. Apples have been linked to a lower risk of heart disease because they contain soluble fibre that can help lower blood cholesterol. Studies have also shown that eating apples reduces the risk of type 2 diabetes.

+ + Blueberry Surprise + +

Blueberry Surprise

+

One of our top sellers. Blueberries are so tasty that many people consider them their favourite fruit. In fact, because they are low in calories and incredibly good for you. Blueberries are often labeled a superfood. Blueberries have the highest antioxidant capacity of all the popular fruits and vegetables.

+ + Lemon Luxury + +

Lemon Luxury

+

Add zest to your day with our delicious Lemon Luxury smoothie. As a citrus fruit, lemons are high in vitamin C, which is a primary antioxidant that helps reduce your risk of cardiovascular disease and lowers blood pressure. Refreshing and energising - that's our Lemony Luxury smoothie!

+ + + + diff --git a/exercises/page-8.html b/exercises/page-8.html new file mode 100644 index 0000000..0dce5c1 --- /dev/null +++ b/exercises/page-8.html @@ -0,0 +1,42 @@ + + + + + + + + IBAT Analytics Software + + + + + + + + + +IBAT Analytics product + +

Digital Product Innovation for Visionary Brands

+ +

IBAT Analytics helps you boost your business impact.

+ +

What we offer

+

Say 'Hello' to a simple yet powerful user analytics system. IBAT Analytics tells you all you need to know about your website traffic, without tracking or storing your visitors' personal information.

+ +IBAT Analytics - What we offer + + +

How you benefit

+

IBAT Analytics helps you focus on what's important: your business.

+IBAT Analytics - How you benefit + + +

Happy users

+

Join the 1,000s of delighted customers from every sector of business around the world who are using IBAT Analytics to drive their future success.

+ +IBAT Analytics - Happy Users + + + + \ No newline at end of file diff --git a/exercises/page-9.html b/exercises/page-9.html new file mode 100644 index 0000000..dbfde1e --- /dev/null +++ b/exercises/page-9.html @@ -0,0 +1,47 @@ + + + + + + + The HTML box model with div elements + + + + + + + + + + + + + +
+ +
+

Bono

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+

Edge

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+

Adam

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+

Larry

+

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.

+
+ +
+ + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..406140d --- /dev/null +++ b/index.html @@ -0,0 +1,191 @@ + + + + + + + + Aurelien Rebourg Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Aurelien Rebourg, web designer +

Hi, I'm Aurelien Rebourg, a web Front-end and Back-end Developer.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
aurelien.rebourg@gmail.com
+ +

Social Links

+
+ + + +
+

 

+

 

+

 

+
+ + + +
+
+

Welcome to my website

+

Hi, I'm Aurelien Rebourg. a web Front-end and Back-end Developer.

+ +
+ Portfolio + Contact +
+
+
+ hero image +
+
+ + + + + +
+
+

Recent Projects

+

Below you can see some examples of my recent work. Check out my complete portfolio. Have a project you'd like to discuss? Let's make something great together!

+
+
+ +
+ +
+ Project: Ireland Tourism +

All my exercises

+

Here you can find all my exercises done.

+ View Project   +
+
+ + +
+ +
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/1/exercise-1-1.html b/javascript/exercises/1/exercise-1-1.html new file mode 100644 index 0000000..c3dcf24 --- /dev/null +++ b/javascript/exercises/1/exercise-1-1.html @@ -0,0 +1,53 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 1-1: JavaScript Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/1/exercise-1-2.html b/javascript/exercises/1/exercise-1-2.html new file mode 100644 index 0000000..8038627 --- /dev/null +++ b/javascript/exercises/1/exercise-1-2.html @@ -0,0 +1,53 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 1-2: JavaScript Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/1/exercise-1-3.html b/javascript/exercises/1/exercise-1-3.html new file mode 100644 index 0000000..48d8828 --- /dev/null +++ b/javascript/exercises/1/exercise-1-3.html @@ -0,0 +1,53 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 1-3: JavaScript Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/1/exercise-1-4.html b/javascript/exercises/1/exercise-1-4.html new file mode 100644 index 0000000..324148d --- /dev/null +++ b/javascript/exercises/1/exercise-1-4.html @@ -0,0 +1,53 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 1-4: JavaScript Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/1/exercise-1-5.html b/javascript/exercises/1/exercise-1-5.html new file mode 100644 index 0000000..f2f810d --- /dev/null +++ b/javascript/exercises/1/exercise-1-5.html @@ -0,0 +1,53 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 1-5: JavaScript Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/1/exercise-1-6.html b/javascript/exercises/1/exercise-1-6.html new file mode 100644 index 0000000..2f12fa3 --- /dev/null +++ b/javascript/exercises/1/exercise-1-6.html @@ -0,0 +1,53 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 1-6: JavaScript Introduction

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/11/exercise-11-1.html b/javascript/exercises/11/exercise-11-1.html new file mode 100644 index 0000000..2fbe857 --- /dev/null +++ b/javascript/exercises/11/exercise-11-1.html @@ -0,0 +1,206 @@ + + + + + + + JavaScript Exercise: The DOM + + + + + + + + + + + + +
+

Exercise 11-1: The Document Object Model

+

This script illustrates the DOM.

+ +
+ +

This is the first sub-heading

+ +

Some paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium aut minus + aliquam consequatur quam laboriosam! Porro commodi totam quia. Maxime eveniet reprehenderit autem + laboriosam ex fugit possimus, ullam enim?

+ +

This is the second sub-heading

+ +

Some paragraph more text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, laudantium aut + minus aliquam consequatur quam laboriosam! Porro commodi totam quia. Maxime eveniet reprehenderit autem + laboriosam ex fugit possimus, ullam enim?

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + +
 
 
+ + +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/2/assets/css/bootstrap-custom.css b/javascript/exercises/2/assets/css/bootstrap-custom.css new file mode 100644 index 0000000..bdcd83d --- /dev/null +++ b/javascript/exercises/2/assets/css/bootstrap-custom.css @@ -0,0 +1,41 @@ +/* === Add vertical spacing to Bootstrap containers === */ +/* Desktops */ +@media (min-width:768px) { + .container { padding-top: 2%; padding-bottom: 2% } + .col-md-6 { padding: 2% 4%; flex: 0 0 47%; width: 47% } + .col-md-6:nth-child(1) { margin-right: 3%; } + .col-md-6:nth-child(2) { margin-left: 3% } + .col-md-4 { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% } + .col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% } + .col-md-3 { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% } + .col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% } + .col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1% + } +} + +/* Mobiles */ +@media (max-width:767px) { + .container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% } + .col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% } +} + +/* Some background-color styles */ +.bg-gray-light { background-color: #f0f5f4 } +.bg-beige-light { background-color: #fde8cd } +.bg-green-light { background-color:#81ecec } +.bg-salmon-light { background-color: #F7CACA } +.bg-purple-dark { background-color:#6b5b95 } +.bg-crimson-dark { background-color:#af0069 } +.bg-blue-dark { background-color:#3c40c6 } +.bg-black-dark { background-color:#000 } + +/* If background dark, set text color white */ +.container .row [class*="-dark"] * { color: #fff } + +/* Images in Bootsrap columns - some space beneath */ +.container img { margin-bottom: 18px } +.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px } + +/* Some image effects*/ +.drop-shadow { box-shadow: 8px 10px 8px #888; } +.soft-corner { border-radius: 15px } diff --git a/javascript/exercises/2/exercise-2-1.html b/javascript/exercises/2/exercise-2-1.html new file mode 100644 index 0000000..200e30a --- /dev/null +++ b/javascript/exercises/2/exercise-2-1.html @@ -0,0 +1,66 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 2-1: Objects, Properies and Methods

+

These scripts reveal information about your computer's operating system, web browser, window and web page.

+ +

Web page URL

+
+ +
+ +

Web page details

+
+ +
+ +

OS platform and web browser

+ +
+ +
+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/3/assets/css/bootstrap-custom.css b/javascript/exercises/3/assets/css/bootstrap-custom.css new file mode 100644 index 0000000..bdcd83d --- /dev/null +++ b/javascript/exercises/3/assets/css/bootstrap-custom.css @@ -0,0 +1,41 @@ +/* === Add vertical spacing to Bootstrap containers === */ +/* Desktops */ +@media (min-width:768px) { + .container { padding-top: 2%; padding-bottom: 2% } + .col-md-6 { padding: 2% 4%; flex: 0 0 47%; width: 47% } + .col-md-6:nth-child(1) { margin-right: 3%; } + .col-md-6:nth-child(2) { margin-left: 3% } + .col-md-4 { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% } + .col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% } + .col-md-3 { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% } + .col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% } + .col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1% + } +} + +/* Mobiles */ +@media (max-width:767px) { + .container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% } + .col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% } +} + +/* Some background-color styles */ +.bg-gray-light { background-color: #f0f5f4 } +.bg-beige-light { background-color: #fde8cd } +.bg-green-light { background-color:#81ecec } +.bg-salmon-light { background-color: #F7CACA } +.bg-purple-dark { background-color:#6b5b95 } +.bg-crimson-dark { background-color:#af0069 } +.bg-blue-dark { background-color:#3c40c6 } +.bg-black-dark { background-color:#000 } + +/* If background dark, set text color white */ +.container .row [class*="-dark"] * { color: #fff } + +/* Images in Bootsrap columns - some space beneath */ +.container img { margin-bottom: 18px } +.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px } + +/* Some image effects*/ +.drop-shadow { box-shadow: 8px 10px 8px #888; } +.soft-corner { border-radius: 15px } diff --git a/javascript/exercises/3/exercise-3-1.html b/javascript/exercises/3/exercise-3-1.html new file mode 100644 index 0000000..3cdbc02 --- /dev/null +++ b/javascript/exercises/3/exercise-3-1.html @@ -0,0 +1,56 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 3-1: JavaScript Variables and Operators

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/3/exercise-3-2.html b/javascript/exercises/3/exercise-3-2.html new file mode 100644 index 0000000..9255de0 --- /dev/null +++ b/javascript/exercises/3/exercise-3-2.html @@ -0,0 +1,59 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 3-2: JavaScript Variables and Operators

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/3/exercise-3-3.html b/javascript/exercises/3/exercise-3-3.html new file mode 100644 index 0000000..b7e11b7 --- /dev/null +++ b/javascript/exercises/3/exercise-3-3.html @@ -0,0 +1,63 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 3-3: JavaScript Variables and Operators

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/3/exercise-3-4.html b/javascript/exercises/3/exercise-3-4.html new file mode 100644 index 0000000..ab3a57b --- /dev/null +++ b/javascript/exercises/3/exercise-3-4.html @@ -0,0 +1,61 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 3-4: JavaScript Variables and Operators

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/4/assets/css/bootstrap-custom.css b/javascript/exercises/4/assets/css/bootstrap-custom.css new file mode 100644 index 0000000..bdcd83d --- /dev/null +++ b/javascript/exercises/4/assets/css/bootstrap-custom.css @@ -0,0 +1,41 @@ +/* === Add vertical spacing to Bootstrap containers === */ +/* Desktops */ +@media (min-width:768px) { + .container { padding-top: 2%; padding-bottom: 2% } + .col-md-6 { padding: 2% 4%; flex: 0 0 47%; width: 47% } + .col-md-6:nth-child(1) { margin-right: 3%; } + .col-md-6:nth-child(2) { margin-left: 3% } + .col-md-4 { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% } + .col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% } + .col-md-3 { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% } + .col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% } + .col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1% + } +} + +/* Mobiles */ +@media (max-width:767px) { + .container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% } + .col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% } +} + +/* Some background-color styles */ +.bg-gray-light { background-color: #f0f5f4 } +.bg-beige-light { background-color: #fde8cd } +.bg-green-light { background-color:#81ecec } +.bg-salmon-light { background-color: #F7CACA } +.bg-purple-dark { background-color:#6b5b95 } +.bg-crimson-dark { background-color:#af0069 } +.bg-blue-dark { background-color:#3c40c6 } +.bg-black-dark { background-color:#000 } + +/* If background dark, set text color white */ +.container .row [class*="-dark"] * { color: #fff } + +/* Images in Bootsrap columns - some space beneath */ +.container img { margin-bottom: 18px } +.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px } + +/* Some image effects*/ +.drop-shadow { box-shadow: 8px 10px 8px #888; } +.soft-corner { border-radius: 15px } diff --git a/javascript/exercises/4/exercise-4-1.html b/javascript/exercises/4/exercise-4-1.html new file mode 100644 index 0000000..7e7aa1c --- /dev/null +++ b/javascript/exercises/4/exercise-4-1.html @@ -0,0 +1,66 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 4-1: JavaScript Functions

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +
+ + + + + + + +
+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla exercitationem ipsum enim natus soluta rem eos? In dicta eius, reprehenderit illo odit mollitia nulla ex et odio minus expedita numquam! minus expedita numquam!

+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/5/assets/css/bootstrap-custom.css b/javascript/exercises/5/assets/css/bootstrap-custom.css new file mode 100644 index 0000000..bdcd83d --- /dev/null +++ b/javascript/exercises/5/assets/css/bootstrap-custom.css @@ -0,0 +1,41 @@ +/* === Add vertical spacing to Bootstrap containers === */ +/* Desktops */ +@media (min-width:768px) { + .container { padding-top: 2%; padding-bottom: 2% } + .col-md-6 { padding: 2% 4%; flex: 0 0 47%; width: 47% } + .col-md-6:nth-child(1) { margin-right: 3%; } + .col-md-6:nth-child(2) { margin-left: 3% } + .col-md-4 { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% } + .col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% } + .col-md-3 { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% } + .col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% } + .col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1% + } +} + +/* Mobiles */ +@media (max-width:767px) { + .container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% } + .col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% } +} + +/* Some background-color styles */ +.bg-gray-light { background-color: #f0f5f4 } +.bg-beige-light { background-color: #fde8cd } +.bg-green-light { background-color:#81ecec } +.bg-salmon-light { background-color: #F7CACA } +.bg-purple-dark { background-color:#6b5b95 } +.bg-crimson-dark { background-color:#af0069 } +.bg-blue-dark { background-color:#3c40c6 } +.bg-black-dark { background-color:#000 } + +/* If background dark, set text color white */ +.container .row [class*="-dark"] * { color: #fff } + +/* Images in Bootsrap columns - some space beneath */ +.container img { margin-bottom: 18px } +.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px } + +/* Some image effects*/ +.drop-shadow { box-shadow: 8px 10px 8px #888; } +.soft-corner { border-radius: 15px } diff --git a/javascript/exercises/5/exercise-5-1.html b/javascript/exercises/5/exercise-5-1.html new file mode 100644 index 0000000..014891c --- /dev/null +++ b/javascript/exercises/5/exercise-5-1.html @@ -0,0 +1,67 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 5-1: Javascript User Input

+

This script captures and displays a value data entered by users.

+ +

Display User Input

+
+ +

First Name:  

+

+

You entered:

+
+ +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/5/exercise-5-2.html b/javascript/exercises/5/exercise-5-2.html new file mode 100644 index 0000000..dbf92ac --- /dev/null +++ b/javascript/exercises/5/exercise-5-2.html @@ -0,0 +1,79 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 5-2: JavaScript User Input

+

This script captures and displays a value data entered by users.

+ +

Redisplay User Input

+ +
+ +

First Name:  

+

+

+

You entered:

+
+ +
+ +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/5/exercise-5-3.html b/javascript/exercises/5/exercise-5-3.html new file mode 100644 index 0000000..87a6e7b --- /dev/null +++ b/javascript/exercises/5/exercise-5-3.html @@ -0,0 +1,87 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 5-3: Javascript User Input

+

This script adds two user-entered numbers.

+ +

Add Two Numbers

+
+ +

First Number:  

+

Second Number:  

+ +

   +

+ +

Total:

+
+ +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/6/assets/css/bootstrap-custom.css b/javascript/exercises/6/assets/css/bootstrap-custom.css new file mode 100644 index 0000000..bdcd83d --- /dev/null +++ b/javascript/exercises/6/assets/css/bootstrap-custom.css @@ -0,0 +1,41 @@ +/* === Add vertical spacing to Bootstrap containers === */ +/* Desktops */ +@media (min-width:768px) { + .container { padding-top: 2%; padding-bottom: 2% } + .col-md-6 { padding: 2% 4%; flex: 0 0 47%; width: 47% } + .col-md-6:nth-child(1) { margin-right: 3%; } + .col-md-6:nth-child(2) { margin-left: 3% } + .col-md-4 { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% } + .col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% } + .col-md-3 { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% } + .col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% } + .col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1% + } +} + +/* Mobiles */ +@media (max-width:767px) { + .container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% } + .col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% } +} + +/* Some background-color styles */ +.bg-gray-light { background-color: #f0f5f4 } +.bg-beige-light { background-color: #fde8cd } +.bg-green-light { background-color:#81ecec } +.bg-salmon-light { background-color: #F7CACA } +.bg-purple-dark { background-color:#6b5b95 } +.bg-crimson-dark { background-color:#af0069 } +.bg-blue-dark { background-color:#3c40c6 } +.bg-black-dark { background-color:#000 } + +/* If background dark, set text color white */ +.container .row [class*="-dark"] * { color: #fff } + +/* Images in Bootsrap columns - some space beneath */ +.container img { margin-bottom: 18px } +.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px } + +/* Some image effects*/ +.drop-shadow { box-shadow: 8px 10px 8px #888; } +.soft-corner { border-radius: 15px } diff --git a/javascript/exercises/6/exercise-6-1.html b/javascript/exercises/6/exercise-6-1.html new file mode 100644 index 0000000..4c318a5 --- /dev/null +++ b/javascript/exercises/6/exercise-6-1.html @@ -0,0 +1,108 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + + + + + +
+

Exercise 6-1: JavaScript Functions with Parameters

+

A script that passes multiple parameters to an arithmetic function.

+ +

Calculate Average of Three Numbers

+ +
+ +

First Number

+

Second Number

+

Third Number

+ +

+ +

Result:

+
+ +
+ +
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/6/exercise-6-2.html b/javascript/exercises/6/exercise-6-2.html new file mode 100644 index 0000000..4a92d7f --- /dev/null +++ b/javascript/exercises/6/exercise-6-2.html @@ -0,0 +1,81 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 6-1: JavaScript Functions with Parameters

+

This script provides an example of a passing a parameter to a function.

+ +

Passing a parameter to a function

+
+ +

+

+

+ +

Lorem Ipsum

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla adipisci labore quae dolorum excepturi, alias totam commodi perspiciatis quasi enim aut odit quod maiores eveniet dignissimos tempora eum voluptatibus quos animi vero laudantium. Quos reiciendis ex, incidunt non dolore nemo corporis amet! Exercitationem corrupti veritatis quas ipsa, minima maxime. Error nihil vero soluta. Distinctio tempora id reiciendis beatae natus.

+ +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/7/assets/css/bootstrap-custom.css b/javascript/exercises/7/assets/css/bootstrap-custom.css new file mode 100644 index 0000000..bdcd83d --- /dev/null +++ b/javascript/exercises/7/assets/css/bootstrap-custom.css @@ -0,0 +1,41 @@ +/* === Add vertical spacing to Bootstrap containers === */ +/* Desktops */ +@media (min-width:768px) { + .container { padding-top: 2%; padding-bottom: 2% } + .col-md-6 { padding: 2% 4%; flex: 0 0 47%; width: 47% } + .col-md-6:nth-child(1) { margin-right: 3%; } + .col-md-6:nth-child(2) { margin-left: 3% } + .col-md-4 { padding-top: 1%; padding-bottom:1%; flex: 0 0 30.5%; width: 30.5% } + .col-md-4:nth-child(2) { margin-left: 4%; margin-right: 4% } + .col-md-3 { padding-top: 1%; padding-bottom:1%; flex: 0 0 23.3%; width: 23.3% } + .col-md-3:nth-child(2) { margin-left: 2.1%; margin-right: 1.1% } + .col-md-3:nth-child(3) { margin-left: 1.1%; margin-right: 2.1% + } +} + +/* Mobiles */ +@media (max-width:767px) { + .container { padding-left: 7%; padding-right: 7%; padding-top: 8%; padding-bottom: 8% } + .col-md-6, .col-md-3, .col-md-4 { padding-top: 5%; margin-bottom: 6% } +} + +/* Some background-color styles */ +.bg-gray-light { background-color: #f0f5f4 } +.bg-beige-light { background-color: #fde8cd } +.bg-green-light { background-color:#81ecec } +.bg-salmon-light { background-color: #F7CACA } +.bg-purple-dark { background-color:#6b5b95 } +.bg-crimson-dark { background-color:#af0069 } +.bg-blue-dark { background-color:#3c40c6 } +.bg-black-dark { background-color:#000 } + +/* If background dark, set text color white */ +.container .row [class*="-dark"] * { color: #fff } + +/* Images in Bootsrap columns - some space beneath */ +.container img { margin-bottom: 18px } +.col-md-6 img, .col-md-4 img, .col-md-3 img { margin-bottom: 14px } + +/* Some image effects*/ +.drop-shadow { box-shadow: 8px 10px 8px #888; } +.soft-corner { border-radius: 15px } diff --git a/javascript/exercises/7/exercise-7-1.html b/javascript/exercises/7/exercise-7-1.html new file mode 100644 index 0000000..08b15bb --- /dev/null +++ b/javascript/exercises/7/exercise-7-1.html @@ -0,0 +1,65 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 7-1: JavaScript Conditional Statements

+

This script tests user input with the if command.

+ +

Using a simple if statement

+
+ + + +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/7/exercise-7-2.html b/javascript/exercises/7/exercise-7-2.html new file mode 100644 index 0000000..e9f5b4d --- /dev/null +++ b/javascript/exercises/7/exercise-7-2.html @@ -0,0 +1,70 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 7-2: JavaScript Conditional Statements

+

This script tests user input with the if and else if commands.

+ +

Using if and else if statements

+
+ + + +
+ + +
+ + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/7/exercise-7-3.html b/javascript/exercises/7/exercise-7-3.html new file mode 100644 index 0000000..c740b7a --- /dev/null +++ b/javascript/exercises/7/exercise-7-3.html @@ -0,0 +1,91 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 7-3: JavaScript Conditional Statements

+

This script tests user input with the if and else if commands.

+ +

Using if, else if and else statements

+ +
+

Welcome, visitor. What country are you from?

+

Country Name:  

+

+ +
+ +
+ + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/7/exercise-7-4.html b/javascript/exercises/7/exercise-7-4.html new file mode 100644 index 0000000..37a9255 --- /dev/null +++ b/javascript/exercises/7/exercise-7-4.html @@ -0,0 +1,92 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 7-4: JavaScript Conditional Statements

+

This script tests user input using the AND logical operator.

+ +

Using the AND (&&) logical operator

+ +
+ +

Welcome to DogeBook. Please sign in.

+

Email:  

+

Password:  

+

+ +
+ +
+ + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/7/exercise-7-5.html b/javascript/exercises/7/exercise-7-5.html new file mode 100644 index 0000000..9dc4a2c --- /dev/null +++ b/javascript/exercises/7/exercise-7-5.html @@ -0,0 +1,76 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 7-5: Javascript Conditional Statements

+

This script tests user input with the if and else if commands, and the || logical operator.

+ +

Using if and else if statements with the || operator

+
+ + + +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/8/exercise-8-1.html b/javascript/exercises/8/exercise-8-1.html new file mode 100644 index 0000000..440b429 --- /dev/null +++ b/javascript/exercises/8/exercise-8-1.html @@ -0,0 +1,65 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 8-1: JavaScript Loops

+

This script provides an example of a for loop.

+ +

Creating a simple for loop

+
+ + + +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/8/exercise-8-2.html b/javascript/exercises/8/exercise-8-2.html new file mode 100644 index 0000000..1172dda --- /dev/null +++ b/javascript/exercises/8/exercise-8-2.html @@ -0,0 +1,66 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 8-2: JavaScript Loops

+

This script provides an example of a for loop.

+ +

Creating a simple user-controlled for loop

+
+ + + +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/8/exercise-8-3.html b/javascript/exercises/8/exercise-8-3.html new file mode 100644 index 0000000..ef13688 --- /dev/null +++ b/javascript/exercises/8/exercise-8-3.html @@ -0,0 +1,66 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 8-3: JavaScript Loops

+

This script provides an example of a while loop.

+ +

Creating a simple while loop

+
+ + + +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/8/exercise-8-4.html b/javascript/exercises/8/exercise-8-4.html new file mode 100644 index 0000000..5b11041 --- /dev/null +++ b/javascript/exercises/8/exercise-8-4.html @@ -0,0 +1,67 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 8-4: JavaScript Loops

+

This script provides an example of a do…while loop.

+ +

Creating a simple do…while loop

+
+ + + +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/8/exercise-8-5.html b/javascript/exercises/8/exercise-8-5.html new file mode 100644 index 0000000..7388129 --- /dev/null +++ b/javascript/exercises/8/exercise-8-5.html @@ -0,0 +1,65 @@ + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 8-5: JavaScript Loops

+

This script provides an example of an interrupted for loop.

+ +

Creating a for loop that skips unlucky 13

+
+ + + +
+ + +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/9/exercise-9-1.html b/javascript/exercises/9/exercise-9-1.html new file mode 100644 index 0000000..7bc211b --- /dev/null +++ b/javascript/exercises/9/exercise-9-1.html @@ -0,0 +1,71 @@ + + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 9-1: JavaScript Arrays

+

 

+ +

Creating an array: single line method

+
+ + + +
+ + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/9/exercise-9-2.html b/javascript/exercises/9/exercise-9-2.html new file mode 100644 index 0000000..297554c --- /dev/null +++ b/javascript/exercises/9/exercise-9-2.html @@ -0,0 +1,74 @@ + + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 9-2: JavaScript Arrays

+

 

+ +

Creating an array: multi-line method

+
+ + + +
+ + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/javascript/exercises/9/exercise-9-3.html b/javascript/exercises/9/exercise-9-3.html new file mode 100644 index 0000000..f809eaf --- /dev/null +++ b/javascript/exercises/9/exercise-9-3.html @@ -0,0 +1,77 @@ + + + + + + + Women4IT - JavaScript + + + + + + + + + + + +
+

Exercise 9-3: JavaScript Arrays

+

 

+ +

Reading array values with a for Loop

+
+ + + +
+ + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/personal/personal-1/assets/css/footer.css b/personal/personal-1/assets/css/footer.css new file mode 100644 index 0000000..bb6b82c --- /dev/null +++ b/personal/personal-1/assets/css/footer.css @@ -0,0 +1,135 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#fff; + background-color:#2c3e50; +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #fff } + +/* Footer headings */ +footer h4 { + font-family: serif; + font-weight: normal; + font-style: italic; + font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: sans-serif; + font-weight: normal; + font-style: italic; + color: #38a696; + margin: 0 auto 36px auto; + font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #fff +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #fff +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #fff +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#fff; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #fff +} \ No newline at end of file diff --git a/personal/personal-1/assets/css/header.css b/personal/personal-1/assets/css/header.css new file mode 100644 index 0000000..bd4eafe --- /dev/null +++ b/personal/personal-1/assets/css/header.css @@ -0,0 +1,196 @@ + +/* ======= HERO BLOCK, FLEXBOX TWO COLUMNS ===== */ + +.hero-block-two-columns { + display: flex; justify-content: space-between; flex-wrap: wrap; +} + +@media (min-width: 1200px) { + .hero-block-two-columns { min-height: 82vh } +} + +@media (min-width: 768px) and (max-width: 1199px) { + .hero-block-two-columns { min-height: 460px } +} + +/* Desktops only - inside padding */ +@media (min-width:768px) { + .hero-block-two-columns { padding: 2% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media (max-width:767px) { + .hero-block-two-columns { padding: 7% 8% 1% 8% } +} + +/* Desktops - 2 columns */ +@media (min-width:768px) { + .hero-block-two-columns .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media (max-width:767px) { + .hero-block-two-columns .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + + +/* Hero block height and spacing */ +@media (min-width: 768px) { + .hero-block-two-columns { + background-color: #fff; + } + .hero-block-two-columns h1 { margin-top: 2% } + + .hero-block-two-columns .item-2:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center + } +} + +@media (max-width: 767px) { + .hero-block-two-columns { + background-color: #fff; + margin-top: 16%; + margin-bottom: 10% + } + + .hero-block-two-columns .item-2:nth-child(2) { padding-bottom: 5% } + .hero-block-two-columns .item-2:nth-child(1) { order: 2 } +} + +.hero-block-two-columns .item-2 h1 { + font-family: 'Rubik', sans-serif; + color: #2c3e50; + font-weight: 600; + line-height: 1.1; + margin-bottom: 20px; + letter-spacing:-2px; + font-size: calc(30px + (60 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block-two-columns .item-2 h2 { + font-weight: normal; + color: #4b6584; + line-height: 1.3; + margin-bottom: 30px; + font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block-two-columns .item-2 img { + margin-bottom: 0 +} + +@media (max-width: 767px) { + .hero-block-two-columns .item-2 img { + max-width: 400px; text-align: center; margin-left: auto; margin-right: auto; + } +} + +/* Button container */ +.container-btn { display: flex } + +/* All buttons */ +.container-btn .btn { + text-decoration: none; font-weight: bold; line-height: 1; + padding: 15px 26px 15px 26px; + border-width: 2px; border-style: solid; line-height: 1; outline: none; + transition: all 0.2s ease-in-out; + display: inline-block; + font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* Solid buttons */ +.container-btn .btn-solid:any-link { + background-color: #50e3c2; border-color: #50e3c2; color: #222; +} + +.container-btn :is(.btn-solid:focus, .btn-solid:hover,.btn-solid:active) { + background-color: #222; border-color: #222; color: #fff; +} + + +/* Ghost buttons */ +.container-btn .btn-ghost:any-link { + border: solid 2px #121212; color: #121212; background-color: transparent; +} + +.container-btn :is(.btn-ghost:focus, .btn-ghost:hover, .btn-ghost:active) { + background-color: #222; border-color: #222; color: #fff; +} + +.container-btn .btn-ghost i { color: #222 } +.container-btn .btn-ghost:focus i, +.container-btn .btn-ghost:hover i, +.container-btn .btn-ghost:active i { color: #fff } + +/* Buttons: corner styles */ +.container-btn .btn-soft { border-radius: 5px } +.container-btn .btn-rounded { border-radius: 30px } + +/* Buttons: Font Awesome icons */ +.container-btn .btn i { margin-right: 10px; } + +/* Big desktops */ +@media (min-width: 1025px) { + .container-btn a:first-child { margin-right: 30px } +} + +/* Not big or small desktops, or big tablets */ +@media (max-width: 1024px) { + .container-btn { margin-top: 42px; flex-direction: column } + .container-btn .btn { align-self: flex-start } + .container-btn a:first-child { margin-bottom: 32px } + .container-btn a:last-child { margin-bottom: 0 } + .container-btn.text-center-mobile .btn { + text-align: center; margin-left: auto; margin-right: auto + } +} + +@media (min-width: 768px) { + .container-btn { text-align: left } + .container-btn .btn { align-items: flex-start } +} + +@media (max-width: 767px) { + .container-btn .btn { text-align: center; margin-left: auto; margin-right: auto } +} + + + + +/* ---------------------------------------------- + * Generated by Animista + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +.slide-in-left { + animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.slide-in-right { + animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +@keyframes slide-in-left { + 0% { transform: translateX(-1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + + @-webkit-keyframes slide-in-right { + 0% { transform: translateX(1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + +@keyframes slide-in-right { + 0% { transform: translateX(1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + \ No newline at end of file diff --git a/personal/personal-1/assets/css/main.css b/personal/personal-1/assets/css/main.css new file mode 100644 index 0000000..5cbf4af --- /dev/null +++ b/personal/personal-1/assets/css/main.css @@ -0,0 +1,379 @@ + +/* Default font and colours */ +body { font-family: 'Rubik', sans-serif } +h1, h2, h3 { color: #222 } +p, li { color: #403d50 } +.bg-pastel-green { background-color: rgb(227,250,245) } +.bg-pastel-grey { background-color: #edf5f1 } + + +/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .container-one-column { padding: 4% 20% 5% 20% } +} + +/* Mobiles */ +@media all and (max-width:767px) { + .container-one-column { + padding: 7% 7% 10% 7%; + text-align: center; + } +} + +.container-one-column h1 { + line-height: 1.2; margin-bottom: 32px; + font-size: calc(38px + (54 - 38) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h2 { + line-height: 1.3; margin-top:32px; margin-bottom: 12px; + font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h3 { + line-height: 1.4; margin-top:28px; margin-bottom: 2px; + font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column p, +.container-one-column li { + line-height: 1.5; margin-bottom:14px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column ul { margin-left: 17px } + + +/* ============== FAUX BUTTONS =================== */ + +a.button:link, a.button:visited, a.button:hover, a.button:active { + text-decoration: none; + color: inherit; + border-style: solid; + border-width: 2px; + padding: 18px 28px; + display: inline-block; + line-height: 1; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} + +a.button-solid:link, .button-solid:visited { + border-color: rgb(80,227,194); + background-color: rgb(80,227,194); + color: #000; +} + +a.button-solid:hover, .button-solid:active { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +a.button-ghost:link, a.button-ghost:visited { + border-color: #403d50; + background-color: transparent; + color: #403d50 +} + +a.button-ghost:hover, .button-ghost:active { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +a.button-soft { border-radius: 5px } +a.button-round { border-radius: 25px } + +/* Hide button icons on narrow desktop sceens */ +@media all and (min-width:768px) and (max-width: 1024px) { + .container-flexbox .item-3 a.button i { display: none} +} + + +/* ============== FANCY HYPERLINKS =================== */ + +a.fancy-link:link, a.fancy-link:visited, +a.fancy-link:hover, a.fancy-link:active { + text-decoration: none; + color: inherit; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom: 2px; +} + +a.fancy-link:link, a.fancy-link:visited { color: rgb(49,145,131); border-bottom-color:rgb(49,145,131) } + +a.fancy-link:hover, a.fancy-link:active { color: rgb(36,64,84); border-bottom-color: rgb(36,64,84) } + + +/* ============== FLEXBOX MULTI-COLUMN LAYOUTS ================== */ + + +/* ============ PARENT FLEXBOX CONTAINERS ========== */ + +.container-flexbox { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Desktops only - inside padding */ +@media all and (min-width:768px) { + .container-flexbox { padding: 2% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media all and (max-width:767px) { + .container-flexbox { padding: 7% 8% 1% 8% } +} + +/* ====== INNER FLEXBOX COLUMN: 1 COLUMN EVERY SCREEN ======= */ + +.container-flexbox .item-1 { + width: 100%; + padding: 1% 6% 0 6%; + text-align: center; +} + +/* ====== FLEXBOX ITEM COLUMNS: 2 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ====== */ + +/* Desktops - 2 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + +.container-flexbox .item-2 h2 { + font-size: calc(24px + (48 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +.container-flexbox .item-2 p { + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */ + + +/* Desktops - 3 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-3 { width: 30% } + .container-flexbox .item-3 { margin-bottom: 6% } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-3 { width: 100% } + .container-flexbox .item-3 { margin-bottom: 14% } +} + + +/* Spacing under images in children of parent flexbox containers */ +.container-flexbox img { margin-bottom: 20px } + +/* Drop shadow effect around images */ +img.image-shadow { + box-shadow: 8px 10px 8px #888; + margin-bottom: 20px +} + +/* Makes square images circles */ +img.image-circle { + border-radius: 100%; +} + +.container-flexbox .item-1 h2 { + color: #2c3e50; + line-height: 1.2; margin-bottom: 8px; + letter-spacing:-1px; + font-size: calc(24px + (48 - 24) * ((100vw - 320px)/(1600 - 320))); +} + +.container-flexbox .item-1 p { + line-height: 1.5; margin-bottom: 14px; + font-size: calc(17px + (25 - 17) * ((100vw - 320px)/(1600 - 320))); +} + +@media all and (max-width:767px) { + .container-flexbox .item-1 { text-align: center } +} + +.container-flexbox .item-1, +.container-flexbox .item-2 p, +.container-flexbox .item-3 p { + line-height: 1.5; margin-bottom:20px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); +} + +.container-flexbox .item-2 h3, +.container-flexbox .item-3 h3 { + line-height: 1.2; margin-bottom: 12px; +} + +/* Centre-align text within two, three and four columns on mobiles */ +@media all and (max-width:767px) { + .container-flexbox .item-2, + .container-flexbox .item-3 { text-align: center } + .container-flexbox .item-3 img { + width: 90%; + max-width: 390px; + margin-left: auto; + margin-right: auto; + } +} + +.container-flexbox .item-3 h3, +.container-flexbox .item-3-2 h3 { + font-size: calc(20px + (26 - 20) * ((100vw - 320px)/(1600 - 320))); + margin-bottom:12px; + margin-top: 32px; + font-weight: 500; + line-height: 1.6 +} + +.container-flexbox .item-3 img { + margin-top: 12px +} + + +/* =============== BEGIN CONTACT FORM CSS ============= */ + +/* == Contact form container == */ + +/* All screens */ +.container-contact-form { + text-align: center; + background-color: #fff; + border: solid 1px gray +} + +/* Desktop */ +@media all and (min-width:1024px) { + .container-contact-form { + margin: 4% 23% 4% 23%; + padding: 2% 4% 1% 4% + } +} + +/* Mobiles */ +@media all and (max-width:1023px) { + .container-contact-form { + margin: 6% 8% 18% 8%; + padding: 7% 8% 8% 8%; + } +} + +/* == Contact form heading and text == */ + +/* Heading */ +.container-contact-form h3 { + font-weight: 600; + color: #2c3e50; + line-height: 1.2; + margin-bottom: 3%; + font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +/* Text */ +.container-contact-form p { + font-weight: normal; + color: #000; + line-height: 1.5; + margin-bottom: 7%; + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* == Contact form fields == */ + +#contact-form .flex-row { display: flex; justify-content: space-between } + +/* Desktop */ +@media all and (min-width: 1024px) { + #contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% } + #contact-form .flex-row .item-name, + #contact-form .flex-row .item-email { width: 47% } + #contact-form .flex-row .item-textarea { width: 64% } + #contact-form .flex-row .item-btn { width: 30%; align-self: flex-end } +} + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form .flex-row { flex-direction: column; text-align: center; } +} + +#contact-form label, #contact-form input, #contact-form textarea { + font-family: sans-serif; + color: #000; + display: block; +} + +#contact-form label { + font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); + font-weight: bold; + margin-bottom: 8px; + display: flex; + align-items: baseline; +} + +#contact-form [type="text"], +#contact-form [type="email"], +#contact-form textarea { width: 100% } +#contact-form ::placeholder { font-size: 94% } + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form [type="text"], + #contact-form [type="email"], + #contact-form textarea { margin-bottom: 20px } +} + +#contact-form input, #contact-form textarea { + padding: 10px 12px; + border: 2px solid rgb(49,145,131); + background-color: #f0f0f0; + border-radius: 5px; +} + +#contact-form input:focus, +#contact-form textarea:focus { + background-color: #fff; +} + +#contact-form.flex-row .item-btn { width: 26% } + +#contact-form #btn-submit { + float: right; + border: none; + background-color: rgb(80,227,194); + color: #000; + font-weight: bold; + padding: 18px 28px; + font-size: 18px +} + + +#contact-form #btn-submit:hover, +#contact-form #btn-submit:active { + background-color: #403d50; + color: #fff +} + +#contact-form #btn-submit i.fas { + margin-left: 9px; + font-size: 104% +} + diff --git a/personal/personal-1/assets/css/menus.css b/personal/personal-1/assets/css/menus.css new file mode 100644 index 0000000..d27454d --- /dev/null +++ b/personal/personal-1/assets/css/menus.css @@ -0,0 +1,317 @@ +/* ===================== BEGIN MENU STYLES ========================== */ + +/* === All screen sizes ====== */ + +.unhide-content-under-sticky-menu { margin-top: 72px } + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { width:100% } + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-light { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* prevents content from disappearing udner sticky menus */ +.sticky-anchor { + position: relative; + border-top: 90px solid transparent; + margin: -90px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } + + .sticky-anchor:before { + content: ""; + position: absolute; + top: -2px; + left: 0; + right: 0; + } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically centered in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 80px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320))); + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 6px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu.flyout-menu-is-open { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu.flyout-menu-is-open { + box-shadow: 0px 1px 10px #888 +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box, +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img, +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p { width: 47% } + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ========= Light background menu - desktops and mobiles ========= */ + +/* background colour */ +.menu-light { + background-color: #fff; + transition: all .5s ease-in-out; +} + +/* menu links */ + +.menu-light ul li a { font-weight: 500 } +.menu-light ul li a:link, .menu-light ul li a:visited { color: #403d50 } +.menu-light ul li a:hover, .menu-light ul li a:active { color: rgb(49,145,131) } + +/* cta button */ + +.menu-light ul li a.btn-cta { font-weight: 500 } +.menu-light ul li a.btn-cta:link, +.menu-light ul li a.btn-cta:visited { + border-color: rgb(80,227,194); + background-color: rgb(80,227,194); + color: #000; +} + +.menu-light ul li a.btn-cta:hover, +.menu-light ul li a.btn-cta:active { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +/* on mobiles only */ +.flyout-menu.menu-light { background-color: rgb(227,250,245) } +.menu-light.flyout-menu hr { background-color:rgb(80,227,194); border-color: rgb(80,227,194) } + +.menu-light.flyout-menu h4, +.menu-light.flyout-menu h5, +.menu-light.flyout-menu h5 a, +.menu-light.flyout-menu p { color: #403d50 } + +/* colour of hamburger icon bars */ +.menu-light .item-icon .bar1, +.menu-light .item-icon .bar2, +.menu-light .item-icon .bar3 { background-color:#403d50 } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: red } + +/* email link */ +.menu-light.flyout-menu h5 a:link, +.menu-light.flyout-menu h5 a:visited { + border-bottom-color: rgb(80,227,194); +} + +.menu-light.flyout-menu h5 a:hover, +.menu-light.flyout-menu h5 a:active { + border-bottom-color: transparent; +} + +/* profile image border colour */ +.menu-light.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { border-color: rgb(80,227,194) } + +/* contact icons */ +.menu-light.flyout-menu .fly-out-social-icons a i { color: rgb(80,227,194) } + +/* === End light background menu === */ diff --git a/personal/personal-1/assets/css/resets.css b/personal/personal-1/assets/css/resets.css new file mode 100644 index 0000000..3e0cd7d --- /dev/null +++ b/personal/personal-1/assets/css/resets.css @@ -0,0 +1,24 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +/* h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } */ +/* p, li { word-break: break-word; hyphens: auto } */ + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: 'Rubik', sans-serif; +} \ No newline at end of file diff --git a/personal/personal-1/assets/img/hero-undraw-contact.png b/personal/personal-1/assets/img/hero-undraw-contact.png new file mode 100644 index 0000000..580a13c Binary files /dev/null and b/personal/personal-1/assets/img/hero-undraw-contact.png differ diff --git a/personal/personal-1/assets/img/hero-undraw-home.png b/personal/personal-1/assets/img/hero-undraw-home.png new file mode 100644 index 0000000..7085651 Binary files /dev/null and b/personal/personal-1/assets/img/hero-undraw-home.png differ diff --git a/personal/personal-1/assets/img/hero-undraw-portfolio.png b/personal/personal-1/assets/img/hero-undraw-portfolio.png new file mode 100644 index 0000000..597de03 Binary files /dev/null and b/personal/personal-1/assets/img/hero-undraw-portfolio.png differ diff --git a/personal/personal-1/assets/img/profile-pic.jpg b/personal/personal-1/assets/img/profile-pic.jpg new file mode 100644 index 0000000..cd04eaa Binary files /dev/null and b/personal/personal-1/assets/img/profile-pic.jpg differ diff --git a/personal/personal-1/assets/img/project-ireland.jpg b/personal/personal-1/assets/img/project-ireland.jpg new file mode 100644 index 0000000..2379516 Binary files /dev/null and b/personal/personal-1/assets/img/project-ireland.jpg differ diff --git a/personal/personal-1/assets/img/project-smoothie.jpg b/personal/personal-1/assets/img/project-smoothie.jpg new file mode 100644 index 0000000..b0d0a5a Binary files /dev/null and b/personal/personal-1/assets/img/project-smoothie.jpg differ diff --git a/personal/personal-1/assets/img/project-van-gogh.png b/personal/personal-1/assets/img/project-van-gogh.png new file mode 100644 index 0000000..2a31ac4 Binary files /dev/null and b/personal/personal-1/assets/img/project-van-gogh.png differ diff --git a/personal/personal-1/assets/img/website-logo.png b/personal/personal-1/assets/img/website-logo.png new file mode 100644 index 0000000..cf6abde Binary files /dev/null and b/personal/personal-1/assets/img/website-logo.png differ diff --git a/personal/personal-1/assets/js/menus.js b/personal/personal-1/assets/js/menus.js new file mode 100644 index 0000000..fa9eaf6 --- /dev/null +++ b/personal/personal-1/assets/js/menus.js @@ -0,0 +1,62 @@ +// Code to detect click of option within fly-out menu +let specifiedElement = document.querySelector('.flyout-menu'); +document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } +}); + +// Code to show/hide fly-out mobile menu --> +document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) +const pageContainer = document.querySelector('.page-container'); + +function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } +} + +// Code for menus with transparent background +window.onscroll = function() {swapMenuStyle()}; +const headerDesktop = document.querySelector('.container-menu-desktop'); +const headerMobile = document.querySelector('.container-menu-bar-mobile'); + +const stickyDesktop = headerDesktop.offsetTop +300; +const stickyMobile = headerDesktop.offsetTop +300; + +function swapMenuStyle() { + if (window.pageYOffset > stickyDesktop) { + headerDesktop.classList.add("menu-drop-shadow"); + } else { + headerDesktop.classList.remove("menu-drop-shadow"); + } +} diff --git a/personal/personal-1/contact/index.html b/personal/personal-1/contact/index.html new file mode 100644 index 0000000..78ad098 --- /dev/null +++ b/personal/personal-1/contact/index.html @@ -0,0 +1,197 @@ + + + + + + + + Contact | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Realise your digital potential

+

Helping businesses of every size and type get the most from digital platforms.

+
+
+ hero image +
+ +
+ + + + +
+

Get in touch

+

Use the form below to let me know a little more about your objectives and I'll get back to you.

+ + +
+ + + +
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + + + +
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/personal/personal-1/index.html b/personal/personal-1/index.html new file mode 100644 index 0000000..3a6e1f7 --- /dev/null +++ b/personal/personal-1/index.html @@ -0,0 +1,192 @@ + + + + + + + + Aurelien Rebourg Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Aurelien Rebourg, web designer +

Hi, I'm Aurelien Rebourg, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
aurelien.rebourg@gmail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Welcome to my website

+

Hi, I'm Aurelien Rebourg. I create digital experiences to promote products, services and events.

+
+ Portfolio + Contact +
+
+
+ hero image +
+
+ + + + + +
+
+

Recent projects

+

Below you can see some examples of my recent work. Check out my complete portfolio. Have a project you'd like to discuss? Let's make something great together! +

+
+ + +
+ +
+ Project: Smooth Smoothies +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Travel Agency +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/personal/personal-1/portfolio/index.html b/personal/personal-1/portfolio/index.html new file mode 100644 index 0000000..705319c --- /dev/null +++ b/personal/personal-1/portfolio/index.html @@ -0,0 +1,187 @@ + + + + + + + + Portfolio | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Welcome to my work

+

I use HTML and CSS with graphic design and animation to bring your ideas to life.

+
+ Contact +
+
+
+ hero image +
+
+ + +
+ +
+
+

Web Development Projects

+

Below you can see some examples of my work from my web development and design porfolio.

+
+
+ +
+ Project: Smooth Smoothies +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Travel Agency +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/personal/personal-2/assets/css/footer.css b/personal/personal-2/assets/css/footer.css new file mode 100644 index 0000000..2dfce33 --- /dev/null +++ b/personal/personal-2/assets/css/footer.css @@ -0,0 +1,136 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#fff; + background-color:#183153; +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #fff } + +/* Footer headings */ +footer h4 { + font-family: serif; + font-weight: normal; + font-style: italic; + font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: sans-serif; + font-weight: normal; + font-style: italic; + color: #34cdf1; + margin: 0 auto 36px auto; + font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #fff +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); + color: #34cdf1; +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #fff +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #fff +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#fff; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #fff +} \ No newline at end of file diff --git a/personal/personal-2/assets/css/header.css b/personal/personal-2/assets/css/header.css new file mode 100644 index 0000000..27616b9 --- /dev/null +++ b/personal/personal-2/assets/css/header.css @@ -0,0 +1,215 @@ + +/* ======= HERO BLOCK, FLEXBOX TWO COLUMNS ===== */ +.hero-block-two-columns { + display: flex; justify-content: space-between; flex-wrap: wrap; + background-color: #183153; +} + +@media (min-width: 1200px) { + .hero-block-two-columns { min-height: 90vh } +} + +@media (min-width: 768px) and (max-width: 1199px) { + .hero-block-two-columns { min-height: 460px } +} + +/* Desktops only - inside padding */ +@media (min-width:768px) { + .hero-block-two-columns { padding: 2% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media (max-width:767px) { + .hero-block-two-columns { padding: 7% 8% 1% 8% } +} + +/* Desktops - 2 columns */ +@media (min-width:768px) { + .hero-block-two-columns .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media (max-width:767px) { + .hero-block-two-columns .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + + +/* Hero block height and spacing */ +@media (min-width: 768px) { + .hero-block-two-columns h1 { margin-top: 2% } + + .hero-block-two-columns .item-2:nth-child(2) { + display: flex; + flex-direction: column; + justify-content: center + } +} + +@media (max-width: 767px) { + .hero-block-two-columns { + margin-top: 16%; + margin-bottom: 10% + } + + .hero-block-two-columns .item-2:nth-child(2) { padding-bottom: 5% } + .hero-block-two-columns .item-2:nth-child(1) { order: 2 } +} + +.hero-block-two-columns .item-2 h1 { + font-family: 'Poppins', sans-serif; + color: #fff; + font-weight: 600; + line-height: 1.1; + margin-bottom: 20px; + letter-spacing: -1px; + font-size: calc(30px + (52 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block-two-columns .item-2 h2 { + font-weight: 300; + color: #fff; + line-height: 1.5; + margin-bottom: 30px; + font-size: calc(18px + (24 - 18) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block-two-columns .item-2 img { + margin-bottom: 0 +} + +@media (max-width: 767px) { + .hero-block-two-columns .item-2 img { + max-width: 400px; text-align: center; margin-left: auto; margin-right: auto; + } +} + +/* Button container */ +.container-btn { display: flex } + +/* All buttons */ +.container-btn .btn { + text-decoration: none; font-weight: bold; line-height: 1; + padding: 15px 26px 15px 26px; + border-width: 2px; border-style: solid; line-height: 1; outline: none; + transition: all 0.2s ease-in-out; + display: inline-block; + font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* Solid buttons */ +.container-btn .btn-solid:any-link { + background-color: #50e3c2; border-color: #50e3c2; color: #222; +} + +.container-btn :is(.btn-solid:focus, .btn-solid:hover,.btn-solid:active) { + background-color: #222; border-color: #222; color: #fff; +} + +/* Gradient buttons */ +.container-btn .btn-gradient:any-link { + border-color: #183153; + background-image: linear-gradient(to right,#3ec7e0,#526bf4); color: #fff; +} + +.container-btn :is(.btn-gradient:focus, .btn-gradient:hover, .btn-gradient:active) { + background-image: linear-gradient(90deg,#e052a0,#f15c41); color: #fff; +} + + +/* Ghost buttons */ +.container-btn .btn-ghost:any-link { + border: solid 2px #fff; color: #fff; background-color: transparent; +} + +.container-btn :is(.btn-ghost:focus, .btn-ghost:hover, .btn-ghost:active) { + background-color: #222; border-color: #222; color: #fff; +} + +.container-btn .btn-ghost i { color: #fff } +.container-btn .btn-ghost:focus i, +.container-btn .btn-ghost:hover i, +.container-btn .btn-ghost:active i { color: #fff } + +/* Buttons: corner styles */ +.container-btn .btn-soft { border-radius: 5px } +.container-btn .btn-rounded { border-radius: 30px } + +/* Buttons: Font Awesome icons */ +.container-btn .btn i { margin-right: 10px; } + +/* Big desktops */ +@media (min-width: 1025px) { + .container-btn a:first-child { margin-right: 30px } +} + +/* Not big or small desktops, or big tablets */ +@media (max-width: 1024px) { + .container-btn { margin-top: 42px; flex-direction: column } + .container-btn .btn { align-self: flex-start } + .container-btn a:first-child { margin-bottom: 32px } + .container-btn a:last-child { margin-bottom: 0 } + .container-btn.text-center-mobile .btn { + text-align: center; margin-left: auto; margin-right: auto + } +} + +@media (min-width: 768px) { + .container-btn { text-align: left } + .container-btn .btn { align-items: flex-start } +} + +@media (max-width: 767px) { + .container-btn .btn { text-align: center; margin-left: auto; margin-right: auto } +} + + + + +/* ---------------------------------------------- + * Generated by Animista + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +.slide-in-left { + animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.slide-in-right { + animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.fade-in { + animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; +} + +@keyframes slide-in-left { + 0% { transform: translateX(-1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + + @-webkit-keyframes slide-in-right { + 0% { transform: translateX(1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + +@keyframes slide-in-right { + 0% { transform: translateX(1000px); opacity: 0 } + 100% { transform: translateX(0); opacity: 1 } +} + +@-webkit-keyframes fade-in { + 0% { opacity: 0 } + 100% { opacity: 1 } +} + +@keyframes fade-in { + 0% { opacity: 0 } + 100% { opacity: 1 } +} \ No newline at end of file diff --git a/personal/personal-2/assets/css/main.css b/personal/personal-2/assets/css/main.css new file mode 100644 index 0000000..37dac8a --- /dev/null +++ b/personal/personal-2/assets/css/main.css @@ -0,0 +1,396 @@ + +/* Default font and colours */ +h1, h2, h3 { color: #fff} +p, li { color: #fff } +.bg-light-slate { background-color: #515e7b } +.bg-pastel-grey { background-color: #edf5f1 } + + +/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .container-one-column { padding: 4% 20% 5% 20% } +} + +/* Mobiles */ +@media all and (max-width:767px) { + .container-one-column { + padding: 7% 7% 10% 7%; + text-align: center; + } +} + +.container-one-column h1 { + line-height: 1.2; margin-bottom: 32px; + font-size: calc(38px + (54 - 38) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h2 { + line-height: 1.3; margin-top:32px; margin-bottom: 12px; + font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h3 { + line-height: 1.4; margin-top:28px; margin-bottom: 2px; + font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column p, +.container-one-column li { + line-height: 1.5; margin-bottom:14px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column ul { margin-left: 17px } + + +/* ============== FAUX BUTTONS =================== */ + +a.button:link, a.button:visited, a.button:hover, a.button:active { + text-decoration: none; + color: inherit; + border-style: solid; + border-width: 2px; + padding: 14px 28px; + display: inline-block; + line-height: 1; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} + +a.button-solid:link, .button-solid:visited { + border-color:#34cdf1; + color: #000; + background-color: #34cdf1; +} + +a.button-solid:hover, .button-solid:active { + border-color:#183153; + background-color: #183153; + color: #fff +} + +a.button-ghost:link, a.button-ghost:visited { + border-color: #403d50; + background-color: transparent; + color: #403d50 +} + +a.button-ghost:hover, .button-ghost:active { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +a.button-soft { border-radius: 5px } +a.button-round { border-radius: 25px } + +/* Hide button icons on narrow desktop sceens */ +@media all and (min-width:768px) and (max-width: 1024px) { + .container-flexbox .item-3 a.button i { display: none} +} + + +/* ============== FANCY HYPERLINKS =================== */ + +a.fancy-link:link, a.fancy-link:visited, +a.fancy-link:hover, a.fancy-link:active { + text-decoration: none; + color: inherit; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom: 2px; +} + +a.fancy-link:link, a.fancy-link:visited { + color: #34cdf1; + border-bottom-color:#34cdf1 +} + +a.fancy-link:hover, a.fancy-link:active { + color: #fff; + border-bottom-color: #fff +} + +/* Buttons: corner styles */ +.btn-soft { border-radius: 5px } +.btn-rounded { border-radius: 30px } + +/* Buttons: Font Awesome icons */ +.btn i { margin-right: 10px; } + + +/* ============== FLEXBOX MULTI-COLUMN LAYOUTS ================== */ + + +/* ============ PARENT FLEXBOX CONTAINERS ========== */ + +.container-flexbox { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Desktops only - inside padding */ +@media all and (min-width:768px) { + .container-flexbox { padding: 2% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media all and (max-width:767px) { + .container-flexbox { padding: 7% 8% 1% 8% } +} + +/* ====== INNER FLEXBOX COLUMN: 1 COLUMN EVERY SCREEN ======= */ + +.container-flexbox .item-1 { + width: 100%; + padding: 1% 6% 0 6%; + text-align: center; +} + +/* ====== FLEXBOX ITEM COLUMNS: 2 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ====== */ + +/* Desktops - 2 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + +.container-flexbox .item-2 h2 { + font-size: calc(24px + (48 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +.container-flexbox .item-2 p { + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */ + + +/* Desktops - 3 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-3 { width: 30% } + .container-flexbox .item-3 { margin-bottom: 6% } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-3 { width: 100% } + .container-flexbox .item-3 { margin-bottom: 14% } +} + + +/* Spacing under images in children of parent flexbox containers */ +.container-flexbox img { margin-bottom: 20px } + +/* Drop shadow effect around images */ +img.image-shadow { + box-shadow: 8px 10px 8px #888; + margin-bottom: 20px +} + +/* Makes square images circles */ +img.image-circle { + border-radius: 100%; +} + +.container-flexbox .item-1 h2 { + color: #34cdf1; + line-height: 1.2; margin-bottom: 20px; + letter-spacing:-1px; + font-weight: 600; + font-size: calc(24px + (48 - 24) * ((100vw - 320px)/(1600 - 320))); +} + +.container-flexbox .item-1 p { + line-height: 1.7; + font-size: calc(18px + (26 - 18) * ((100vw - 320px)/(1600 - 320))); + color: #fff; +} + +@media all and (max-width:767px) { + .container-flexbox .item-1 { text-align: center } +} + +.container-flexbox .item-1, +.container-flexbox .item-2 p, +.container-flexbox .item-3 p { + line-height: 1.5; margin-bottom: 40px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); + color: #fff; +} + +.container-flexbox .item-2 h3, +.container-flexbox .item-3 h3 { + line-height: 1.2; margin-bottom: 12px; + color:#34cdf1 +} + +/* Centre-align text within two, three and four columns on mobiles */ +@media all and (max-width:767px) { + .container-flexbox .item-2, + .container-flexbox .item-3 { text-align: center } + .container-flexbox .item-3 img { + width: 90%; + max-width: 390px; + margin-left: auto; + margin-right: auto; + } +} + +.container-flexbox .item-3 h3, +.container-flexbox .item-3-2 h3 { + font-size: calc(20px + (26 - 20) * ((100vw - 320px)/(1600 - 320))); + margin-bottom:12px; + margin-top: 32px; + line-height: 1.6; + font-weight: 600; +} + +.container-flexbox .item-3 img { + margin-top: 12px +} + + +/* =============== BEGIN CONTACT FORM CSS ============= */ + +/* == Contact form container == */ + +/* All screens */ +.container-contact-form { + text-align: center; + background-color: #183153 +} + +/* Desktop */ +@media all and (min-width:1024px) { + .container-contact-form { + margin: 4% 23% 4% 23%; + padding: 2% 4% 1% 4% + } +} + +/* Mobiles */ +@media all and (max-width:1023px) { + .container-contact-form { + margin: 6% 8% 18% 8%; + padding: 7% 8% 8% 8%; + } +} + +/* == Contact form heading and text == */ + +/* Heading */ +.container-contact-form h3 { + font-weight: bold; + color: #fff; + line-height: 1.2; + margin-bottom: 3%; + font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +/* Text */ +.container-contact-form p { + font-weight: normal; + color: #fff; + line-height: 1.5; + margin-bottom: 7%; + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* == Contact form fields == */ + +#contact-form .flex-row { display: flex; justify-content: space-between } + +/* Desktop */ +@media all and (min-width: 1024px) { + #contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% } + #contact-form .flex-row .item-name, + #contact-form .flex-row .item-email { width: 47% } + #contact-form .flex-row .item-textarea { width: 64% } + #contact-form .flex-row .item-btn { width: 30%; align-self: flex-end } +} + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form .flex-row { flex-direction: column; text-align: center; } +} + +#contact-form label, #contact-form input, #contact-form textarea { + font-family: 'Poppins', sans-serif; + color: #fff; + display: block; +} + +#contact-form label { + font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); + font-weight: bold; + margin-bottom: 8px; + display: flex; + align-items: baseline; +} + +#contact-form [type="text"], +#contact-form [type="email"], +#contact-form textarea { width: 100% } +#contact-form ::placeholder { font-size: 94% } + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form [type="text"], + #contact-form [type="email"], + #contact-form textarea { margin-bottom: 20px } +} + +#contact-form input, #contact-form textarea { + padding: 10px 12px; + border: 2px solid rgb(49,145,131); + background-color: #f0f0f0; + border-radius: 5px; +} + +#contact-form input:focus, +#contact-form textarea:focus { + background-color: #fff; +} + +#contact-form.flex-row .item-btn { width: 26% } + +#contact-form #btn-submit { + float: right; + border: none; + color: #000; + font-weight: bold; + padding: 18px 28px; + font-size: 18px; + border-color:#34cdf1; + color: #000; + background-color: #34cdf1; +} + + +#contact-form #btn-submit:hover, +#contact-form #btn-submit:active { + background-color: red; + color: #fff +} + +#contact-form #btn-submit i.fas { + margin-left: 9px; + font-size: 104% +} + diff --git a/personal/personal-2/assets/css/menus.css b/personal/personal-2/assets/css/menus.css new file mode 100644 index 0000000..ffe32b8 --- /dev/null +++ b/personal/personal-2/assets/css/menus.css @@ -0,0 +1,332 @@ + +.unhide-content-under-sticky-menu { padding-top: 72px !important } + +/* === ALL SCREEN SIZES ====== */ + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { + width: 100%; + font-family: 'Poppins', sans-serif; +} + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-transparent, + .container-menu-desktop.menu-light, + .container-menu-desktop.menu-dark { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-transparent, + .container-menu-bar-mobile.menu-light, + .container-menu-bar-mobile.menu-dark, + .flyout-menu.menu-transparent, + .flyout-menu.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* prevents content from disappearing udner sticky menus */ +.sticky-anchor { + position: relative; + border-top: 90px solid transparent; + margin: -90px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } + + .sticky-anchor:before { + content: ""; + position: absolute; + top: -2px; + left: 0; + right: 0; + } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically cente#5ba745 in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; + /* soften corners */ + /* border-radius: 4px; */ + /* rounded corners */ + border-radius: 100px +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 40px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320))); + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 6px 20px 6px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ + font-family: 'Poppins', sans-serif; +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu { + box-shadow: 0px 1px 10px #888 +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu div.fly-out-profile-box, +.flyout-menu div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu div.fly-out-profile-box img, +.flyout-menu div.fly-out-profile-box p { width: 47% } + +.flyout-menu div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ======= Dark background menu - desktops and mobiles ======= */ + +/* background colour */ +.menu-dark { + background-color: #183153; + transition: all .5s ease-in-out +} + +/* menu links */ +.menu-dark ul li a:link, .menu-dark ul li a:visited { color: #fff } +.menu-dark ul li a:hover, .menu-dark ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-dark ul li a.btn-cta:link, +.menu-dark ul li a.btn-cta:visited { + background-color: #34cdf1; + color: #fff; + border-color:#fff +} + +.menu-dark ul li a.btn-cta:hover, +.menu-dark ul li a.btn-cta:active { + background-color: #fff; + color: #34cdf1; + border-color:#fff +} + +/* on mobiles only - various content */ +.menu-dark.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-dark.flyout-menu h4, +.menu-dark.flyout-menu h5, +.menu-dark.flyout-menu h5 a, +.menu-dark.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-dark .item-icon .bar1, +.menu-dark .item-icon .bar2, +.menu-dark .item-icon .bar3 { background-color: #fff } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-dark.flyout-menu h5 a:link, +.menu-dark.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-dark.flyout-menu h5 a:hover, +.menu-dark.flyout-menu h5 a:active { + border-bottom-color: #34cdf1; +} + +/* profile image border colour */ +.menu-dark.flyout-menu div.fly-out-profile-box img { border-color: #34cdf1 } + +/* contact icons */ +.menu-dark.flyout-menu .fly-out-social-icons a i { color:#fff } + +.menu-dark ul li .btn-cta:any-link { + border-color: #183153 !important; + background-image: linear-gradient(to right,#3ec7e0,#526bf4); color: #fff !important; +} + +.menu-dark ul li :is(.btn-cta:focus, .btn-cta:hover, .btn-cta:active) { + background-image: linear-gradient(90deg,#e052a0,#f15c41); color: #fff; +} \ No newline at end of file diff --git a/personal/personal-2/assets/css/resets.css b/personal/personal-2/assets/css/resets.css new file mode 100644 index 0000000..f8bff24 --- /dev/null +++ b/personal/personal-2/assets/css/resets.css @@ -0,0 +1,25 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +/* h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } */ +/* p, li { word-break: break-word; hyphens: auto } */ + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: 'Poppins', sans-serif; + background-color: #183153; +} \ No newline at end of file diff --git a/personal/personal-2/assets/img/contact-pic.jpg b/personal/personal-2/assets/img/contact-pic.jpg new file mode 100644 index 0000000..c20987b Binary files /dev/null and b/personal/personal-2/assets/img/contact-pic.jpg differ diff --git a/personal/personal-2/assets/img/home-pic.jpg b/personal/personal-2/assets/img/home-pic.jpg new file mode 100644 index 0000000..de3cc92 Binary files /dev/null and b/personal/personal-2/assets/img/home-pic.jpg differ diff --git a/personal/personal-2/assets/img/portfolio-pic.jpg b/personal/personal-2/assets/img/portfolio-pic.jpg new file mode 100644 index 0000000..36e0979 Binary files /dev/null and b/personal/personal-2/assets/img/portfolio-pic.jpg differ diff --git a/personal/personal-2/assets/img/profile-pic.jpg b/personal/personal-2/assets/img/profile-pic.jpg new file mode 100644 index 0000000..cd04eaa Binary files /dev/null and b/personal/personal-2/assets/img/profile-pic.jpg differ diff --git a/personal/personal-2/assets/img/project-ireland.jpg b/personal/personal-2/assets/img/project-ireland.jpg new file mode 100644 index 0000000..2379516 Binary files /dev/null and b/personal/personal-2/assets/img/project-ireland.jpg differ diff --git a/personal/personal-2/assets/img/project-smoothie.jpg b/personal/personal-2/assets/img/project-smoothie.jpg new file mode 100644 index 0000000..b0d0a5a Binary files /dev/null and b/personal/personal-2/assets/img/project-smoothie.jpg differ diff --git a/personal/personal-2/assets/img/project-van-gogh.png b/personal/personal-2/assets/img/project-van-gogh.png new file mode 100644 index 0000000..2a31ac4 Binary files /dev/null and b/personal/personal-2/assets/img/project-van-gogh.png differ diff --git a/personal/personal-2/assets/img/website-logo.png b/personal/personal-2/assets/img/website-logo.png new file mode 100644 index 0000000..cf6abde Binary files /dev/null and b/personal/personal-2/assets/img/website-logo.png differ diff --git a/personal/personal-2/assets/js/menus.js b/personal/personal-2/assets/js/menus.js new file mode 100644 index 0000000..e024a05 --- /dev/null +++ b/personal/personal-2/assets/js/menus.js @@ -0,0 +1,48 @@ +// Code to detect click of option within fly-out menu +let specifiedElement = document.querySelector('.flyout-menu'); +document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } +}); + +// Code to show/hide fly-out mobile menu --> +document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) +const pageContainer = document.querySelector('.page-container'); + +function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } +} + + diff --git a/personal/personal-2/contact/index.html b/personal/personal-2/contact/index.html new file mode 100644 index 0000000..8e15946 --- /dev/null +++ b/personal/personal-2/contact/index.html @@ -0,0 +1,197 @@ + + + + + + + + Contact | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Realise your digital potential

+

Helping businesses of every size and type get the most from digital platforms.

+
+
+ hero image +
+ +
+ + + + +
+

Get in touch

+

Use the form below to let me know a little more about your objectives and I'll get back to you.

+ + +
+ + + +
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + + + +
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/personal/personal-2/index.html b/personal/personal-2/index.html new file mode 100644 index 0000000..550225c --- /dev/null +++ b/personal/personal-2/index.html @@ -0,0 +1,193 @@ + + + + + + + + Aurelien Rebourg Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Aurelien Rebourg, web designer +

Hi, I'm Aurelien Rebourg, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
aurelien.rebourg@gmail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Welcome to my website

+

Hi, I'm Aurelien Rebourg. I create digital experiences to promote products, services and events.

+
+ Portfolio + Contact +
+
+
+ hero image +
+
+ + + + + +
+
+

Recent Projects

+

Below you can see some examples of my recent work. Check out my complete portfolio. Have a project you'd like to discuss? Let's make something great together!

+
+
+ + +
+ +
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/personal/personal-2/portfolio/index.html b/personal/personal-2/portfolio/index.html new file mode 100644 index 0000000..d97d0a7 --- /dev/null +++ b/personal/personal-2/portfolio/index.html @@ -0,0 +1,186 @@ + + + + + + + + Portfolio | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Welcome to my work

+

I use HTML and CSS with graphic design and animation to bring your ideas to life.

+
+ Contact +
+
+
+ hero image +
+
+ + +
+
+

Web Development Projects

+

Below you can see some examples of my work from my web development and design porfolio.

+
+
+ +
+
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/personal/personal-3/assets/css/footer.css b/personal/personal-3/assets/css/footer.css new file mode 100644 index 0000000..3bfbedb --- /dev/null +++ b/personal/personal-3/assets/css/footer.css @@ -0,0 +1,135 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#222; + background-color:#fcd0c7 +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #222 } + +/* Footer headings */ +footer h4 { + font-family: 'Playfair Display', serif; + font-weight: 700; + font-style: italic; + font-size: calc(26px + (52 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: 'Source Serif Pro', sans-serif; + font-weight: normal; + font-style: italic; + color: brown; + margin: 0 auto 36px auto; + font-size: calc(26px + (38 - 26) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #222; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #222 +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #222 +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #222 +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#222; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #222 +} \ No newline at end of file diff --git a/personal/personal-3/assets/css/header.css b/personal/personal-3/assets/css/header.css new file mode 100644 index 0000000..4b1cf29 --- /dev/null +++ b/personal/personal-3/assets/css/header.css @@ -0,0 +1,219 @@ +/* ================ HERO BLOCK ================ */ + +header.hero-block { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + background-color: #e4ffe6; +} + +@media (min-width: 1200px) { + header.hero-block { min-height: 85vh } +} + +@media (min-width: 768px) and (max-width: 1199px) { + header.hero-block { min-height: 460px } +} + +@media (max-width: 767px) { + header.hero-block { min-height: 480px; padding: 8% 0 } +} + +header.hero-block .hero-text-container { padding: 0 12% 2% 12%; z-index: 2 } + +header.hero-block .hero-bg-media { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + z-index: 0; +} + +header.hero-block .hero-bg-media * { + object-fit: cover; width: 100%; height: 100%; +} + +@media (min-width: 768px) { + header.hero-block .hero-bg-media.media-right img { + object-fit: contain; margin-left: 25%; + } + header.hero-block .hero-bg-media.media-left img { + object-fit: contain; margin-left: -30%; + } +} + +header.hero-block .bg-overlay { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; + background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.0.1)); +} + +/* Headings */ +header.hero-block .hero-text-container h1, +header.hero-block .hero-text-container h2 { + line-height: 1.2; + font-weight: normal; + color: #222; +} + +header.hero-block .hero-text-container h1 { + font-size: calc(54px + (84 - 54) * ((100vw - 320px) / (1600 - 320))); + margin-bottom: 24px; + letter-spacing: -2px; + font-weight: 400; + font-family: 'Playfair Display', serif; + color: #222; +} + +.wavy-underline { + text-decoration: wavy underline green; + text-underline-offset: 0.7rem; +} + +header.hero-block .hero-text-container h2 { + font-size: calc(22px + (40 - 22) * ((100vw - 320px) / (1600 - 320))); + font-weight: normal; + line-height: 1.6; + color: #222; + font-family: 'Open Sans', sans-serif; + letter-spacing: -1px; + max-width: 800px; + margin-right: auto; + font-family: 'Source Serif Pro', serif; +} + +header.hero-block .hero-text-container.text-center { + text-align: center; +} + + + +/* =========== HEADER: BUTTONS AND ICONS ============= */ + +header.hero-block .container-btn { display: flex } + +/* Desktops */ +@media (min-width: 767px) { + header.hero-block .container-btn { margin-top: 64px } + header.hero-block .container-btn a:first-child { margin-right: 80px } +} + +/* Desktops: button(s) centre-aligned */ +@media (min-width: 768px) { + header.hero-block .container-btn.text-center { justify-content: center } +} + +/* Mobiles */ +@media (max-width: 767px) { + header.hero-block .container-btn { margin-top: 42px; flex-direction: column } + header.hero-block .container-btn .btn { align-self: flex-start } + header.hero-block .container-btn a:first-child { margin-bottom: 32px } + header.hero-block .container-btn a:last-child { margin-bottom: 0 } + /* Centre-align by default on mobiles */ + header.hero-block .container-btn .btn { align-self: center } +} + +/* All buttons */ +header.hero-block .container-btn .btn { + text-decoration: none; font-weight: bold; line-height: 1; + padding: 14px 26px 18px 26px; font-size: 20px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +/* Solid buttons */ +header.hero-block .container-btn .btn-solid:link, +header.hero-block .container-btn .btn-solid:visited { + background-color: #222; + color: #fff; +} + +header.hero-block .container-btn .btn-solid:focus, +header.hero-block .container-btn .btn-solid:hover, +header.hero-block .container-btn .btn-solid:active { + background-color:#888; + color: #fff; +} + +/* Gradient buttons */ +header.hero-block .container-btn .btn-gradient:link, +header.hero-block .container-btn .btn-gradient:visited { + background-image: linear-gradient(90deg,#e052a0,#f15c41); + color: #fff; +} + +header.hero-block .container-btn .btn-gradient:focus, +header.hero-block .container-btn .btn-gradient:hover, +header.hero-block .container-btn .btn-gradient:active { + background-image: linear-gradient(to right,#3ec7e0,#526bf4); + color: #fff; +} + +/* Ghost buttons */ +header.hero-block .container-btn .btn-ghost:link, +header.hero-block .container-btn .btn-ghost:visited { + border: solid 2px #222; + color: #222; + background-color: transparent; + padding: 12px 26px 16px 26px; +} + +header.hero-block .container-btn .btn-ghost:focus, +header.hero-block .container-btn .btn-ghost:hover, +header.hero-block .container-btn .btn-ghost:active { + border: solid 2px #888; + color: #fff; + background-color: #888; +} + +header.hero-block .container-btn .btn-ghost i { color: #222 } + +header.hero-block .container-btn .btn-ghost:focus i, +header.hero-block .container-btn .btn-ghost:hover i, +header.hero-block .container-btn .btn-ghost:active i { color: #fff } + +/* Header button corner styles */ +header.hero-block .container-btn .btn-soft { border-radius: 5px } +header.hero-block .container-btn .btn-rounded { border-radius: 30px } + +/* Header buttons with Font Awesome icons */ +header.hero-block .container-btn .btn i { margin-right: 10px; } + +/* Mobile app buttons */ +header.hero-block .container-btn .btn-mobile-app { padding: 0 } + +@media (min-width: 768px) { + header.hero-block .container-btn .btn-mobile-app { max-width: 180px } +} + +@media (max-width: 767px) { + header.hero-block .container-btn .btn-mobile-app { max-width: 150px } +} + +/* Button plain underline */ +header.hero-block .container-btn .btn-underline { + padding: 0 0 6px 0; + text-decoration: none; + font-size: 22px; + font-family: 'Open Sans', sans-serif; + font-weight: bold +} + +header.hero-block .container-btn .btn-underline:link, +header.hero-block .container-btn .btn-underline:visited { + color: #222; + border-bottom: solid 2px #222; + width: fit-content; + align-self: center; +} + +header.hero-block .container-btn .btn-underline:focus, +header.hero-block .container-btn .btn-underline:hover, +header.hero-block .container-btn .btn-underline:active { + border-bottom: solid 2px red; +} + +header.hero-block .container-btn .btn-underline i { margin-right: 10px; } + +@media (min-width: 768px) { + header.hero-block .container-btn a.btn-underline:first-child { margin-right: 80px } +} + + diff --git a/personal/personal-3/assets/css/main.css b/personal/personal-3/assets/css/main.css new file mode 100644 index 0000000..72b9a02 --- /dev/null +++ b/personal/personal-3/assets/css/main.css @@ -0,0 +1,400 @@ + +/* Default font and colours */ + +h1, h2, h3 { color: #222 } +p, li { color: #222 } +.bg-pastel-coral { background-color: #fcd0c7 } +.bg-pastel-grey { background-color: #edf5f1 } + +.bg-soft-black { background-color: #181A18 } + + +/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .container-one-column { padding: 4% 20% 5% 20% } +} + +/* Mobiles */ +@media all and (max-width:767px) { + .container-one-column { + padding: 7% 7% 10% 7%; + text-align: center; + } +} + +.container-one-column h1 { + line-height: 1.2; margin-bottom: 32px; + font-size: calc(38px + (54 - 38) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h2 { + line-height: 1.3; margin-top:32px; margin-bottom: 12px; + font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h3 { + line-height: 1.4; margin-top:28px; margin-bottom: 2px; + font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column p, +.container-one-column li { + line-height: 1.5; margin-bottom:14px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column ul { margin-left: 17px } + + +/* ============== FAUX BUTTONS =================== */ + +a.button:link, a.button:visited, a.button:hover, a.button:active { + text-decoration: none; + color: inherit; + border-style: solid; + border-width: 2px; + padding: 18px 28px; + display: inline-block; + line-height: 1; + font-weight: bold; + text-transform: uppercase; + letter-spacing: 1px; +} + +a.button-solid:link, .button-solid:visited { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +a.button-solid:hover, .button-solid:active { + border-color: #fff; + background-color: #403d50; + color: #fff +} + +a.button-ghost:link, a.button-ghost:visited { + border-color: #403d50; + background-color: transparent; + color: #403d50 +} + +a.button-ghost:hover, .button-ghost:active { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +a.button-soft { border-radius: 5px } +a.button-round { border-radius: 25px } + +/* Hide button icons on narrow desktop sceens */ +@media all and (min-width:768px) and (max-width: 1024px) { + .container-flexbox .item-3 a.button i { display: none} +} + + +/* ============== FANCY HYPERLINKS =================== */ + +a.fancy-link:link, a.fancy-link:visited, +a.fancy-link:hover, a.fancy-link:active { + text-decoration: none; + color: inherit; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom: 2px; +} + +a.fancy-link:link, a.fancy-link:visited { + color: #222; + border-bottom-color:#222; +} + +a.fancy-link:hover, a.fancy-link:active { + color: #222; + border-bottom-color: brown +} + + +/* ============== FLEXBOX MULTI-COLUMN LAYOUTS ================== */ + + +/* ============ PARENT FLEXBOX CONTAINERS ========== */ + +.container-flexbox { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Desktops only - inside padding */ +@media all and (min-width:768px) { + .container-flexbox { padding: 4% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media all and (max-width:767px) { + .container-flexbox { padding: 87% 8% 1% 8% } +} + +/* ====== INNER FLEXBOX COLUMN: 1 COLUMN EVERY SCREEN ======= */ + +.container-flexbox .item-1 { + width: 100%; + padding: 1% 6% 0 6%; + text-align: center; +} + +/* ====== FLEXBOX ITEM COLUMNS: 2 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ====== */ + +/* Desktops - 2 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + +.container-flexbox .item-2 h2 { + font-size: calc(24px + (48 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +.container-flexbox .item-2 p { + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */ + + +/* Desktops - 3 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-3 { width: 30% } + .container-flexbox .item-3 { margin-bottom: 6% } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-3 { width: 100% } + .container-flexbox .item-3 { margin-bottom: 14% } +} + + +/* Spacing under images in children of parent flexbox containers */ +.container-flexbox img { margin-bottom: 20px } + +/* Drop shadow effect around images */ +img.image-shadow { + box-shadow: 8px 10px 8px #888; + margin-bottom: 20px +} + +/* Makes square images circles */ +img.image-circle { + border-radius: 100%; +} + +.container-flexbox .item-1 h2 { + font-family: 'Playfair Display', serif; + color: #222; + line-height: 1.2; margin-bottom: 18px; + letter-spacing:-1px; + font-weight: 700; + font-size: calc(24px + (56 - 24) * ((100vw - 320px)/(1600 - 320))); +} + +.container-flexbox .item-1 p { + font-family: 'Source Serif Pro', serif; + line-height: 1.5; margin-bottom: 14px; + font-size: calc(17px + (28 - 17) * ((100vw - 320px)/(1600 - 320))); +} + +@media all and (max-width:767px) { + .container-flexbox .item-1 { text-align: center } +} + +.container-flexbox .item-1, +.container-flexbox .item-2 p, +.container-flexbox .item-3 p { + font-family: 'Source Serif Pro', serif; + line-height: 1.5; margin-bottom: 20px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; +} + +.container-flexbox .item-2 h3, +.container-flexbox .item-3 h3 { + line-height: 1.2; margin-bottom: 12px; + font-family: 'Playfair Display', serif; + font-weight: bold; + color: #fff; +} + +/* Centre-align text within two, three and four columns on mobiles */ +@media all and (max-width:767px) { + .container-flexbox .item-2, + .container-flexbox .item-3 { text-align: center } + .container-flexbox .item-3 img { + width: 90%; + max-width: 390px; + margin-left: auto; + margin-right: auto; + } +} + +.container-flexbox .item-3 h3, +.container-flexbox .item-3-2 h3 { + font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320))); + margin-bottom: 12px; + margin-top: 32px; + font-weight: 400; + line-height: 1.6; + font-family: 'Playfair Display', serif; + color: #fff; + letter-spacing: 0; +} + +.container-flexbox .item-3 img { + margin-top: 12px +} + + +/* =============== BEGIN CONTACT FORM CSS ============= */ + +/* == Contact form container == */ + +/* All screens */ +.container-contact-form { + text-align: center; + background-color: #fff; + border: solid 1px gray +} + +/* Desktop */ +@media all and (min-width:1024px) { + .container-contact-form { + margin: 4% 23% 4% 23%; + padding: 2% 4% 1% 4% + } +} + +/* Mobiles */ +@media all and (max-width:1023px) { + .container-contact-form { + margin: 6% 8% 18% 8%; + padding: 7% 8% 8% 8%; + } +} + +/* == Contact form heading and text == */ + +/* Heading */ +.container-contact-form h3 { + font-family: 'Playfair Display', serif; + font-weight: 700; + color: #2c3e50; + line-height: 1.2; + margin-bottom: 3%; + font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +/* Text */ +.container-contact-form p { + font-family: 'Source Serif Pro', serif; + font-weight: normal; + color: #000; + line-height: 1.5; + margin-bottom: 7%; + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* == Contact form fields == */ + +#contact-form .flex-row { display: flex; justify-content: space-between } + +/* Desktop */ +@media all and (min-width: 1024px) { + #contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% } + #contact-form .flex-row .item-name, + #contact-form .flex-row .item-email { width: 47% } + #contact-form .flex-row .item-textarea { width: 64% } + #contact-form .flex-row .item-btn { width: 30%; align-self: flex-end } +} + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form .flex-row { flex-direction: column; text-align: center; } +} + +#contact-form label, #contact-form input, #contact-form textarea { + font-family: sans-serif; + color: #000; + display: block; +} + +#contact-form label { + font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); + font-weight: bold; + margin-bottom: 8px; + display: flex; + align-items: baseline; +} + +#contact-form [type="text"], +#contact-form [type="email"], +#contact-form textarea { width: 100% } +#contact-form ::placeholder { font-size: 94% } + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form [type="text"], + #contact-form [type="email"], + #contact-form textarea { margin-bottom: 20px } +} + +#contact-form input, #contact-form textarea { + padding: 10px 12px; + border: 2px solid #222; + background-color: #f0f0f0; + border-radius: 5px; +} + +#contact-form input:focus, +#contact-form textarea:focus { + background-color: #fff; +} + +#contact-form.flex-row .item-btn { width: 26% } + +#contact-form #btn-submit { + float: right; + border: none; + background-color: #222; + color: #fff; + font-weight: bold; + padding: 18px 28px; + font-size: 18px +} + + +#contact-form #btn-submit:hover, +#contact-form #btn-submit:active { + background-color: #403d50; + color: #fff +} + +#contact-form #btn-submit i.fas { + margin-left: 9px; + font-size: 104% +} + diff --git a/personal/personal-3/assets/css/menus.css b/personal/personal-3/assets/css/menus.css new file mode 100644 index 0000000..ba4cc9a --- /dev/null +++ b/personal/personal-3/assets/css/menus.css @@ -0,0 +1,317 @@ +/* ===================== BEGIN MENU STYLES ========================== */ + +/* === All screen sizes ====== */ + +.unhide-content-under-sticky-menu { margin-top: 72px } + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { width:100% } + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-light { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* prevents content from disappearing udner sticky menus */ +.sticky-anchor { + position: relative; + border-top: 90px solid transparent; + margin: -90px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } + + .sticky-anchor:before { + content: ""; + position: absolute; + top: -2px; + left: 0; + right: 0; + } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically centered in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 80px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 6px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu.flyout-menu-is-open { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu.flyout-menu-is-open { + box-shadow: 0px 1px 10px #888 +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box, +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img, +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p { width: 47% } + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ========= Light background menu - desktops and mobiles ========= */ + +/* background colour */ +.menu-light { + background-color: #e4ffe6; + transition: all .5s ease-in-out; +} + +/* menu links */ + +.menu-light ul li a { font-weight: 700 } +.menu-light ul li a:link, .menu-light ul li a:visited { color: #222 } +.menu-light ul li a:hover, .menu-light ul li a:active { color: #403d50 } + +/* cta button */ + +.menu-light ul li a.btn-cta { font-weight: 700 } +.menu-light ul li a.btn-cta:link, +.menu-light ul li a.btn-cta:visited { + border-color: #222; + background-color: #222; + color: #fff; +} + +.menu-light ul li a.btn-cta:hover, +.menu-light ul li a.btn-cta:active { + border-color: #403d50; + background-color: #403d50; + color: #fff +} + +/* on mobiles only */ +.flyout-menu.menu-light { background-color: #e4ffe6 } +.menu-light.flyout-menu hr { background-color:#222; border-color: #222 } + +.menu-light.flyout-menu h4, +.menu-light.flyout-menu h5, +.menu-light.flyout-menu h5 a, +.menu-light.flyout-menu p { color: #403d50 } + +/* colour of hamburger icon bars */ +.menu-light .item-icon .bar1, +.menu-light .item-icon .bar2, +.menu-light .item-icon .bar3 { background-color:#403d50 } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: red } + +/* email link */ +.menu-light.flyout-menu h5 a:link, +.menu-light.flyout-menu h5 a:visited { + border-bottom-color: #222; +} + +.menu-light.flyout-menu h5 a:hover, +.menu-light.flyout-menu h5 a:active { + border-bottom-color: transparent; +} + +/* profile image border colour */ +.menu-light.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { border-color: #222 } + +/* contact icons */ +.menu-light.flyout-menu .fly-out-social-icons a i { color: #222 } + +/* === End light background menu === */ diff --git a/personal/personal-3/assets/css/resets.css b/personal/personal-3/assets/css/resets.css new file mode 100644 index 0000000..c17a7d6 --- /dev/null +++ b/personal/personal-3/assets/css/resets.css @@ -0,0 +1,24 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +/* h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } */ +/* p, li { word-break: break-word; hyphens: auto } */ + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: 'Playfair Display', serif; +} \ No newline at end of file diff --git a/personal/personal-3/assets/img/hero-undraw-contact.png b/personal/personal-3/assets/img/hero-undraw-contact.png new file mode 100644 index 0000000..580a13c Binary files /dev/null and b/personal/personal-3/assets/img/hero-undraw-contact.png differ diff --git a/personal/personal-3/assets/img/hero-undraw-home.png b/personal/personal-3/assets/img/hero-undraw-home.png new file mode 100644 index 0000000..7085651 Binary files /dev/null and b/personal/personal-3/assets/img/hero-undraw-home.png differ diff --git a/personal/personal-3/assets/img/hero-undraw-portfolio.png b/personal/personal-3/assets/img/hero-undraw-portfolio.png new file mode 100644 index 0000000..597de03 Binary files /dev/null and b/personal/personal-3/assets/img/hero-undraw-portfolio.png differ diff --git a/personal/personal-3/assets/img/profile-pic.jpg b/personal/personal-3/assets/img/profile-pic.jpg new file mode 100644 index 0000000..cd04eaa Binary files /dev/null and b/personal/personal-3/assets/img/profile-pic.jpg differ diff --git a/personal/personal-3/assets/img/project-ireland.jpg b/personal/personal-3/assets/img/project-ireland.jpg new file mode 100644 index 0000000..2379516 Binary files /dev/null and b/personal/personal-3/assets/img/project-ireland.jpg differ diff --git a/personal/personal-3/assets/img/project-smoothie.jpg b/personal/personal-3/assets/img/project-smoothie.jpg new file mode 100644 index 0000000..b0d0a5a Binary files /dev/null and b/personal/personal-3/assets/img/project-smoothie.jpg differ diff --git a/personal/personal-3/assets/img/project-van-gogh.png b/personal/personal-3/assets/img/project-van-gogh.png new file mode 100644 index 0000000..2a31ac4 Binary files /dev/null and b/personal/personal-3/assets/img/project-van-gogh.png differ diff --git a/personal/personal-3/assets/img/website-logo.png b/personal/personal-3/assets/img/website-logo.png new file mode 100644 index 0000000..cf6abde Binary files /dev/null and b/personal/personal-3/assets/img/website-logo.png differ diff --git a/personal/personal-3/assets/js/menus.js b/personal/personal-3/assets/js/menus.js new file mode 100644 index 0000000..fa9eaf6 --- /dev/null +++ b/personal/personal-3/assets/js/menus.js @@ -0,0 +1,62 @@ +// Code to detect click of option within fly-out menu +let specifiedElement = document.querySelector('.flyout-menu'); +document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } +}); + +// Code to show/hide fly-out mobile menu --> +document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) +const pageContainer = document.querySelector('.page-container'); + +function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } +} + +// Code for menus with transparent background +window.onscroll = function() {swapMenuStyle()}; +const headerDesktop = document.querySelector('.container-menu-desktop'); +const headerMobile = document.querySelector('.container-menu-bar-mobile'); + +const stickyDesktop = headerDesktop.offsetTop +300; +const stickyMobile = headerDesktop.offsetTop +300; + +function swapMenuStyle() { + if (window.pageYOffset > stickyDesktop) { + headerDesktop.classList.add("menu-drop-shadow"); + } else { + headerDesktop.classList.remove("menu-drop-shadow"); + } +} diff --git a/personal/personal-3/contact/index.html b/personal/personal-3/contact/index.html new file mode 100644 index 0000000..169763d --- /dev/null +++ b/personal/personal-3/contact/index.html @@ -0,0 +1,198 @@ + + + + + + + + Contact | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Let’s succeed together

+

I can help organisations of every size and type get the most from digital platforms.

+
+
+ + + + +
+

Get in touch

+

Use the form below to let me know a little more about your objectives and I’ll get back to you.

+ + +
+ + + +
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + + + +
+ + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/personal/personal-3/index.html b/personal/personal-3/index.html new file mode 100644 index 0000000..84dfa88 --- /dev/null +++ b/personal/personal-3/index.html @@ -0,0 +1,189 @@ + + + + + + + + Aurelien Rebourg Web Designer + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Aurelien Rebourg, web designer +

Hi, I'm Aurelien Rebourg, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
aurelien.rebourg@gmail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Aurelien Rebourg

+

I am an innovative JavaScript Engineer who loves to build human-friendly interfaces.

+
Let's talk + Portfolio +
+
+
+ + + + + +
+
+

Recent projects

+

Below you can see some examples of my recent work. Check out my complete portfolio. Have a project you'd like to discuss? Let's make something great together!

+
+
+ + +
+ +
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/personal/personal-3/portfolio/index.html b/personal/personal-3/portfolio/index.html new file mode 100644 index 0000000..1ec1500 --- /dev/null +++ b/personal/personal-3/portfolio/index.html @@ -0,0 +1,187 @@ + + + + + + + + Portfolio | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Things I have created

+

I use JavaScript, HTML and CSS with graphic design and animation to bring your ideas to life.

+
Let's talk +
+
+
+ + +
+
+

Web Development Projects

+

Below you can see some examples of my work from my web development and design porfolio.

+
+
+ +
+ +
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/personal/personal-4/assets/css/footer.css b/personal/personal-4/assets/css/footer.css new file mode 100644 index 0000000..a6f41bb --- /dev/null +++ b/personal/personal-4/assets/css/footer.css @@ -0,0 +1,135 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#fff; + background-color:#2c3e50; +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #fff } + +/* Footer headings */ +footer h4 { + font-family: serif; + font-weight: normal; + font-style: italic; + font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: sans-serif; + font-weight: normal; + font-style: italic; + color: #ff6501; + margin: 0 auto 36px auto; + font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #fff +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #fff +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #fff +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#fff; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #fff +} \ No newline at end of file diff --git a/personal/personal-4/assets/css/header.css b/personal/personal-4/assets/css/header.css new file mode 100644 index 0000000..37edc11 --- /dev/null +++ b/personal/personal-4/assets/css/header.css @@ -0,0 +1,385 @@ +/* ================ HERO BLOCK ================ */ + +.hero-block { + position: relative; overflow: hidden; + display: flex; flex-direction: column; justify-content: center; +} + +@media (min-width: 1200px) { + .hero-block { min-height: 90vh } +} + +@media (min-width: 768px) and (max-width: 1199px) { + .hero-block { min-height: 460px } +} + +@media (max-width: 767px) { + .hero-block { min-height: 480px; padding: 8% 0 } +} + +.hero-block .hero-text-container { padding: 2% 12% 2% 12%; z-index: 2 } + +.hero-block .hero-bg-media { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; +} + +.hero-block .hero-bg-media * { + object-fit: cover; width: 100%; height: 100%; +} + +.hero-block .bg-overlay { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; + background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.3)); +} + +/* Headings */ +.hero-block .hero-text-container h1 { line-height: 1.1 } +.hero-block .hero-text-container h2 { line-height: 1.2 } + +.hero-block .hero-text-container h1 { + font-size: calc(48px + (94 - 48) * ((100vw - 320px) / (1600 - 320))); + margin-bottom: 24px; +} + +.hero-block .hero-text-container h2 { + font-size: calc(22px + (54 - 22) * ((100vw - 320px) / (1600 - 320))); + font-weight: normal; +} + +@media (max-width: 767px) { + .hero-block .hero-text-container h1 { letter-spacing: -2px } + .hero-block .hero-text-container h1 { letter-spacing: -1px } +} + +@media (min-width: 768px) { + .hero-block .hero-text-container h1 { letter-spacing: -1px } + .hero-block .hero-text-container h1 { letter-spacing: 0 } +} + +/* Alignment: desktops */ +@media (min-width: 768px) { + .hero-block .hero-text-container.text-center-desktop { text-align: center } +} + +/* Alignment: mobiles */ +@media (max-width: 767px) { + .hero-block .hero-text-container.text-center-mobile { text-align: center } + .hero-block .hero-text-container.text-left-mobile { text-align: left } +} + + +/* =========== HEADER: BUTTONS AND ICONS ============= */ + +/* Desktops */ +@media (min-width: 768px) { + .hero-block .container-btn { margin-top: 64px } + .hero-block h1 + .container-btn { margin-top: 120px } + .hero-block .container-btn a:first-child { margin-right: 40px } +} + +/* Desktops: button(s) centre-aligned */ +@media (min-width: 768px) { + .hero-block .container-btn.text-center-desktop { justify-content: center } +} + +/* Mobiles */ +@media (max-width: 767px) { + .hero-block .container-btn.text-center-mobile .btn { align-self: center } + .hero-block .container-btn { margin-top: 42px; flex-direction: column } + .hero-block .container-btn .btn { align-self: flex-start } + .hero-block .container-btn a:first-child { margin-bottom: 32px } + .hero-block .container-btn a:last-child { margin-bottom: 0 } + .hero-block h1 + .container-btn { margin-top: 120px } +} + +/* ========== BACKGROUND IMAGE HALF =========== */ + +/* All viewports */ +.hero-block.bg-img-left, +.hero-block.bg-img-right { padding-bottom: 0 } +.hero-block.bg-img-left .bg-overlay, +.hero-block.bg-img-right .bg-overlay { display: none } + + +/* Big desktops */ +@media (min-width: 1140px) { + .hero-block.bg-img-right .hero-text-container, + .hero-block.bg-img-left .hero-text-container { padding: 0 6% 2% 6% } + .hero-block.bg-img-right .hero-text-container { margin-right: 50% } + .hero-block.bg-img-right .hero-bg-media { left: 50% } + .hero-block.bg-img-left .hero-text-container { margin-left: 50% } + .hero-block.bg-img-left .hero-bg-media { right: 50% } +} + +/* Small desktops and tablets */ +@media (min-width: 768px) and (max-width: 1139px) { + .hero-block.bg-img-right .hero-text-container { margin-right: 40% } + .hero-block.bg-img-right .hero-bg-media { left: 60% } + .hero-block.bg-img-left .hero-text-container { margin-left: 40% } + .hero-block.bg-img-left .hero-bg-media { right: 60% } +} + +/* Not big or small desktops, or big tablets */ +@media (max-width: 900px) { + .hero-block.bg-img-right .container-btn, + .hero-block.bg-img-left .container-btn { + margin-top: 42px; + flex-direction: column; + } + .hero-block .container-btn .btn { align-self: flex-start } + .hero-block.bg-img-left .container-btn a:first-child, + .hero-block.bg-img-right .container-btn a:first-child { margin-bottom: 32px } + .hero-block.bg-img-left .container-btn a:last-child, + .hero-block.bg-img-right .container-btn a:last-child { margin-bottom: 0 } +} + +/* Small desktops and tablets*/ +@media (min-width: 768px) and (max-width: 1139px) { + .hero-block.bg-img-right .hero-text-container, + .hero-block.bg-img-left .hero-text-container { padding: 0 5% 2% 5% } +} + +/* All mobiles */ +@media (max-width: 767px) { + .hero-block.bg-img-right, .hero-block.bg-img-left { + display: flex; flex-direction: column; justify-content: space-between; + } + .hero-block.bg-img-right div, .hero-block.bg-img-left div { position: relative } + .hero-block.bg-img-right .hero-text-container, + .hero-block.bg-img-left .hero-text-container { padding: 0 6% 12% 6% } + .hero-block.bg-img-left .container-btn, + .hero-block.bg-img-right .container-btn { margin-top: 42px; flex-direction: column } + .hero-block.bg-img-left .container-btn .btn, + .hero-block.bg-img-right .container-btn .btn { align-self: flex-start } + .hero-block.bg-img-left .container-btn a:first-child, + .hero-block.bg-img-right .container-btn a:first-child { margin-bottom: 32px } + .hero-block.bg-img-left .container-btn a:last-child, + .hero-block.bg-img-right .container-btn a:last-child { margin-bottom: 0 } + .hero-block.bg-img-right .container-btn.text-center-mobile .btn, + .hero-block.bg-img-left .container-btn.text-center-mobile .btn { + text-align: center; margin-left: auto; margin-right: auto + } +} + +/* Large mobiles */ + +@media (min-width: 560px) and (max-width: 767px ) { + .hero-block.bg-img-right .hero-bg-media img, + .hero-block.bg-img-left .hero-bg-media img { + width: 70%; height: auto; text-align: center; + margin: -32px auto 32px auto; + } +} + + +/* Typography */ +.hero-block.bg-img-left .hero-text-container h1, +.hero-block.bg-img-right .hero-text-container h1 { + font-size: calc(48px + (84 - 48) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block.bg-img-left .hero-text-container h2, +.hero-block.bg-img-right .hero-text-container h2 { + font-size: calc(26px + (42 - 26) * ((100vw - 320px) / (1600 - 320))); +} + +.hero-block.bg-img-left .hero-text-container h1.text-long, +.hero-block.bg-img-right .hero-text-container h1.text-long { + font-size: calc(28px + (42 - 28) * ((100vw - 320px) / (1600 - 320))); + letter-spacing: 0; + line-height: 1.2; +} + +.hero-block.bg-img-left .hero-text-container h2.text-long, +.hero-block.bg-img-right .hero-text-container h2.text-long { + font-size: calc(20px + (38 - 20) * ((100vw - 320px) / (1600 - 320))); + letter-spacing: 0; + line-height: 1.3; +} + + +/* ---------------------------------------------- + * Generated by Animista + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + + .slide-in-top { + -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.slide-in-left { + -webkit-animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.slide-in-bottom { + -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +.fade-in { + -webkit-animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; + animation: fade-in 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; +} + +@-webkit-keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + + @-webkit-keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} + + @-webkit-keyframes slide-in-bottom { + 0% { + -webkit-transform: translateY(1000px); + transform: translateY(1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slide-in-bottom { + 0% { + -webkit-transform: translateY(1000px); + transform: translateY(1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + + +/* ================ UTILITY CLASSES ============= */ + +header .text-center { text-align: center } +header .text-shadow { text-shadow: 2px 2px #222; } + + + +/* ========== COLOURS =========== */ + +.hero-block { background-color: #3098f3 } + +.hero-block h1, .hero-block h2 { color:#fff } + + +/* Button container */ +.container-btn { display: flex } + + +/* All buttons */ +.container-btn .btn { + text-decoration: none; font-weight: bold; line-height: 1; + padding: 12px 26px 15px 26px; + border-width: 2px; border-style: solid; line-height: 1; outline: none; + transition: all 0.2s ease-in-out; + display: inline-block; + font-size: calc(17px + (20 - 17) * ((100vw - 320px) / (1600 - 320))); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +/* Solid buttons */ +.container-btn .btn-solid:any-link { + background-color: #ff6501; border-color: #ff6501; color: #fff; +} + +.container-btn :is(.btn-solid:focus, .btn-solid:hover,.btn-solid:active) { + background-color: #222; border-color: #222; color: #fff; +} + + +/* Ghost buttons */ +.container-btn .btn-ghost:any-link { + border: solid 2px #fff; color: #fff; background-color: transparent; +} + +.container-btn :is(.btn-ghost:focus, .btn-ghost:hover, .btn-ghost:active) { + border: solid 2px #222; background-color: #222; color: #fff; +} + +.container-btn .btn-ghost i { color: #fff } +.container-btn .btn-ghost:focus i, +.container-btn .btn-ghost:hover i, +.container-btn .btn-ghost:active i { color: #fff } + +/* Buttons: corner styles */ +.container-btn .btn-soft { border-radius: 5px } +.container-btn .btn-rounded { border-radius: 30px } + +/* Buttons: Font Awesome icons */ +.container-btn .btn i { margin-right: 10px; } + + diff --git a/personal/personal-4/assets/css/main.css b/personal/personal-4/assets/css/main.css new file mode 100644 index 0000000..1731801 --- /dev/null +++ b/personal/personal-4/assets/css/main.css @@ -0,0 +1,462 @@ + + + +/* === HERO BLOCK === */ + +.container-hero-block { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + background-position: center center; + background-size: cover; + background-repeat: no-repeat; +} + +.container-hero-block.home-page { + background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0)), url('../img/hero-home-background.jpg'); +} + +.container-hero-block.portfolio-page { + background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0)), url('../img/hero-portfolio-background.jpg'); +} + +.container-hero-block.contact-page { + background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0)), url('../img/hero-contact-background.jpg') +} + +.container-hero-block h1, .container-hero-block h2 { + font-weight: 700; + font-family: 'Open Sans', sans-serif; + text-shadow: 2px 2px #222; + margin-left: auto; + margin-right: auto; +} + +.container-hero-block h1 { + color: #fff; + font-size: calc(42px + (102 - 42) * ((100vw - 320px)/(1600 - 320))) +} + +.container-hero-block h2 { + color: #4799eb; + line-height: 1.5; + font-size: calc(32px + (64 - 32) * ((100vw - 320px)/(1600 - 320))); +} + +/* Desktop - block height, text width and h1 bottom margin */ +@media all and (min-width:768px) { + .container-hero-block { height: 520px } + .container-hero-block h1, .container-hero-block h2 { + width: 60%; + } + .container-hero-block h1 {margin-top: 3%; margin-bottom: 3% } +} + +/* Mobiles - block height, text width and h1 bottom margin */ +@media all and (max-width:767px) { + .container-hero-block { height: 500px } + .container-hero-block h1, .container-hero-block h2 { + width: 90%; + } + .container-hero-block h1 { margin-top: 18%; margin-bottom: 5% } +} + + +/* ==== CONTAINER FOR SINGLE COLUMN OF CONTENT ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .container-one-column { padding: 4% 20% 5% 20% } +} + +/* Mobiles */ +@media all and (max-width:767px) { + .container-one-column { + padding: 7% 7% 10% 7%; + text-align: center; + } +} + +.container-one-column h1 { + line-height: 1.2; margin-bottom: 32px; + font-size: calc(38px + (54 - 38) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h2 { + line-height: 1.3; margin-top:32px; margin-bottom: 12px; + font-size: calc(32px + (48 - 32) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column h3 { + line-height: 1.4; margin-top:28px; margin-bottom: 2px; + font-size: calc(22px + (32 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column p, +.container-one-column li { + line-height: 1.5; margin-bottom:14px; + font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320))); +} + +.container-one-column ul { margin-left: 17px } + + +/* ============== FAUX BUTTONS =================== */ + +a.button:link, a.button:visited, a.button:hover, a.button:active { + text-decoration: none; + color: #fff; + border: none; + padding: 14px 30px; + display: inline-block; + line-height: 1; + font-weight: bold; + letter-spacing: 1px; +} + +a.button-solid:link, .button-solid:visited { + background-color: #ff6501; + color: #fff; +} + +a.button-solid:hover, .button-solid:active { + background-color: #0c1d37; + color: #fff +} + +a.button-round { border-radius: 50px } +a.button-soft { border-radius: 5px } + +/* Hide button icons on narrow desktop sceens */ +@media all and (min-width:768px) and (max-width: 1024px) { + .container-flexbox .item-3 a.button i { display: none} +} + +/* ============== FANCY HYPERLINKS =================== */ + +a.fancy-link:link, a.fancy-link:visited, +a.fancy-link:hover, a.fancy-link:active { + text-decoration: none; + color: inherit; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom: 2px; +} + +a.fancy-link:link, a.fancy-link:visited { + color: #222; + border-bottom-color:#ff6501 +} + +a.fancy-link:hover, a.fancy-link:active { + color: #222; + border-bottom-color: #222 +} + +.text-accent { + display: inline-block; + padding-right: 0.25em; + padding-left: 0.25em; + border-radius: 8px; + background-color: rgba(255, 101, 1, 0.12); + color: #ff6501; +} + + +/* ============== FLEXBOX MULTI-COLUMN LAYOUTS ================== */ + + +/* ============ PARENT FLEXBOX CONTAINERS ========== */ + +.container-flexbox { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Desktops only - inside padding */ +@media all and (min-width:768px) { + .container-flexbox { padding: 2% 10% 1% 10% } +} + +/* Mobiles only - inside padding */ +@media all and (max-width:767px) { + .container-flexbox { padding: 7% 8% 1% 8% } +} + +/* ====== INNER FLEXBOX COLUMN: 1 COLUMN EVERY SCREEN ======= */ + +.container-flexbox .item-1 { + width: 100%; + padding: 1% 6% 0 6%; + text-align: center; +} + +/* ====== FLEXBOX ITEM COLUMNS: 2 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ====== */ + +/* Desktops - 2 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-2 { + width: 45%; + padding: 3% 0 4% 0; + } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-2 { + text-align: center; + width: 100%; + padding: 5% 5% 5% 5%; + } +} + +.container-flexbox .item-2 h2 { + font-size: calc(24px + (48 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +.container-flexbox .item-2 p { + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* =======INNER FLEXBOX COLUMNS: 3 COLUMNS ON DESKTOPS, 1 COLUMN ON MOBILES ===== */ + +/* Desktops - 3 columns */ +@media all and (min-width:768px) { + .container-flexbox .item-3 { width: 30% } + .container-flexbox .item-3 { margin-bottom: 6% } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-flexbox .item-3 { width: 100% } + .container-flexbox .item-3 { margin-bottom: 14% } + .container-flexbox .item-3 img { + max-width: 390px; + width: 90%; + margin-left: auto; + margin-right: auto + } +} + + +/* Spacing under images in children of parent flexbox containers */ +.container-flexbox img { margin-bottom: 20px } + +/* Makes square images circles */ +img.image-circle { + border-radius: 100%; +} + +.container-flexbox .item-1 h2 { + line-height: 1.2; margin-bottom: 8px; + letter-spacing:-1px; + font-size: calc(24px + (48 - 24) * ((100vw - 320px)/(1600 - 320))); +} + +.container-flexbox .item-1 p { + line-height: 1.5; margin-bottom: 14px; + font-size: calc(17px + (22 - 17) * ((100vw - 320px)/(1600 - 320))); +} + +@media all and (max-width:767px) { + .container-flexbox .item-1 { text-align: center } +} + +.container-flexbox .item-1, +.container-flexbox .item-2 p, +.container-flexbox .item-3 p { + line-height: 1.5; margin-bottom:20px; + font-size: calc(16px + (19 - 16) * ((100vw - 320px)/(1600 - 320))); +} + +.container-flexbox .item-2 h3, +.container-flexbox .item-3 h3 { + line-height: 1.6; margin-bottom: 12px; +} + +/* Centre-align text withn two, three and four columns on mobiles */ +@media all and (max-width:767px) { + .container-flexbox .item-2, + .container-flexbox .item-3 { text-align: center } +} + +.container-flexbox .item-3 h3, +.container-flexbox .item-3-2 h3 { + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); + margin-bottom: 12px; + margin-top: 42px; + font-weight: bold; +} + +.container-flexbox .item-3 img { + margin-top: 12px +} + + +/* =============== BEGIN CONTACT FORM CSS ============= */ + +/* == Contact form container == */ + +/* All screens */ +.container-contact-form { + text-align: center; + background-color: #fde6d6 +} + +/* Desktop */ +@media all and (min-width:1024px) { + .container-contact-form { + margin: 4% 23% 4% 23%; + padding: 2% 4% 1% 4% + } +} + +/* Mobiles */ +@media all and (max-width:1023px) { + .container-contact-form { + margin: 6% 8% 18% 8%; + padding: 7% 8% 8% 8%; + } +} + +/* == Contact form heading and text == */ + +/* Heading */ +.container-contact-form h3 { + font-weight: bold; + color: #0c2461; + line-height: 1.2; + margin-bottom: 3%; + font-size: calc(30px + (64 - 30) * ((100vw - 320px) / (1600 - 320))); +} + +/* Text */ +.container-contact-form p { + font-weight: normal; + color: #000; + line-height: 1.5; + margin-bottom: 7%; + font-size: calc(16px + (22 - 16) * ((100vw - 320px) / (1600 - 320))); +} + +/* == Contact form fields == */ + +#contact-form .flex-row { display: flex; justify-content: space-between } + +/* Desktop */ +@media all and (min-width: 1024px) { + #contact-form .flex-row { flex-direction: row; text-align: left; margin-bottom: 6% } + #contact-form .flex-row .item-name, + #contact-form .flex-row .item-email { width: 47% } + #contact-form .flex-row .item-textarea { width: 64% } + #contact-form .flex-row .item-btn { width: 30%; align-self: flex-end } +} + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form .flex-row { flex-direction: column; text-align: center; } +} + +#contact-form label, #contact-form input, #contact-form textarea { + font-family: sans-serif; + color: #000; + display: block; +} + +#contact-form label { + font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320))); + font-weight: bold; + margin-bottom: 8px; + display: flex; + align-items: baseline; +} + +#contact-form [type="text"], +#contact-form [type="email"], +#contact-form textarea { width: 100% } +#contact-form ::placeholder { font-size: 94% } + +/* Mobiles */ +@media all and (max-width: 1023px) { + #contact-form [type="text"], + #contact-form [type="email"], + #contact-form textarea { margin-bottom: 20px } +} + +#contact-form input, #contact-form textarea { + padding: 10px 12px; + border: 2px solid #0c2461; + background-color: #f0f0f0; + border-radius: 5px; +} + +#contact-form input:focus, +#contact-form textarea:focus { + background-color: #fff; +} + +#contact-form.flex-row .item-btn { width: 26% } + +#contact-form #btn-submit { + float: right; + border: none; + background-color: #0c2461; + color: #fff; + font-weight: bold; + padding: 18px 28px; + font-size: 18px +} + + +#contact-form #btn-submit:hover, +#contact-form #btn-submit:active { + background-color: #403d50; + color: #fff +} + +#contact-form #btn-submit i.fas { + margin-left: 9px; + font-size: 104% +} + + + +img.drop-shadow-faint { + filter: drop-shadow(8px 8px 10px #888 ); +} + + +/* == End footer CSS == */ + +/* ---------------------------------------------- + * Generated by Animista on 2019-3-20 10:33:40 + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + + .slide-in-top { + animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +@-webkit-keyframes slide-in-top { + 0% { + transform: translateY(-200px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slide-in-top { + 0% { + transform: translateY(-200px); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} diff --git a/personal/personal-4/assets/css/menus.css b/personal/personal-4/assets/css/menus.css new file mode 100644 index 0000000..adf7077 --- /dev/null +++ b/personal/personal-4/assets/css/menus.css @@ -0,0 +1,367 @@ +/* === ALL SCREEN SIZES ====== */ + +.unhide-content-under-sticky-menu { margin-top: 72px } + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { width:100% } + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-transparent, + .container-menu-desktop.menu-light, + .container-menu-desktop.menu-dark { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-transparent, + .container-menu-bar-mobile.menu-light, + .container-menu-bar-mobile.menu-dark, + .flyout-menu.menu-transparent, + .flyout-menu.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically cente#ff5000 in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; + /* soften corners */ + /* border-radius: 4px; */ + /* rounded corners */ + border-radius: 100px +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 40px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320))); + font-family: 'Open Sans', sans-serif; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 5px 20px 7px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu.flyout-menu-is-open { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px; + border-color: #fff; +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box, +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img, +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p { width: 47% } + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu.flyout-menu-is-open div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu.flyout-menu-is-open div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ========= Light background menu - desktops and mobiles ========= */ + +/* background colour */ +.menu-light { + background-color: #ff6501; + transition: all .5s ease-in-out; +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu.flyout-menu-is-open { + box-shadow: 0px 1px 10px #888 +} + +/* menu links */ +.menu-light ul li a:link, .menu-light ul li a:visited { color: #fff } +.menu-light ul li a:hover, .menu-light ul li a:active { color: #0f2456 } + +/* cta button */ +.menu-light ul li a.btn-cta:link, +.menu-light ul li a.btn-cta:visited { + background-color: transparent; + color: #fff; + border-color:#fff +} + +.menu-light ul li a.btn-cta:hover, +.menu-light ul li a.btn-cta:active { + background-color: #0f2456; + color: #fff; + border-color:#0f2456 +} + +/* on mobiles only */ +.menu-light.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-light.flyout-menu h4, +.menu-light.flyout-menu h5, +.menu-light.flyout-menu h5 a, +.menu-light.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-light .item-icon .bar1, +.menu-light .item-icon .bar2, +.menu-light .item-icon .bar3 { background-color:#0f2456 } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color:#0f2456 } + +/* email link */ +.menu-light.flyout-menu h5 a:link, +.menu-light.flyout-menu h5 a:visited { + border-bottom-color: #0f2456; +} + +.menu-light.flyout-menu h5 a:hover, +.menu-light.flyout-menu h5 a:active { + border-bottom-color: #fff; +} + +/* profile image border colour */ +.menu-light.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { border-color:#0f2456 } + +/* contact icons */ +.menu-light.flyout-menu .fly-out-social-icons a i { color: #fff } + +/* === End light background menu === */ + + +/* ======== Transparent background menu - desktops and mobiles =========== */ + +/* background colour */ +.menu-transparent { + background-color: transparent; + transition: all .5s ease-in-out; +} + +/* menu links */ +.menu-transparent ul li a:link, .menu-transparent ul li a:visited { color: #fff } +.menu-transparent ul li a:hover, .menu-transparent ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-transparent ul li a.btn-cta:link, +.menu-transparent ul li a.btn-cta:visited { + background-color: transparent; + color: #fff; + border-color:#fff; +} + +.menu-transparent ul li a.btn-cta:hover, +.menu-transparent ul li a.btn-cta:active { + background-color: #fff; + color: #0f2456; + border-color:#0f2456 +} + +/* on mobiles only - various content */ +.menu-transparent.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-transparent.flyout-menu h4, +.menu-transparent.flyout-menu h5, +.menu-transparent.flyout-menu h5 a, +.menu-transparent.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-transparent .item-icon .bar1, +.menu-transparent .item-icon .bar2, +.menu-transparent .item-icon .bar3 { background-color: #fff } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-transparent.flyout-menu h5 a:link, +.menu-transparent.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-transparent.flyout-menu h5 a:hover, +.menu-transparent.flyout-menu h5 a:active { + border-bottom-color:#0f2456; +} + +/* profile image border colour */ +.menu-transparent.flyout-menu.flyout-menu-is-open div.fly-out-profile-box img { border-color: #0f2456 } + +/* contact icons */ +.menu-transparent.flyout-menu .fly-out-social-icons a i { color:#fff } + +/* === End transparent background menu === */ \ No newline at end of file diff --git a/personal/personal-4/assets/css/resets.css b/personal/personal-4/assets/css/resets.css new file mode 100644 index 0000000..10eced0 --- /dev/null +++ b/personal/personal-4/assets/css/resets.css @@ -0,0 +1,24 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + background-color:#fdf8f4; + color: #0c1d37; +} + diff --git a/personal/personal-4/assets/img/hero-contact-background.jpg b/personal/personal-4/assets/img/hero-contact-background.jpg new file mode 100644 index 0000000..00d9ee1 Binary files /dev/null and b/personal/personal-4/assets/img/hero-contact-background.jpg differ diff --git a/personal/personal-4/assets/img/hero-home-background.jpg b/personal/personal-4/assets/img/hero-home-background.jpg new file mode 100644 index 0000000..950deb4 Binary files /dev/null and b/personal/personal-4/assets/img/hero-home-background.jpg differ diff --git a/personal/personal-4/assets/img/hero-portfolio-background.jpg b/personal/personal-4/assets/img/hero-portfolio-background.jpg new file mode 100644 index 0000000..ef61135 Binary files /dev/null and b/personal/personal-4/assets/img/hero-portfolio-background.jpg differ diff --git a/personal/personal-4/assets/img/profile-pic.jpg b/personal/personal-4/assets/img/profile-pic.jpg new file mode 100644 index 0000000..cd04eaa Binary files /dev/null and b/personal/personal-4/assets/img/profile-pic.jpg differ diff --git a/personal/personal-4/assets/img/project-ireland.jpg b/personal/personal-4/assets/img/project-ireland.jpg new file mode 100644 index 0000000..2379516 Binary files /dev/null and b/personal/personal-4/assets/img/project-ireland.jpg differ diff --git a/personal/personal-4/assets/img/project-smoothie.jpg b/personal/personal-4/assets/img/project-smoothie.jpg new file mode 100644 index 0000000..b0d0a5a Binary files /dev/null and b/personal/personal-4/assets/img/project-smoothie.jpg differ diff --git a/personal/personal-4/assets/img/project-van-gogh.png b/personal/personal-4/assets/img/project-van-gogh.png new file mode 100644 index 0000000..2a31ac4 Binary files /dev/null and b/personal/personal-4/assets/img/project-van-gogh.png differ diff --git a/personal/personal-4/assets/img/website-logo.png b/personal/personal-4/assets/img/website-logo.png new file mode 100644 index 0000000..cf6abde Binary files /dev/null and b/personal/personal-4/assets/img/website-logo.png differ diff --git a/personal/personal-4/assets/js/menus.js b/personal/personal-4/assets/js/menus.js new file mode 100644 index 0000000..09ea0fa --- /dev/null +++ b/personal/personal-4/assets/js/menus.js @@ -0,0 +1,70 @@ + + // Code to detect click of option within fly-out menu + let specifiedElement = document.querySelector('.flyout-menu'); + document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } + }); + + // Code to show/hide fly-out mobile menu --> + document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) + const pageContainer = document.querySelector('.page-container'); + + function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } + } + + // Code for menus with transparent background + window.onscroll = function() {swapMenuStyle()}; + const headerDesktop = document.querySelector('.container-menu-desktop'); + const headerMobile = document.querySelector('.container-menu-bar-mobile'); + + const stickyDesktop = headerDesktop.offsetTop +300; + const stickyMobile = headerDesktop.offsetTop +300; + + function swapMenuStyle() { + if (window.pageYOffset > stickyDesktop) { + headerDesktop.classList.add("menu-light","menu-drop-shadow"); + headerDesktop.classList.remove("menu-transparent"); + headerMobile.classList.add("menu-light","menu-drop-shadow"); + headerMobile.classList.remove("menu-transparent"); + + } else { + headerDesktop.classList.add("menu-transparent"); + headerDesktop.classList.remove("menu-light","menu-drop-shadow"); + headerMobile.classList.add("menu-transparent"); + headerMobile.classList.remove("menu-light","menu-drop-shadow"); + } + } diff --git a/personal/personal-4/contact/index.html b/personal/personal-4/contact/index.html new file mode 100644 index 0000000..32d7ae9 --- /dev/null +++ b/personal/personal-4/contact/index.html @@ -0,0 +1,209 @@ + + + + + + + + Contact | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + +
+
+

Mary Smith

+

Let’s work together

+
+ Portfolio +
+
+
+ sample background image +
+
+
+ + + + +
+

Get in touch

+

Use the form below to let me know a little more about your objectives and I'll get back to you.

+ + +
+ + + +
+
+ + +
+ +
+ +
+
+ + +
+ +
+ +
+
+ + + + +
+ + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/personal/personal-4/index.html b/personal/personal-4/index.html new file mode 100644 index 0000000..28d6450 --- /dev/null +++ b/personal/personal-4/index.html @@ -0,0 +1,203 @@ + + + + + + + + Aurelien Rebourg Web Designer + + + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Aurelien Rebourg, web designer, Dublin +

Hi, I'm Aurelien Rebourg, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
aurelien.rebourg@gmail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + +
+
+

Aurelien Rebourg

+

Front-end Developer

+
+ Portfolio + Contact +
+
+
+ sample background image +
+
+
+ + + + +
+
+

Recent projects

+

Below you can see some examples of my recent work. Check out my complete portfolio.

+ +

Have a project you'd like to discuss? Let's make something great together!

+
+
+ + + + +
+ +
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + + + + + \ No newline at end of file diff --git a/personal/personal-4/portfolio/index.html b/personal/personal-4/portfolio/index.html new file mode 100644 index 0000000..52f305d --- /dev/null +++ b/personal/personal-4/portfolio/index.html @@ -0,0 +1,204 @@ + + + + + + + + Portfolio | Mary Smith Web Designer + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Mary Smith, web designer, Dublin +

Hi, I'm Mary Smith, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
marysmith@myemail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + +
+
+

Mary Smith

+

Portfolio

+
+ Contact +
+
+
+ sample background image +
+
+
+ + + + + +
+
+

I have been busy

+

Below you can see a selection of my web design and development work.

+ +

Have a project you'd like to discuss? Let's make something great together!

+
+
+ + + +
+ +
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ + +
+ + + + + + + + + + \ No newline at end of file diff --git a/portfolio/index.html b/portfolio/index.html new file mode 100644 index 0000000..95758b9 --- /dev/null +++ b/portfolio/index.html @@ -0,0 +1,193 @@ + + + + + + + + Portfolio | Aurelien Rebourg Web Designer + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + + +
+ + + + +
+ + website logo + +
+
+
+
+
+
+ + + +
+ + +
+

About Me

+
+ Aurelien Rebourg, web designer, Dublin +

Hi, I'm Aurelien Rebourg, a web and digital designer based in Dublin, Ireland.

+
+ +

Contact

+

Have a project you'd like to discuss? Let's make something great together!

+ +
aurelien.rebourg@gmail.com
+ +

Social Links

+
+ + + + + +
+

 

+

 

+

 

+
+ + + +
+
+

Welcome to my work

+

I use HTML and CSS with graphic design and animation to bring your ideas to life.

+
+ Contact +
+
+
+ hero image +
+
+ + +
+
+

Web Development Projects

+

Below you can see some examples of my work from my web development and design porfolio.

+
+
+ +
+
+ Project: Ireland Tourism +

All my exercises

+

Here you can find all my exercises done.

+ View Project   +
+
+ Project: Vincent Van Gogh +

Vincent Van Gogh

+

Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.

+ View Project   +
+ +
+ Project: Smooth Smoothies +

Smooth Smoothies

+

Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.

+ View Project   +
+ +
+ Project: Ireland Tourism +

Ireland's Attractions

+

On-page navigation with a looped background video that includes a tinted overlay.

+ View Project   +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/portfolio/ireland/assets/css/footer.css b/portfolio/ireland/assets/css/footer.css new file mode 100644 index 0000000..401e9ab --- /dev/null +++ b/portfolio/ireland/assets/css/footer.css @@ -0,0 +1,135 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#fff; + background-color:#2c3e50; +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #fff } + +/* Footer headings */ +footer h4 { + font-family: serif; + font-weight: normal; + font-style: italic; + font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: sans-serif; + font-weight: normal; + font-style: italic; + color: #ecf0f1; + margin: 0 auto 36px auto; + font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #fff +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #fff +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #fff +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#fff; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #fff +} \ No newline at end of file diff --git a/portfolio/ireland/assets/css/header.css b/portfolio/ireland/assets/css/header.css new file mode 100644 index 0000000..38b28c9 --- /dev/null +++ b/portfolio/ireland/assets/css/header.css @@ -0,0 +1,168 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: sans-serif; +} + +.hero-block { + margin-top: 72px; + position: relative; + min-height: 400px; + display: flex; + flex-direction: column; + justify-content: center; + background-color: gray; + overflow: hidden +} + +@media (min-width: 768px) { + .hero-block { height: 80vh } +} + +.hero-text-container { padding: 0 12% 4% 12%; z-index: 2 } + +.hero-bg-media { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + z-index: 0; +} + +.hero-bg-media * { + object-fit: cover; width: 100%; height: 100%; +} + +.bg-overlay { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + z-index: 1; + background-image: linear-gradient(rgba(29,38,113,0.7),rgba(195,55,100,0.3)); +} + +.hero-block h1, .hero-block h2 { + line-height: 1.2; + color:#fff; + text-shadow: 2px 2px #222; +} + +.hero-block h1 { + font-size: calc(56px + (112 - 56) * ((100vw - 320px) / (1600 - 320))); + margin-bottom: 24px; +} + +.hero-block h2 { + font-weight: normal; + font-size: calc(32px + (54 - 32) * ((100vw - 320px) / (1600 - 320))); + text-transform: uppercase; +} + + + +/* ---------------------------------------------- + * Generated by Animista on 2020-7-30 7:28:59 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation slide-in-top + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + } + @keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +.slide-in-top { + -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + + +.slide-in-left { + -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +/* ---------------------------------------------- + * Generated by Animista on 2020-7-29 19:38:33 + * Licensed under FreeBSD License. + * See http://animista.net/license for more info. + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ + +/** + * ---------------------------------------- + * animation slide-in-left + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + } + @keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} + + +/* ================ UTILITY CLASSES ============= */ +.text-center { text-align: center } + + + + diff --git a/portfolio/ireland/assets/css/ireland.css b/portfolio/ireland/assets/css/ireland.css new file mode 100644 index 0000000..f02e1f1 --- /dev/null +++ b/portfolio/ireland/assets/css/ireland.css @@ -0,0 +1,63 @@ + +/* Desktops */ +@media (min-width: 768px) { main { padding: 4% 20% } } + +/* Mobiles */ +@media (max-width: 767px) { main { padding: 12% 8% } } + +body {background-color: #c2ffc2 } + +main h1, main h2, main h2 { color: #008000; letter-spacing: -2px; } + +/* Main heading */ +main h1 { + font-family: 'Oswald', sans-serif; + font-weight: bold; + font-size: calc(38px + (64 - 38) * ((100vw - 320px) /(1600 - 320))); + line-height: 1.1; + margin-bottom: 30px; +} + +/* Small headings */ +main h2 { + font-family: 'Oswald', sans-serif; + font-weight: bold; + font-size: calc(28px + (54 - 28) * ((100vw - 320px) /(1600 - 320))); + line-height: 1.3; + margin-top: 42px; + margin-bottom: 4px; + letter-spacing: 0.5px; +} + +/* Text paragraphs */ +main p { + font-family: 'Lato', sans-serif; + font-size: calc(17px + (22 - 17) * ((100vw - 320px) /(1600 - 320))); + color: #011301; + line-height: 1.6; + margin-bottom: 20px; +} + + +/* Images */ +main img { + margin-bottom: 32px; + /* Soften corners of images */ + border-radius: 15px; +} + +/* Passive link styles */ +main a:link, main a:visited { + text-decoration: none; + padding-bottom: 2px; + color: #006600; + border-bottom: solid 2px #006600; +} + +/* Interactive link styles */ +main a:hover, main a:focus, a:active { + text-decoration: none; + padding-bottom: 2px; + color: #222; + border-bottom: solid 2px #222; +} diff --git a/portfolio/ireland/assets/css/menus.css b/portfolio/ireland/assets/css/menus.css new file mode 100644 index 0000000..ddad731 --- /dev/null +++ b/portfolio/ireland/assets/css/menus.css @@ -0,0 +1,474 @@ + +.unhide-content-under-menu { padding-top: 72px } + +/* === ALL SCREEN SIZES ====== */ + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { + width: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";} + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-transparent, + .container-menu-desktop.menu-light, + .container-menu-desktop.menu-dark { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-transparent, + .container-menu-bar-mobile.menu-light, + .container-menu-bar-mobile.menu-dark, + .flyout-menu.menu-transparent, + .flyout-menu.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* prevents content from disappearing udner sticky menus */ +.sticky-anchor { + position: relative; + border-top: 90px solid transparent; + margin: -90px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } + + .sticky-anchor:before { + content: ""; + position: absolute; + top: -2px; + left: 0; + right: 0; + } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically cente#5ba745 in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; + /* soften corners */ + /* border-radius: 4px; */ + /* rounded corners */ + border-radius: 100px +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 40px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320))); + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 4px 20px 7px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu { + box-shadow: 0px 1px 10px #888 +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu div.fly-out-profile-box, +.flyout-menu div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu div.fly-out-profile-box img, +.flyout-menu div.fly-out-profile-box p { width: 47% } + +.flyout-menu div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ========= Light background menu - desktops and mobiles ========= */ + +/* background colour */ +.menu-light { + background-color: #fff; + transition: all .5s ease-in-out; +} + +/* menu links */ +.menu-light ul li a:link, .menu-light ul li a:visited { color: #5ba745 } +.menu-light ul li a:hover, .menu-light ul li a:active { color: #222 } + +/* cta button */ +.menu-light ul li a.btn-cta:link, +.menu-light ul li a.btn-cta:visited { + background-color: transparent; + color: #5ba745; + border-color:#5ba745 +} + +.menu-light ul li a.btn-cta:hover, +.menu-light ul li a.btn-cta:active { + background-color: #5ba745; + color: #fff; + border-color:#5ba745 +} + +/* on mobiles only */ +.menu-light.flyout-menu hr { background-color: #5ba745; border-color: #5ba745 } + +.menu-light.flyout-menu h4, +.menu-light.flyout-menu h5, +.menu-light.flyout-menu h5 a, +.menu-light.flyout-menu p { color: #5ba745 } + +/* colour of hamburger icon bars */ +.menu-light .item-icon .bar1, +.menu-light .item-icon .bar2, +.menu-light .item-icon .bar3 { background-color: #5ba745 } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #5ba745 } + +/* email link */ +.menu-light.flyout-menu h5 a:link, +.menu-light.flyout-menu h5 a:visited { + border-bottom-color:#5ba745; +} + +.menu-light.flyout-menu h5 a:hover, +.menu-light.flyout-menu h5 a:active { + border-bottom-color: #fff; +} + +/* profile image border colour */ +.menu-light.flyout-menu div.fly-out-profile-box img { border-color: #5ba745 } + +/* contact icons */ +.menu-light.flyout-menu .fly-out-social-icons a i { color:#5ba745 } + +/* === End light background menu === */ + + + +/* ======= Dark background menu - desktops and mobiles ======= */ + +/* background colour */ +.menu-dark { + background-color: #5ba745; + transition: all .5s ease-in-out +} + +/* menu links */ +.menu-dark ul li a:link, .menu-dark ul li a:visited { color: #fff } +.menu-dark ul li a:hover, .menu-dark ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-dark ul li a.btn-cta:link, +.menu-dark ul li a.btn-cta:visited { + background-color: #5ba745; + color: #fff; + border-color:#fff +} + +.menu-dark ul li a.btn-cta:hover, +.menu-dark ul li a.btn-cta:active { + background-color: #fff; + color: #5ba745; + border-color:#fff +} + +/* on mobiles only - various content */ +.menu-dark.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-dark.flyout-menu h4, +.menu-dark.flyout-menu h5, +.menu-dark.flyout-menu h5 a, +.menu-dark.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-dark .item-icon .bar1, +.menu-dark .item-icon .bar2, +.menu-dark .item-icon .bar3 { background-color: #fff } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-dark.flyout-menu h5 a:link, +.menu-dark.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-dark.flyout-menu h5 a:hover, +.menu-dark.flyout-menu h5 a:active { + border-bottom-color: #5ba745; +} + +/* profile image border colour */ +.menu-dark.flyout-menu div.fly-out-profile-box img { border-color: #5ba745 } + +/* contact icons */ +.menu-dark.flyout-menu .fly-out-social-icons a i { color:#fff } + +/* === End dark background menu === */ + + + +/* ======== Transparent background menu - desktops and mobiles =========== */ + +/* background colour */ +.menu-transparent { + background-color: transparent; + transition: all .5s ease-in-out; +} + +/* menu links */ +.menu-transparent ul li a:link, .menu-transparent ul li a:visited { color: #fff } +.menu-transparent ul li a:hover, .menu-transparent ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-transparent ul li a.btn-cta:link, +.menu-transparent ul li a.btn-cta:visited { + background-color: #5ba745; + color: #fff; + border-color:#5ba745; +} + +.menu-transparent ul li a.btn-cta:hover, +.menu-transparent ul li a.btn-cta:active { + background-color: #fff; + color: #5ba745; + border-color:#5ba745 +} + +/* on mobiles only - various content */ +.menu-transparent.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-transparent.flyout-menu h4, +.menu-transparent.flyout-menu h5, +.menu-transparent.flyout-menu h5 a, +.menu-transparent.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-transparent .item-icon .bar1, +.menu-transparent .item-icon .bar2, +.menu-transparent .item-icon .bar3 { background-color: #5ba745 } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-transparent.flyout-menu h5 a:link, +.menu-transparent.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-transparent.flyout-menu h5 a:hover, +.menu-transparent.flyout-menu h5 a:active { + border-bottom-color: #5ba745; +} + +/* profile image border colour */ +.menu-transparent.flyout-menu div.fly-out-profile-box img { border-color: #5ba745 } + +/* contact icons */ +.menu-transparent.flyout-menu .fly-out-social-icons a i { color:#fff } + +/* === End transparent background menu === */ + + +/* ***************************************************************** +================END OF MENU STYLES TO COPY AND PASTE =============== +****************************************************************** */ + + +/* ==== PAGE CONTAINER ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .main-content { padding: 8% 20% 5% 20% } +} +/* Mobiles */ + @media all and (max-width:767px) { + .main-content { padding: 18% 7% 10% 7% } +} +/* Paragraphs in page container */ +.main-content p { + font-weight: normal; line-height: 1.5; margin-bottom:14px; color: #4f5959; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} diff --git a/portfolio/ireland/assets/css/resets.css b/portfolio/ireland/assets/css/resets.css new file mode 100644 index 0000000..11f123f --- /dev/null +++ b/portfolio/ireland/assets/css/resets.css @@ -0,0 +1,24 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +/* h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } */ +p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} \ No newline at end of file diff --git a/portfolio/ireland/assets/img/book-of-kells.jpg b/portfolio/ireland/assets/img/book-of-kells.jpg new file mode 100644 index 0000000..ddfe0e7 Binary files /dev/null and b/portfolio/ireland/assets/img/book-of-kells.jpg differ diff --git a/portfolio/ireland/assets/img/cliffs-of-moher.jpg b/portfolio/ireland/assets/img/cliffs-of-moher.jpg new file mode 100644 index 0000000..770d3af Binary files /dev/null and b/portfolio/ireland/assets/img/cliffs-of-moher.jpg differ diff --git a/portfolio/ireland/assets/img/dublin-zoo.jpg b/portfolio/ireland/assets/img/dublin-zoo.jpg new file mode 100644 index 0000000..4a3a377 Binary files /dev/null and b/portfolio/ireland/assets/img/dublin-zoo.jpg differ diff --git a/portfolio/ireland/assets/img/guinness-storehouse.jpg b/portfolio/ireland/assets/img/guinness-storehouse.jpg new file mode 100644 index 0000000..32d61d3 Binary files /dev/null and b/portfolio/ireland/assets/img/guinness-storehouse.jpg differ diff --git a/portfolio/ireland/assets/img/national-aquatic-centre.jpg b/portfolio/ireland/assets/img/national-aquatic-centre.jpg new file mode 100644 index 0000000..661c299 Binary files /dev/null and b/portfolio/ireland/assets/img/national-aquatic-centre.jpg differ diff --git a/portfolio/ireland/assets/js/menus.js b/portfolio/ireland/assets/js/menus.js new file mode 100644 index 0000000..96f861f --- /dev/null +++ b/portfolio/ireland/assets/js/menus.js @@ -0,0 +1,46 @@ + // Code to detect click of option within fly-out menu + let specifiedElement = document.querySelector('.flyout-menu'); + document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } + }); + + // Code to show/hide fly-out mobile menu --> + document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) + const pageContainer = document.querySelector('.page-container'); + + function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } + } diff --git a/portfolio/ireland/assets/video/bg.mp4 b/portfolio/ireland/assets/video/bg.mp4 new file mode 100644 index 0000000..1924a09 Binary files /dev/null and b/portfolio/ireland/assets/video/bg.mp4 differ diff --git a/portfolio/ireland/assets/video/ireland.jpg b/portfolio/ireland/assets/video/ireland.jpg new file mode 100644 index 0000000..6f9921f Binary files /dev/null and b/portfolio/ireland/assets/video/ireland.jpg differ diff --git a/portfolio/ireland/index.html b/portfolio/ireland/index.html new file mode 100644 index 0000000..74620ce --- /dev/null +++ b/portfolio/ireland/index.html @@ -0,0 +1,218 @@ + + + + + + + + Ireland's Top Five Visitor Attractions | Portfolio Project | Aurelien Rebourg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + +
+
+
+
+
+
+ + + + + + + +
+ +
+

Ireland

+

Where our lovely visitors love to go

+
+ +
+ +
+ +
+ +
+ + +
+

Ireland's Top Five Visitor Attractions

+ + +

1: Guinness Storehouse, Dublin

+

2: Cliffs of Moher, Co. Clare

+

3: Dublin Zoo

+

4: National Aquatic Centre, Dublin

+

5: Book of Kells Exhibition, Trinity College, Dublin

+ + +

Visiting Ireland is like taking a great big breath of fresh air. Our welcoming country boasts Europe's largest green space to the longest defined coastal touring route in the world, Ireland is a country brimming with fun and fascinating ways for visitors to spend their days and nights. You'll discover just the right mountain to climb, painting to pore over, sports team to cheer on, or whatever else takes your fancy.

+ +

What are Ireland's most popular tourist attractions? According to a July 2019 report by the Irish Tourist Board, the top five paid visitor attractions are those listed below.

+ + +

Guinness Storehouse, Dublin

+ + Guinness Storehouse + +

Located at St. James's Gate Brewery, the Guinness Storehouse is the home of the Black Stuff, the heart of Dublin and an unforgettable element of any Irish adventure. An exciting visitor experience begins at the bottom of the world's largest pint glass, where you will learn the story of the beer's four ingredients: water, barley, hops and yeast. Your journey continues up through seven floors filled with interactive experiences that fuse Guinness' long brewing heritage with Ireland's rich history. At the top, you'll be rewarded with a pint of perfection in our world-famous rooftop Gravity Bar. Now that's our kind of higher education!

+ + + +

Annual Number of Visitors:  1,711,281

+ + +

Cliffs of Moher, Co. Clare

+ + Cliffs of Moher + +

You simply cannot travel to Ireland without paying a visit to the breathtaking Cliffs of Moher, situated in County Clare along the Wild Atlantic Way. The Cliffs of Moher have majestically faced the Atlantic for over 350 million years and their beauty is incomparable. The Cliffs are an area of outstanding natural beauty that is recognised as a UNESCO Global Geopark. Also, they are a haven for wildlife. Over 30,000 breeding bird pairs make the Cliffs their home annually, among them guillemots, razorbills, kittiwakes, peregrine falcons and the ever-popular cute puffins.

+ +

Annual Number of Visitors:  1,527,000

+ + +

Dublin Zoo

+ + Dublin Zoo + +

Established in 1830, Dublin Zoo works in partnership with zoos worldwide to make a significant contribution to the conservation of the endangered species on Earth. Located in Dublin's Phoenix Park and covering over 28 hectares, the Zoo is divided into the following areas: Asian Forests, Orangutan Forest, The Kaziranga Forest Trail, Fringes of the Arctic, Sea Lion Cove, African Plains, Roberts House, House of Reptiles, City Farm and South American House. Home to some 400 animals in a safe environment, Dublin Zoo is where education and conservation combine for an exciting and stimulating day out for all the family.

+ +

Annual Number of Visitors:  1,264,300

+ + +

National Aquatic Centre, Dublin

+ + National Aquatic Centre + +

Located in the Dublin suburb of Blanchardstown, Dublin, the National Aquatic Centre is Ireland's largest and most popular Water Park. The 2,500-capacity venue has won numerous major awards, including Best Leisure Facility in Ireland. It has hosted pre-Olympic training camps for teams from 16 different countries and 190 athletes, among them eventual Water Polo Champions, Croatia, and the Synchronised Swimming Team from the USA.

+ +

Annual Number of Visitors:  1,099,756

+ + +

Book of Kells Exhibition, Trinity College, Dublin

+ + Book of Kells + +

Based at Trinity College in the heart of Dublin city, the Book of Kells Exhibition is a must-see on the itinerary of all visitors to Ireland. It showcases the nation's greatest cultural treasure and the world's most famous medieval manuscript: the Book of Kells, a 9th-century manuscript that documents the four Gospels of the life of Jesus Christ. The Exhibition also features access to the Long Room, a magnificent and beautiful library, that houses 200,000 of Trinity College's oldest books.

+ +

Annual Number of Visitors:  983,410

+ +

Return to top of page

+ +
+ + + + + + + + + diff --git a/portfolio/smoothies/assets/css/footer.css b/portfolio/smoothies/assets/css/footer.css new file mode 100644 index 0000000..401e9ab --- /dev/null +++ b/portfolio/smoothies/assets/css/footer.css @@ -0,0 +1,135 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#fff; + background-color:#2c3e50; +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #fff } + +/* Footer headings */ +footer h4 { + font-family: serif; + font-weight: normal; + font-style: italic; + font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: sans-serif; + font-weight: normal; + font-style: italic; + color: #ecf0f1; + margin: 0 auto 36px auto; + font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #fff +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #fff +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #fff +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#fff; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #fff +} \ No newline at end of file diff --git a/portfolio/smoothies/assets/css/header.css b/portfolio/smoothies/assets/css/header.css new file mode 100644 index 0000000..20f28f1 --- /dev/null +++ b/portfolio/smoothies/assets/css/header.css @@ -0,0 +1,154 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: sans-serif; +} + + +/* Horizontal spacing: Desktops */ +@media (min-width: 768px) { .hero-text-container { padding: 0 7% 3% 7% } } + +/* Horizontal spacing: Mobiles */ +@media (max-width: 767px) { .hero-text-container { padding: 0 12% 5% 12% } } + +.hero-block { + min-height: 540px; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + background-color: gray; + overflow: none; +} + +@media (min-width: 768px) { + .hero-block { height: 80vh } +} + +.hero-text-container { padding: 0 12% 4% 12%; z-index: 2 } + +.hero-bg-media { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + z-index: 0; +} + +.hero-bg-media img { + object-fit: cover; width: 100%; height: 100%; +} + +.bg-overlay { + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + z-index: 1; + background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.2)); +} + +.hero-block h1, .hero-block h2 { + line-height: 1.2; + color:#fff; + text-shadow: 2px 2px #222; +} + +.hero-block h1 { + font-size: calc(58px + (132 - 58) * ((100vw - 320px) / (1600 - 320))); + margin-bottom: 24px; +} + +.hero-block h2 { + font-weight: normal; + font-size: calc(26px + (64 - 26) * ((100vw - 320px) / (1600 - 320))); + text-transform: uppercase; +} + +/** + * ---------------------------------------- + * animation slide-in-top + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + } + @keyframes slide-in-top { + 0% { + -webkit-transform: translateY(-1000px); + transform: translateY(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } +} + +.slide-in-top { + -webkit-animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + + +.slide-in-left { + -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; + animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +/** + * ---------------------------------------- + * animation slide-in-left + * ---------------------------------------- + */ + @-webkit-keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } + } + @keyframes slide-in-left { + 0% { + -webkit-transform: translateX(-1000px); + transform: translateX(-1000px); + opacity: 0; + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + opacity: 1; + } +} + + +/* ================ UTILITY CLASSES ============= */ +.text-center { text-align: center } \ No newline at end of file diff --git a/portfolio/smoothies/assets/css/menus.css b/portfolio/smoothies/assets/css/menus.css new file mode 100644 index 0000000..f045783 --- /dev/null +++ b/portfolio/smoothies/assets/css/menus.css @@ -0,0 +1,475 @@ + +.unhide-content-under-menu { padding-top: 72px } + +/* === ALL SCREEN SIZES ====== */ + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { + width: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";} + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-transparent, + .container-menu-desktop.menu-light, + .container-menu-desktop.menu-dark { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-transparent, + .container-menu-bar-mobile.menu-light, + .container-menu-bar-mobile.menu-dark, + .flyout-menu.menu-transparent, + .flyout-menu.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* prevents content from disappearing udner sticky menus */ +.sticky-anchor { + position: relative; + border-top: 90px solid transparent; + margin: -90px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } + + .sticky-anchor:before { + content: ""; + position: absolute; + top: -2px; + left: 0; + right: 0; + } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically cente#5ba745 in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; + /* soften corners */ + /* border-radius: 4px; */ + /* rounded corners */ + border-radius: 100px +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 40px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320))); + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 4px 20px 7px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu { + box-shadow: 0px 1px 10px #888 +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu div.fly-out-profile-box, +.flyout-menu div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu div.fly-out-profile-box img, +.flyout-menu div.fly-out-profile-box p { width: 47% } + +.flyout-menu div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ========= Light background menu - desktops and mobiles ========= */ + +/* background colour */ +.menu-light { + background-color: #fff; + transition: all .5s ease-in-out; +} + +/* menu links */ +.menu-light ul li a:link, .menu-light ul li a:visited { color: #d1274b; } +.menu-light ul li a:hover, .menu-light ul li a:active { color: #222 } + +/* cta button */ +.menu-light ul li a.btn-cta:link, +.menu-light ul li a.btn-cta:visited { + + background-color: transparent; + color: #d1274b; + border-color: #d1274b; +} + +.menu-light ul li a.btn-cta:hover, +.menu-light ul li a.btn-cta:active { + background-color: #d1274b; + color: #fff; + border-color:#d1274b; +} + +/* on mobiles only */ +.menu-light.flyout-menu hr { background-color: #d1274b;; border-color: #d1274b; } + +.menu-light.flyout-menu h4, +.menu-light.flyout-menu h5, +.menu-light.flyout-menu h5 a, +.menu-light.flyout-menu p { color: #d1274b; } + +/* colour of hamburger icon bars */ +.menu-light .item-icon .bar1, +.menu-light .item-icon .bar2, +.menu-light .item-icon .bar3 { background-color: #d1274b; } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #d1274b; } + +/* email link */ +.menu-light.flyout-menu h5 a:link, +.menu-light.flyout-menu h5 a:visited { + border-bottom-color:#d1274b;; +} + +.menu-light.flyout-menu h5 a:hover, +.menu-light.flyout-menu h5 a:active { + border-bottom-color: #fff; +} + +/* profile image border colour */ +.menu-light.flyout-menu div.fly-out-profile-box img { border-color: #d1274b; } + +/* contact icons */ +.menu-light.flyout-menu .fly-out-social-icons a i { color:#d1274b; } + +/* === End light background menu === */ + + + +/* ======= Dark background menu - desktops and mobiles ======= */ + +/* background colour */ +.menu-dark { + background-color: #d1274b;; + transition: all .5s ease-in-out +} + +/* menu links */ +.menu-dark ul li a:link, .menu-dark ul li a:visited { color: #fff } +.menu-dark ul li a:hover, .menu-dark ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-dark ul li a.btn-cta:link, +.menu-dark ul li a.btn-cta:visited { + background-color: #d1274b;; + color: #fff; + border-color:#fff +} + +.menu-dark ul li a.btn-cta:hover, +.menu-dark ul li a.btn-cta:active { + background-color: #fff; + color: #5ba745; + border-color:#fff +} + +/* on mobiles only - various content */ +.menu-dark.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-dark.flyout-menu h4, +.menu-dark.flyout-menu h5, +.menu-dark.flyout-menu h5 a, +.menu-dark.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-dark .item-icon .bar1, +.menu-dark .item-icon .bar2, +.menu-dark .item-icon .bar3 { background-color: #fff } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-dark.flyout-menu h5 a:link, +.menu-dark.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-dark.flyout-menu h5 a:hover, +.menu-dark.flyout-menu h5 a:active { + border-bottom-color: #d1274b; +} + +/* profile image border colour */ +.menu-dark.flyout-menu div.fly-out-profile-box img { border-color: #d1274b; } + +/* contact icons */ +.menu-dark.flyout-menu .fly-out-social-icons a i { color:#fff } + +/* === End dark background menu === */ + + + +/* ======== Transparent background menu - desktops and mobiles =========== */ + +/* background colour */ +.menu-transparent { + background-color: transparent; + transition: all .5s ease-in-out; +} + +/* menu links */ +.menu-transparent ul li a:link, .menu-transparent ul li a:visited { color: #fff } +.menu-transparent ul li a:hover, .menu-transparent ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-transparent ul li a.btn-cta:link, +.menu-transparent ul li a.btn-cta:visited { + background-color: #d1274b;; + color: #fff; + border-color:#d1274b;; +} + +.menu-transparent ul li a.btn-cta:hover, +.menu-transparent ul li a.btn-cta:active { + background-color: #fff; + color: #d1274b; + border-color:#d1274b; +} + +/* on mobiles only - various content */ +.menu-transparent.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-transparent.flyout-menu h4, +.menu-transparent.flyout-menu h5, +.menu-transparent.flyout-menu h5 a, +.menu-transparent.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-transparent .item-icon .bar1, +.menu-transparent .item-icon .bar2, +.menu-transparent .item-icon .bar3 { background-color: #d1274b; } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-transparent.flyout-menu h5 a:link, +.menu-transparent.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-transparent.flyout-menu h5 a:hover, +.menu-transparent.flyout-menu h5 a:active { + border-bottom-color: #d1274b; +} + +/* profile image border colour */ +.menu-transparent.flyout-menu div.fly-out-profile-box img { border-color: #d1274b; } + +/* contact icons */ +.menu-transparent.flyout-menu .fly-out-social-icons a i { color:#fff } + +/* === End transparent background menu === */ + + +/* ***************************************************************** +================END OF MENU STYLES TO COPY AND PASTE =============== +****************************************************************** */ + + +/* ==== PAGE CONTAINER ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .main-content { padding: 8% 20% 5% 20% } +} +/* Mobiles */ + @media all and (max-width:767px) { + .main-content { padding: 18% 7% 10% 7% } +} +/* Paragraphs in page container */ +.main-content p { + font-weight: normal; line-height: 1.5; margin-bottom:14px; color: #4f5959; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} diff --git a/portfolio/smoothies/assets/css/resets.css b/portfolio/smoothies/assets/css/resets.css new file mode 100644 index 0000000..11f123f --- /dev/null +++ b/portfolio/smoothies/assets/css/resets.css @@ -0,0 +1,24 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +/* h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } */ +p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} \ No newline at end of file diff --git a/portfolio/smoothies/assets/css/smoothies.css b/portfolio/smoothies/assets/css/smoothies.css new file mode 100644 index 0000000..78e8985 --- /dev/null +++ b/portfolio/smoothies/assets/css/smoothies.css @@ -0,0 +1,315 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none; box-sizing: border-box } +html { height: 100% } +body { min-height: 100%; max-width: 1600px; margin-left: auto; margin-right: auto } +img { width: 100%; height: auto; display: block } + +/* =================== FONT ================= */ + +body { font-family: 'Neucha', sans-serif } + +/* ============== SECTION BLOCK CONTAINERS ============= */ + +/* Desktops */ +@media all and (min-width:768px) { + .container-block { padding: 4% 12% 4% 12% } +} + +/* Mobiles */ +@media all and (max-width:767px) { + .container-block { padding: 12% 8% 12% 8% } +} + +/* Section background colors */ +.container-block.bg-watermelon { background-color: #FBBDD9 } +.container-block.bg-apple { background-color: #B7F3D9 } +.container-block.bg-blueberry { background-color: #8C6BBE } +.container-block.bg-lemon { background-color: #F1F1BC } + +/* ============== INTRODUCTION TEXT ============ */ + +.container-block h2 { + font-size: calc(26px + (54 - 26) * ((100vw - 320px) / (1600 - 320))); + color: #733fc0; + line-height: 1.6; + text-align: center; +} + +/* ==== FLEXBOX: PARENT AND CHILD ELEMENTS ==== */ + +.container-flexbox { + display: flex; + justify-content: space-between; + flex-wrap: wrap +} + +/* Desktops: 2 columns */ +@media all and (min-width:768px) { + .item-col-2 { width: 47% } +} + +/* Mobiles: 1 column */ +@media all and (max-width:767px) { + .item-col-2 { width: 100% } +} + +/* ======= CONTENT INSIDE FLEXBOX CHILD COLUMNS ======= */ + +/* Sub-headings */ +.container-flexbox .item-col-2 h3 { + font-size: calc(32px + (64 - 32) * ((100vw - 320px) / (1600 - 320))); + color: #d1274b; + line-height: 1.2; + letter-spacing: 2px; + margin-bottom: 4px; +} + +/* Text paragraphs */ +.container-flexbox .item-col-2 p { + font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320))); + color: #2F4F4F; + line-height: 1.6; + letter-spacing: 1px; +} + +/* Sub-heading, paragraph text against dark background */ +.container-flexbox.bg-blueberry .item-col-2 h3, +.container-flexbox.bg-blueberry .item-col-2 p { color: #fff } + + +/* Mobiles: center align headings, paragraphs and images within columns */ +@media all and (max-width:767px) { + .container-flexbox .item-col-2 h3, + .container-flexbox .item-col-2 p, + .container-flexbox .item-col-2 img { text-align: center } + /* Also: bottom margin spacing under images */ + .container-flexbox .item-col-2 img { margin-bottom: 14px } +} + +/* Mobiles: Re-order columns inside first and third flexbox parent containers */ +@media all and (max-width:767px) { + .container-flexbox.bg-watermelon .item-col-2:nth-child(1) { order: 2 } + .container-flexbox.bg-watermelon .item-col-2:nth-child(2) { order: 1 } + .container-flexbox.bg-blueberry .item-col-2:nth-child(1) { order: 2 } + .container-flexbox.bg-blueberry .item-col-2:nth-child(2) { order: 1 } +} + +/* =============== BEGIN EMAIL SIGN UP FORM CSS ============= */ + +/* == Email signup form container == */ + +/* All screens */ +.container-form-email-signup { + text-align: center; + background-color: #fff; +} + +/* Desktop */ +@media all and (min-width:1024px) { + .container-form-email-signup { + margin: 4% 23% 5% 23%; + padding: 2% 4% 4% 4% + } +} + +/* Mobiles */ +@media all and (max-width:1023px) { + .container-form-email-signup { + margin: 6% 8% 16% 8%; + padding: 7% 8% 8% 8%; + } +} + +/* == Email sign up form heading and text == */ + +/* Heading */ +.container-form-email-signup h3 { + font-family: 'Neucha', sans-serif; + font-weight: bold; + color: #733fc0; + line-height: 1.2; + margin-bottom: 3%; + font-size: calc(32px + (84 - 32) * ((100vw - 320px) / (1600 - 320))); +} + +/* Text */ +.container-form-email-signup p { + font-family: 'Neucha', sans-serif; + font-weight: normal; + color: #733fc0; + line-height: 1.5; + margin-bottom: 7%; + font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1600 - 320))); +} + +/* == Email sign up form fields == */ + +#email-signup-form .flex-row { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +/* Desktop */ +@media all and (min-width:768px) { + #email-signup-form .flex-row { flex-direction: row } + #email-signup-form #email-address { flex: 1; margin: 0 30px 0 30px } +} + +/* Mobiles */ +@media all and (max-width:767px) { + #email-signup-form .flex-row { flex-direction: column } + #email-signup-form label { margin: 12px 0 0 0 } + #email-signup-form #email-address { margin: 0 } +} + +#email-signup-form label, +#email-signup-form input, +#email-signup-form #btn-submit { + font-size: 16px; + display: inline-block; + border-radius: 5px; +} + +#email-signup-form label { + padding: 14px 0; + font-family: sans-serif; + font-size: 18px +} + +#email-signup-form label, +#email-signup-form #btn-submit { font-weight: bold } + +#email-signup-form input, +#email-signup-form #btn-submit { padding: 12px 20px } + +#email-signup-form ::placeholder { font-size: 96% } + +#email-signup-form input { + background-color: #f0f0f0; + padding: 10px 12px; + border: 2px solid #d1274b; +} + +#email-signup-form input:focus { + background-color: #fff; +} + +#email-signup-form #btn-submit { + color: #fff; + border: none; + padding: 12px 22px; + background-color: #d1274b; + border-radius: 50px; + } + + #email-signup-form #btn-submit:focus, + #email-signup-form #btn-submit:hover { + background-color: #733fc0; + } + +#email-signup-form #btn-submit i { + margin-left: 8px +} + +/* Mobiles */ +@media all and (max-width:767px) { + #email-signup-form label { padding: 0 0 14px 0 } + #email-signup-form input { margin: 0 0 24px 0 } + #email-signup-form #btn-submit { margin: 30px auto 0 auto; width: 80% } +} + +/* =============== END EMAIL SIGN UP FORM CSS ============= */ + +/* == Begin footer CSS == */ + +/* Outer footer parent container */ +.container-footer { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + background-color:#d1274b +} + +/* Desktop footer - inside padding */ +@media all and (min-width:768px) { + .container-footer { padding: 3% 8% 3% 8% } +} + +/* Mobiles footer - inside padding */ +@media all and (max-width:767px) { + .container-footer { padding: 12% 8% 1% 8% } +} + +/* Inner footer columns */ + +/* Desktops - 3 columns */ +@media all and (min-width:768px) { + .container-footer .item-3:nth-child(1) { width: 20% } + .container-footer .item-3:nth-child(2) { + width: 50%; + /* text-align: center */ + } + .container-footer .item-3:nth-child(3) { + width: 20%; + } +} + +/* Mobiles - 1 column */ +@media all and (max-width:767px) { + .container-footer .item-3 { + width: 100%; + margin-bottom: 10% + } + .container-footer .item-3:nth-child(2) { order: 1 } + .container-footer .item-3:nth-child(1) { order: 2 } + .container-footer .item-3:nth-child(3) { order: 3 } +} + +/* Styles for footer background, text, icons and links */ + +.container-footer .item-3 h4, +.container-footer .item-3 p, +.container-footer .item-3 p i, +.container-footer .item-3 p a { + color: #fff +} + +.container-footer .item-3 h4 { + font-weight: bold; + /* text-transform: uppercase */ + margin-bottom: 12px; + font-size: calc(22px + (26 - 22) * ((100vw - 320px)/(1600 - 320))); + letter-spacing: 1px; +} + +.container-footer .item-3 p { + font-weight: normal; + margin-bottom: 12px; + font-size: calc(17px + (22 - 17) * ((100vw - 320px)/(1600 - 320))); + line-height: 1.6; + letter-spacing: 1px; +} + +.container-footer .item-3 i { + padding-right: 32px; +} + +.container-footer .item-3 p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; +} + +.container-footer .item-3 p a:link, +.container-footer .item-3 p a:visited { + border-bottom-color: transparent; +} + +.container-footer .item-3 p a:hover, +.container-footer .item-3 p a:active { + border-bottom-color: #fff +} + +/* == End footer CSS == */ \ No newline at end of file diff --git a/portfolio/smoothies/assets/img/apple.png b/portfolio/smoothies/assets/img/apple.png new file mode 100644 index 0000000..64d0661 Binary files /dev/null and b/portfolio/smoothies/assets/img/apple.png differ diff --git a/portfolio/smoothies/assets/img/bg.jpg b/portfolio/smoothies/assets/img/bg.jpg new file mode 100644 index 0000000..a3e0af2 Binary files /dev/null and b/portfolio/smoothies/assets/img/bg.jpg differ diff --git a/portfolio/smoothies/assets/img/blueberry.png b/portfolio/smoothies/assets/img/blueberry.png new file mode 100644 index 0000000..79754c4 Binary files /dev/null and b/portfolio/smoothies/assets/img/blueberry.png differ diff --git a/portfolio/smoothies/assets/img/lemons.png b/portfolio/smoothies/assets/img/lemons.png new file mode 100644 index 0000000..7b8e23f Binary files /dev/null and b/portfolio/smoothies/assets/img/lemons.png differ diff --git a/portfolio/smoothies/assets/img/watermelon.png b/portfolio/smoothies/assets/img/watermelon.png new file mode 100644 index 0000000..071a72a Binary files /dev/null and b/portfolio/smoothies/assets/img/watermelon.png differ diff --git a/portfolio/smoothies/assets/js/menus-transparent.js b/portfolio/smoothies/assets/js/menus-transparent.js new file mode 100644 index 0000000..6c954f3 --- /dev/null +++ b/portfolio/smoothies/assets/js/menus-transparent.js @@ -0,0 +1,69 @@ + // Code to detect click of option within fly-out menu + let specifiedElement = document.querySelector('.flyout-menu'); + document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } + }); + + // Code to show/hide fly-out mobile menu --> + document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) + const pageContainer = document.querySelector('.page-container'); + + function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } + } + + // Code for menus with transparent background + window.onscroll = function() {swapMenuStyle()}; + const headerDesktop = document.querySelector('.container-menu-desktop'); + const headerMobile = document.querySelector('.container-menu-bar-mobile'); + + const stickyDesktop = headerDesktop.offsetTop +300; + const stickyMobile = headerDesktop.offsetTop +300; + + function swapMenuStyle() { + if (window.pageYOffset > stickyDesktop) { + headerDesktop.classList.add("menu-light","menu-drop-shadow"); + headerDesktop.classList.remove("menu-transparent"); + headerMobile.classList.add("menu-light","menu-drop-shadow"); + headerMobile.classList.remove("menu-transparent"); + + } else { + headerDesktop.classList.add("menu-transparent"); + headerDesktop.classList.remove("menu-light","menu-drop-shadow"); + headerMobile.classList.add("menu-transparent"); + headerMobile.classList.remove("menu-light","menu-drop-shadow"); + } + } \ No newline at end of file diff --git a/portfolio/smoothies/assets/js/menus.js b/portfolio/smoothies/assets/js/menus.js new file mode 100644 index 0000000..6c954f3 --- /dev/null +++ b/portfolio/smoothies/assets/js/menus.js @@ -0,0 +1,69 @@ + // Code to detect click of option within fly-out menu + let specifiedElement = document.querySelector('.flyout-menu'); + document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } + }); + + // Code to show/hide fly-out mobile menu --> + document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) + const pageContainer = document.querySelector('.page-container'); + + function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } + } + + // Code for menus with transparent background + window.onscroll = function() {swapMenuStyle()}; + const headerDesktop = document.querySelector('.container-menu-desktop'); + const headerMobile = document.querySelector('.container-menu-bar-mobile'); + + const stickyDesktop = headerDesktop.offsetTop +300; + const stickyMobile = headerDesktop.offsetTop +300; + + function swapMenuStyle() { + if (window.pageYOffset > stickyDesktop) { + headerDesktop.classList.add("menu-light","menu-drop-shadow"); + headerDesktop.classList.remove("menu-transparent"); + headerMobile.classList.add("menu-light","menu-drop-shadow"); + headerMobile.classList.remove("menu-transparent"); + + } else { + headerDesktop.classList.add("menu-transparent"); + headerDesktop.classList.remove("menu-light","menu-drop-shadow"); + headerMobile.classList.add("menu-transparent"); + headerMobile.classList.remove("menu-light","menu-drop-shadow"); + } + } \ No newline at end of file diff --git a/portfolio/smoothies/index.html b/portfolio/smoothies/index.html new file mode 100644 index 0000000..5ad6dd3 --- /dev/null +++ b/portfolio/smoothies/index.html @@ -0,0 +1,232 @@ + + + + + + + + Smooth Smoothies | Portfolio Project | Aurelien Rebourg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + +
+
+
+
+
+
+ + + + + + + +
+ +
+

Smoot Smoothies

+

Where flavour meet goodness

+ +
+ +
+ sample background image +
+ +
+ +
+ + +
+ +
+

Our world-class smoothies are great at any time of the day and offer a tasty alternative to sugary and unhealthy snacks!

+
+ +
+ +
+

Watermelon Wonder

+

Watermelon is a delicious and refreshing fruit that's also good for you. It is high in vitamin C, vitamin A and many healthy plant compounds, but contains only 60 calories per smoothie. And because watermelon has a high water content, this smoothie is hydrating and helps you feel full.

+
+ +
+ Watermelon Wonder smoothie +
+ +
+ + +
+ +
+ Apple Delight smoothie +
+ +
+

Apple Delight

+

Apples are an awesome source of fibre and vitamin C. They also contain polyphenols, which can have numerous health benefits. Apples have been linked to a lower risk of heart disease because they contain soluble fibre that can help lower blood cholesterol. Studies have also shown that eating apples reduces the risk of type 2 diabetes.

+
+ +
+ +
+ +
+

Blueberry Surprise

+

One of our top sellers. Blueberries are so tasty that many people consider them their favourite fruit. In fact, because they are low in calories and incredibly good for you. Blueberries are often labeled a superfood. Blueberries have the highest antioxidant capacity of all the popular fruits and vegetables.

+
+ +
+ Blueberry Surprise smoothie +
+ +
+ +
+ +
+ Lemon Luxury smoothie +
+ +
+

Lemon Luxury

+

Add zest to your day with our delicious Lemon Luxury smoothie. As a citrus fruit, lemons are high in vitamin C, which is a primary antioxidant that helps reduce your risk of cardiovascular disease and lowers blood pressure. Refreshing and energising - that's our Lemony Luxury smoothie!

+
+ +
+ + + + + + + + +
+ + + + + + + + + diff --git a/portfolio/van-gogh/assets/css/footer.css b/portfolio/van-gogh/assets/css/footer.css new file mode 100644 index 0000000..401e9ab --- /dev/null +++ b/portfolio/van-gogh/assets/css/footer.css @@ -0,0 +1,135 @@ +/* Outer footer parent container */ +footer { + text-align: center; + color:#fff; + background-color:#2c3e50; +} + +/* Desktop footer - inside padding */ +@media (min-width:768px) { + footer { padding: 4% 8% 2% 8% } +} + +/* Mobiles footer - inside padding */ +@media (max-width:767px) { + footer { padding: 8% 8% 6% 8% } +} + +/* Styles for footer background, text, icons and links */ + +footer * { color: #fff } + +/* Footer headings */ +footer h4 { + font-family: serif; + font-weight: normal; + font-style: italic; + font-size: calc(26px + (48 - 26) * ((100vw - 320px)/(1600 - 320))); + margin: 0 auto 16px 0; +} + +footer h5 { + font-family: sans-serif; + font-weight: normal; + font-style: italic; + color: #ecf0f1; + margin: 0 auto 36px auto; + font-size: calc(20px + (32 - 20) * ((100vw - 320px)/(1600 - 320))); +} + +/* Footer text links and icon links */ +footer ul.footer-links, +footer ul.footer-icons { + list-style-type: none; +} + +footer ul.footer-links { + margin: 0 auto 48px auto; +} + +footer ul.footer-icons { + margin: 0 auto 48px auto; +} + +footer ul.footer-links li, +footer ul.footer-icons li { + display: inline-block; + margin: 0 32px 0 0; +} + +footer ul.footer-links li:last-child, +footer ul.footer-icons li:last-child { + margin-right: 0; +} + +/* Footer text links */ +footer ul.footer-links li a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320))); + color: #fff; + font-family: sans-serif +} + +footer ul.footer-links li a:link, +footer ul.footer-links li a:visited { + border-bottom-color: transparent; +} + +footer ul.footer-links li a:hover, +footer ul.footer-links li a:active { + border-bottom-color: #fff +} + +/* Footer icons */ +footer ul.footer-icons li a i { + text-decoration: none; + font-size: calc(22px + (28 - 22) * ((100vw - 320px)/(1600 - 320))); +} + +footer ul.footer-icons li a:hover, +footer ul.footer-icons li a:active { + color: #fff +} + +/* Privacy and legal link */ +footer p a { + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} + +footer p a:link, +footer p a:visited { + border-bottom-color: transparent; +} + +footer p a:hover, +footer p a:active { + border-bottom-color: #fff +} + +footer a.privacy-legal { + font-family: sans-serif; + display: inline-block; + color:#fff; + text-decoration: none; + border-bottom-style: solid; + border-bottom-width: 2px; + padding-bottom:2px; + font-size: calc(14px + (17 - 14) * ((100vw - 320px)/(1600 - 320))); +} + +footer a.privacy-legal:link, +footer a.privacy-legal:visited { + border-bottom-color: transparent; +} + +footer a.privacy-legal:active, +a.privacy-legal:hover { + border-bottom-color: #fff +} \ No newline at end of file diff --git a/portfolio/van-gogh/assets/css/menus.css b/portfolio/van-gogh/assets/css/menus.css new file mode 100644 index 0000000..4a93742 --- /dev/null +++ b/portfolio/van-gogh/assets/css/menus.css @@ -0,0 +1,477 @@ + +.unhide-content-under-menu { padding-top: 72px } + +/* === ALL SCREEN SIZES ====== */ + +/* Positions all menus in front of page content */ +.container-menu-desktop, +.container-menu-bar-mobile, +.flyout-menu { z-index: 999 } +.container-menu-desktop, .container-menu-bar-mobile { + width: 100%; +} + +/* on mobiles - hide desktop menu */ +@media all and (max-width:767px) { + .container-menu-desktop.menu-transparent, + .container-menu-desktop.menu-light, + .container-menu-desktop.menu-dark { display: none } +} + +/* on desktops - hide mobile menu bar and list of menu options */ +@media all and (min-width:768px) { + .container-menu-bar-mobile.menu-transparent, + .container-menu-bar-mobile.menu-light, + .container-menu-bar-mobile.menu-dark, + .flyout-menu.menu-transparent, + .flyout-menu.menu-light, + .flyout-menu.menu-light { display: none } +} + +/* sticks menu to top of desktop and/or mobile screen */ +.menu-sticky { position: fixed; top: 0; left: 0; right: 0; } + +/* prevents content from disappearing udner sticky menus */ +.sticky-anchor { + position: relative; + border-top: 90px solid transparent; + margin: -90px 0 0; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } + + .sticky-anchor:before { + content: ""; + position: absolute; + top: -2px; + left: 0; + right: 0; + } + +/* Height of desktop menu and mobile menu bar */ +.container-menu-desktop, .container-menu-bar-mobile { height:72px } + +/* website logo fixed size in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child img, +.container-menu-bar-mobile a:first-child img { width: 200px; height: 40px } + +/* website logo vertically cente#5ba745 in desktop menu and mobile menu bar */ +.container-menu-desktop a:first-child, +.container-menu-bar-mobile a:first-child { display: flex; flex-direction: row; align-items: center } + +/* hide bullet character on listed links */ +.container-menu-desktop ul li, +.flyout-menu ul li { list-style-type: none } + +/* hide link underlines on desktop and mobile menus */ +.container-menu-desktop ul li a, +.flyout-menu ul li a { text-decoration: none } + +/* make desktop menu options bold */ +.container-menu-desktop ul li a { font-weight:bold } + +/* style cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta, +.flyout-menu ul li a.btn-cta { + display: inline-block; + border-width: 2px; + border-style: solid; + font-weight: bold; + /* soften corners */ + /* border-radius: 4px; */ + /* rounded corners */ + border-radius: 100px +} + +/* style icon in cta button on desktop and mobile menus */ +.container-menu-desktop ul li a.btn-cta i, +.flyout-menu ul li a.btn-cta i { margin-right: 8px; font-size: 90% } + +/* on mobiles, prevent scrolling outside flyout menu */ +.no-scroll { overflow: hidden } + +.menu-drop-shadow { box-shadow: 0 1px 10px #888 } + +/* ======= DESKTOP MENU ======= */ + +/* outer parent flexbox container + home page link (with website logo) at left and ul links at right are its two children */ +.container-menu-desktop { + display: flex; + justify-content: space-between; + padding: 0 6% 0 6%; + width: 100%; + width: 100%; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +/* menu links and cta button aligned horizontally */ +.container-menu-desktop ul li { + display: inline-block; + margin: 0 40px 0 0; /* spacing at right of menu links, cta button */ +} + +.container-menu-desktop ul li:last-child { + margin-right: 0 /* no spacing at right of last menu link or cta button */ +} + +/* vertically center menu links and cta button */ +.container-menu-desktop ul { display: flex; align-items: center } + +/* style text for links and cta button */ +.container-menu-desktop ul li a { + font-size: calc(15px + (19 - 15) * ((100vw - 320px)/(1600 - 320))); + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button padding */ +.container-menu-desktop ul li a.btn-cta { padding: 4px 20px 7px 20px } + + +/* ======= MOBILE MENU ======== */ + +/* outer flexbox container for mobile menu bar + home page link (with website logo) at left and hamburger icon at right are its two children */ +.container-menu-bar-mobile { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 6% 0 6%; + width: 100%; +} + +/* three bars hozizontal in hamburger icon */ +.container-menu-bar-mobile .item-icon .bar1, +.container-menu-bar-mobile .item-icon .bar2, +.container-menu-bar-mobile .item-icon .bar3 { width: 36px; height: 4px; margin: 7px 0; transition: 0.4s } + +/* hamburger icon changes shape to 'X' when fly-out menu is visible */ +.change .bar1 { transform: rotate(-45deg) translate(-9px, 6px) } +.change .bar2 { opacity: 0 } +.change .bar3 { transform: rotate(45deg) translate(-8px, -8px) } + +/* container div for flyout menu content */ +.flyout-menu { + position: fixed; display: block; + top: 72px; /* same height as menu bar */ + width: 320px; + max-height: 100%; + height: 100%; + padding: 30px 40px 40px 40px; + transition: 0.5s; + overflow-x: hidden; + overflow-y: scroll; + overscroll-behavior: contain; + -webkit-overflow-scrolling: touch; /* safari on mobiles */ + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} + +.flyout-menu.flyout-menu-is-closed { + right: -320px; /* hides flyout menu */ +} + +.flyout-menu { + right: 0; /* displays flyout menu */ + overscroll-behavior: contain; + overscroll-behavior-y: contain +} + +/* drop shadow border at left of fly-out menu */ +.flyout-menu { + box-shadow: 0px 1px 10px #888 +} + +/* list of links on flyout menu */ +.flyout-menu ul li { margin: 0 40px 30px 0 } + +/* style flyout menu links */ +.flyout-menu ul li a { + font-size: 18px; + /* font-weight:bold */ + /* text-transform: uppercase */ +} + +/* cta button */ +.flyout-menu a.btn-cta { + display: inline-block; + padding: 10px 24px; +} + +.flyout-menu hr { + height: 4px; + margin: 32px 0 0 0; + border-style: solid; + border-width: 1px +} + +.flyout-menu h4 { + font-size: 20px; + margin: 42px 0 4px 0; + text-align: center; + /* letter-spacing: 2px; *./ + /* text-transform: uppercase */ +} + +.flyout-menu h5 { + font-size: 17px; + margin: 20px 0 20px 0; + text-align: center +} + +.flyout-menu h5 a { + font-size: 17px; + text-decoration: none; + padding-bottom: 4px; + border-bottom-style: solid; + border-bottom-width: 2px +} + +.flyout-menu p { + text-align: center; font-size: 15px; line-height: 1.4; +} + +.flyout-menu div.fly-out-profile-box, +.flyout-menu div.fly-out-social-icons { + display:flex; + flex-direction: row; + justify-content: space-between; +} + +.flyout-menu div.fly-out-profile-box img, +.flyout-menu div.fly-out-profile-box p { width: 47% } + +.flyout-menu div.fly-out-profile-box img { + display: block; border-radius: 100%; + width: 104px; height: 104px; + border-style: solid; + border-width: 2px +} + +.flyout-menu div.fly-out-profile-box p { + text-align:left +} + +.flyout-menu div.fly-out-social-icons { + margin-top:12px +} + +.flyout-menu div.fly-out-social-icons a { + font-size: 26px; + text-align: center +} + +/* ========= Light background menu - desktops and mobiles ========= */ + +/* background colour */ +.menu-light { + background-color: #fff; + transition: all .5s ease-in-out; +} + +/* menu links */ +.menu-light ul li a:link, .menu-light ul li a:visited { color: #5ba745 } +.menu-light ul li a:hover, .menu-light ul li a:active { color: #222 } + +/* cta button */ +.menu-light ul li a.btn-cta:link, +.menu-light ul li a.btn-cta:visited { + background-color: transparent; + color: #5ba745; + border-color:#5ba745 +} + +.menu-light ul li a.btn-cta:hover, +.menu-light ul li a.btn-cta:active { + background-color: #5ba745; + color: #fff; + border-color:#5ba745 +} + +/* on mobiles only */ +.menu-light.flyout-menu hr { background-color: #5ba745; border-color: #5ba745 } + +.menu-light.flyout-menu h4, +.menu-light.flyout-menu h5, +.menu-light.flyout-menu h5 a, +.menu-light.flyout-menu p { color: #5ba745 } + +/* colour of hamburger icon bars */ +.menu-light .item-icon .bar1, +.menu-light .item-icon .bar2, +.menu-light .item-icon .bar3 { background-color: #5ba745 } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #5ba745 } + +/* email link */ +.menu-light.flyout-menu h5 a:link, +.menu-light.flyout-menu h5 a:visited { + border-bottom-color:#5ba745; +} + +.menu-light.flyout-menu h5 a:hover, +.menu-light.flyout-menu h5 a:active { + border-bottom-color: #fff; +} + +/* profile image border colour */ +.menu-light.flyout-menu div.fly-out-profile-box img { border-color: #5ba745 } + +/* contact icons */ +.menu-light.flyout-menu .fly-out-social-icons a i { color:#5ba745 } + +/* === End light background menu === */ + + + +/* ======= Dark background menu - desktops and mobiles ======= */ + +/* background colour */ +.menu-dark { + background-color: #3434b0; + transition: all .5s ease-in-out +} + +/* menu links */ +.menu-dark ul li a:link, .menu-dark ul li a:visited { color: #fff } +.menu-dark ul li a:hover, .menu-dark ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-dark ul li a.btn-cta:link, +.menu-dark ul li a.btn-cta:visited { + background-color: #3434b0; + color: #fff; + border-color:#fff +} + +.menu-dark ul li a.btn-cta:hover, +.menu-dark ul li a.btn-cta:active { + background-color: #fff; + color: #5ba745; + border-color:#fff +} + +/* on mobiles only - various content */ +.menu-dark.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-dark.flyout-menu h4, +.menu-dark.flyout-menu h5, +.menu-dark.flyout-menu h5 a, +.menu-dark.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-dark .item-icon .bar1, +.menu-dark .item-icon .bar2, +.menu-dark .item-icon .bar3 { background-color: #fff } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-dark.flyout-menu h5 a:link, +.menu-dark.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-dark.flyout-menu h5 a:hover, +.menu-dark.flyout-menu h5 a:active { + border-bottom-color: #5ba745; +} + +/* profile image border colour */ +.menu-dark.flyout-menu div.fly-out-profile-box img { border-color: #5ba745 } + +/* contact icons */ +.menu-dark.flyout-menu .fly-out-social-icons a i { color:#fff } + +/* === End dark background menu === */ + + + +/* ======== Transparent background menu - desktops and mobiles =========== */ + +/* background colour */ +.menu-transparent { + background-color: transparent; + transition: all .5s ease-in-out; +} + +/* menu links */ +.menu-transparent ul li a:link, .menu-transparent ul li a:visited { color: #fff } +.menu-transparent ul li a:hover, .menu-transparent ul li a:active { color: #b8b8b8 } + +/* cta button */ +.menu-transparent ul li a.btn-cta:link, +.menu-transparent ul li a.btn-cta:visited { + background-color: #5ba745; + color: #fff; + border-color:#5ba745; +} + +.menu-transparent ul li a.btn-cta:hover, +.menu-transparent ul li a.btn-cta:active { + background-color: #fff; + color: #5ba745; + border-color:#5ba745 +} + +/* on mobiles only - various content */ +.menu-transparent.flyout-menu hr { background-color: #fff; border-color:#fff } + +.menu-transparent.flyout-menu h4, +.menu-transparent.flyout-menu h5, +.menu-transparent.flyout-menu h5 a, +.menu-transparent.flyout-menu p { color:#fff } + +/* colour of hamburger icon bars */ +.menu-transparent .item-icon .bar1, +.menu-transparent .item-icon .bar2, +.menu-transparent .item-icon .bar3 { background-color: #5ba745 } + +/* phone number link */ +a[href^=tel] { text-decoration: none; color: #fff } + +/* email link */ +.menu-transparent.flyout-menu h5 a:link, +.menu-transparent.flyout-menu h5 a:visited { + border-bottom-color: #fff; +} + +.menu-transparent.flyout-menu h5 a:hover, +.menu-transparent.flyout-menu h5 a:active { + border-bottom-color: #5ba745; +} + +/* profile image border colour */ +.menu-transparent.flyout-menu div.fly-out-profile-box img { border-color: #5ba745 } + +/* contact icons */ +.menu-transparent.flyout-menu .fly-out-social-icons a i { color:#fff } + +/* === End transparent background menu === */ + + +/* ***************************************************************** +================END OF MENU STYLES TO COPY AND PASTE =============== +****************************************************************** */ + + +/* ==== PAGE CONTAINER ==== */ + +/* Desktop */ +@media all and (min-width:768px) { + .main-content { padding: 8% 20% 5% 20% } +} +/* Mobiles */ + @media all and (max-width:767px) { + .main-content { padding: 18% 7% 10% 7% } +} +/* Paragraphs in page container */ +.main-content p { + font-weight: normal; line-height: 1.5; margin-bottom:14px; color: #4f5959; + font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320))); +} diff --git a/portfolio/van-gogh/assets/css/resets.css b/portfolio/van-gogh/assets/css/resets.css new file mode 100644 index 0000000..11f123f --- /dev/null +++ b/portfolio/van-gogh/assets/css/resets.css @@ -0,0 +1,24 @@ +/* ============= WEB BROWSER RESETS ============ */ +* { margin: 0; padding: 0; border: none } +*, *::before, *::after { box-sizing: border-box } +html { height: 100%; font-size: 100%; font: inherit; vertical-align: baseline; +scroll-behavior: smooth; scroll-padding-top: 20px } +body { max-width: 1920px; line-height: 1.5; margin-left: auto; margin-right: auto; +min-height: 100vh; text-rendering: optimizeSpeed } +img { width: 100%; height: auto; display: block } +input, button, textarea, select { font: inherit } + +/* Help prevent overflow of long words/names/URLs */ +/* h1, h2, h3, h4, p, li { word-break: break-word; hyphens: auto } */ +p, li { word-break: break-word; hyphens: auto } + +/* HTML5 container elements full viewport width */ +header, section, footer { width: 100% } +/* Last element at bottom of header or section */ +header *:last-child, section *:last-child, footer *:last-child { margin-bottom: 0 } + +/* ================= ENDS ================ */ + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +} \ No newline at end of file diff --git a/portfolio/van-gogh/assets/css/van-gogh.css b/portfolio/van-gogh/assets/css/van-gogh.css new file mode 100644 index 0000000..a0e6711 --- /dev/null +++ b/portfolio/van-gogh/assets/css/van-gogh.css @@ -0,0 +1,112 @@ + +/* Desktops */ +@media (min-width: 768px) { + header { padding: 4% 20% 0 20%; } + main { padding: 0 20% 4% 20%; } +} + +/* Mobiles */ +@media (max-width: 767px) { + header { padding: 12% 8% 0 8% } + main { padding: 0 20% 4% 20%; } +} + + +/* Web page */ +body { + background-color: #FFFFBD; + font-family: 'Merriweather', serif; +} + +header { + margin-top: 72px; +} + +/* Embedded YouTube video */ + +header .video-container { + overflow: hidden; + position: relative; + width: 100%; + margin-bottom: 32px; + } + + header .video-container::after { + padding-top: 56.25%; + display: block; + content: ''; + } + + header .video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + +/* Main heading */ +header h1 { + font-size: calc(48px + (84 - 48) * ((100vw - 320px) /(1600 - 320))); + line-height: 1.1; + font-weight: normal; + color: #3434B0; + letter-spacing: -1px; + text-align: center; + margin-bottom: 32px; +} + +/* Small headings */ +main h2 { + font-size: calc(18px + (26 - 18) * ((100vw - 320px) /(1600 - 320))); + color:#3434B0; + line-height: 1.5; + margin-bottom: 42px; +} + +/* Smaller headings */ +main h3 { + font-size: calc(32px + (38 - 32) * ((100vw - 320px) /(1600 - 320))); + color: #000; + letter-spacing:-1px; + margin-top: 40px; + margin-bottom: 2px; + line-height: 1.2; +} + +/* Text paragraphs */ +main p { + font-size: calc(16px + (21 - 16) * ((100vw - 320px) /(1600 - 320))); + color: #455C80; + line-height: 1.6; + margin-top: 0; + margin-bottom: 22px; +} + +/* Images */ +main img { + margin-bottom: 42px; + /* Drop shadow effect at right and bottom of image */ + box-shadow: 8px 10px 8px #888; +} + +/* ====== HYPERLINK STYLES ====== */ + + +/* Passive link styles */ + +main a:link, main a:visited { + text-decoration: none; + padding-bottom: 2px; + color: #000; + border-bottom: solid 2px #000; +} + +/* Interactive link styles */ + +main a:hover, main a:focus, main a:active { + text-decoration: none; + padding-bottom: 2px; + color: #f26f21; + border-bottom: solid 2px blue; +} diff --git a/portfolio/van-gogh/assets/img/bedroom-arles-van-gogh.jpg b/portfolio/van-gogh/assets/img/bedroom-arles-van-gogh.jpg new file mode 100644 index 0000000..604201c Binary files /dev/null and b/portfolio/van-gogh/assets/img/bedroom-arles-van-gogh.jpg differ diff --git a/portfolio/van-gogh/assets/img/cafe-terrace-at-night-van-gogh.jpg b/portfolio/van-gogh/assets/img/cafe-terrace-at-night-van-gogh.jpg new file mode 100644 index 0000000..ec8f8ac Binary files /dev/null and b/portfolio/van-gogh/assets/img/cafe-terrace-at-night-van-gogh.jpg differ diff --git a/portfolio/van-gogh/assets/img/starry-night-van-gogh.jpg b/portfolio/van-gogh/assets/img/starry-night-van-gogh.jpg new file mode 100644 index 0000000..aef204f Binary files /dev/null and b/portfolio/van-gogh/assets/img/starry-night-van-gogh.jpg differ diff --git a/portfolio/van-gogh/assets/img/yellow-house-van-gogh.jpg b/portfolio/van-gogh/assets/img/yellow-house-van-gogh.jpg new file mode 100644 index 0000000..52b4c0b Binary files /dev/null and b/portfolio/van-gogh/assets/img/yellow-house-van-gogh.jpg differ diff --git a/portfolio/van-gogh/assets/js/menus.js b/portfolio/van-gogh/assets/js/menus.js new file mode 100644 index 0000000..96f861f --- /dev/null +++ b/portfolio/van-gogh/assets/js/menus.js @@ -0,0 +1,46 @@ + // Code to detect click of option within fly-out menu + let specifiedElement = document.querySelector('.flyout-menu'); + document.addEventListener('click', function(event) { + var isClickInside = specifiedElement.contains(event.target); + //If link is within current web page + if (isClickInside) { + //Get id of anchor + let anchor_id = window.location.hash; + //Add extra spacing above anchor + let elemAnchor = document.querySelector(anchor_id) + elemAnchor.classList.add('sticky-anchor'); + //Close fly-out menu + toggleMobileMenu(); + } + else { + return; + } + }); + + // Code to show/hide fly-out mobile menu --> + document.querySelector('.item-icon').addEventListener('click', toggleMobileMenu) + const pageContainer = document.querySelector('.page-container'); + + function toggleMobileMenu() { + //toggle hamburger icon + const elemIcon = document.querySelector('.item-icon'); + elemIcon.classList.toggle("change"); + const elemHTML = document.querySelector('html'); + const elemBody = document.querySelector('body'); + const elemFlyOut = document.querySelector('.flyout-menu'); + + //if fly-out menu is currently closed, open it. + if (elemIcon.classList.contains('change')) { + elemFlyOut.classList.remove('flyout-menu-is-closed'); + elemFlyOut.classList.add('flyout-menu-is-open'); + elemHTML.classList.add('no-scroll'); + elemBody.classList.add('no-scroll'); + } + //if fly-out menu is currently open, close it. + else { + elemFlyOut.classList.remove('flyout-menu-is-open'); + elemFlyOut.classList.add('flyout-menu-is-closed'); + elemHTML.classList.remove('no-scroll'); + elemBody.classList.remove('no-scroll'); + } + } diff --git a/portfolio/van-gogh/index.html b/portfolio/van-gogh/index.html new file mode 100644 index 0000000..5e12055 --- /dev/null +++ b/portfolio/van-gogh/index.html @@ -0,0 +1,172 @@ + + + + + + + Vincent van Gogh | Portfolio Project | Aurelien Rebourg + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + website logo + +
+
+
+
+
+
+ + + + + + + + +
+ +

Vincent van Gogh

+ +
+ +
+ +
+ +
+ + +

Among the most famous figures in Western art, Vincent van Gogh (1853-1890) was a Dutch post-impressionist painter who created about 2,100 artworks. They include landscapes, still lifes, portraits and self-portraits, and are characterised by bold colours and dramatic, impulsive and expressive brushwork.

+ +

The Arles Years

+

Van Gogh's two years at Arles in France (1888–89) were one of his most artistically productive periods. He was enchanted by the local countryside and light; his works from this period are rich in yellow, ultramarine and mauve. Among the most well-known works of that time is an oil painting of his rented room, entitled Bedroom in Arles.

+ + Bedroom in Arles, van Gogh +

On view: Vincent van Gogh Museum, Amsterdam

+ +

In Arles, the painter began a friendship with the owners of a local hotel, known as the Cafe de la Gare. The building inspired two more famous creations. The first of which is known as The Yellow House.

+ + The Yellow House, van Gogh +

On view: Vincent van Gogh Museum, Amsterdam

+ +

The second painting is one of many people's favourites: The Cafe Terrace at Night. The location at the Place du Forum in Arles was refurbished to replicate van Gogh's painting.

+ + The Cafe Terrace at Night, van Gogh +

On view: Kröller-Müller Museum, Otterlo

+ +

Life, Suffering and Death

+ +

After his time at Arles, van Gogh moved to a former monastery at nearby Saint-Remy. The building's garden and surrounding countryside became the main subjects of his paintings. Some of his works from this time are characterised by swirls, such as The Starry Night.

+ + Starry Night, van Gogh +

On view: The Museum of Modern Art, New York

+ +

Van Gogh suffered from mental illness all his life. He was not commercially successful, and his suicide at aged 37 came after years of poverty.

+ +

Van Gogh is known to have sold only a single painting in his lifetime; for 400 francs or about €1,800 in today's value. In 1990, one of his paintings, Portrait of Dr. Gachet, fetched $82.5 million at auction.

+ +

Source: All text and images from Wikipedia.

+
+ + + + + + + + + \ No newline at end of file