website
This commit is contained in:
commit
551b49a8f6
Binary file not shown.
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"ExpandedNodes": [
|
||||
""
|
||||
],
|
||||
"PreviewInSolutionExplorer": false
|
||||
}
|
||||
Binary file not shown.
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 }
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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%
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 207 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 169 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<title>Contact | Aurelien Rebourg Web Designer</title>
|
||||
<meta name="description" content="Helping businesses of every size and type get the most from digital platforms.">
|
||||
|
||||
<link href="../assets/css/resets.css" rel="stylesheet">
|
||||
<link href="../assets/css/menus.css" rel="stylesheet">
|
||||
<link href="../assets/css/header.css" rel="stylesheet">
|
||||
<link href="../assets/css/main.css" rel="stylesheet">
|
||||
<link href="../assets/css/footer.css" rel="stylesheet">
|
||||
|
||||
<!-- Link to Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome 5 icons -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body class="bg-light-slate">
|
||||
|
||||
<!-- Begin desktop menu -->
|
||||
<div class="container-menu-desktop menu-dark menu-sticky">
|
||||
<!-- first child item -->
|
||||
<a href="../index.html"><img src="../assets/img/website-logo.png" alt="website logo"></a>
|
||||
<!-- second child item -->
|
||||
<ul>
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="../portfolio/index.html">Portfolio</a></li>
|
||||
<li><a href="../exercises.html">All my works</a></li>
|
||||
<li><a href="../contact/index.html" class="btn-cta">Contact <i class="fas fa-arrow-right"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- End desktop menu -->
|
||||
|
||||
|
||||
<!-- Begin mobile menu bar -->
|
||||
<div class="container-menu-bar-mobile menu-dark menu-sticky">
|
||||
<!-- first child -->
|
||||
<a href="../index.html"><img src="../assets/img/website-logo.png" alt="website logo"></a>
|
||||
<!-- second child -->
|
||||
<div class="item-icon">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End mobile menu bar -->
|
||||
|
||||
<!-- Begin mobile menu slide-out options -->
|
||||
<div class="flyout-menu flyout-menu-is-closed menu-dark">
|
||||
<ul>
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="../portfolio/index.html">Portfolio</a></li>
|
||||
<li><a href="../contact/index.html" class="btn-cta">Contact <i class="fas fa-arrow-right"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<h4>About Me</h4>
|
||||
<div class="fly-out-profile-box">
|
||||
<img src="../assets/img/profile-pic.jpg" alt="Aurelien Rebourg, web designer, Dublin">
|
||||
<p>Hi, I'm <b>Aurelien Rebourg</b>, a web and digital designer based in Dublin, Ireland.</p>
|
||||
</div>
|
||||
|
||||
<h4>Contact</h4>
|
||||
<p>Have a project you'd like to discuss? Let's make something great together!</p>
|
||||
|
||||
<h5><a href="mailto:aurelien.rebourg@gmail.com" target="_blank">aurelien.rebourg@gmail.com</a></h5>
|
||||
|
||||
<h4>Social Links</h4>
|
||||
<div class="fly-out-social-icons">
|
||||
<a href="#" target="_blank"><i class="fab fa-github-square fa-fw"></i></a>
|
||||
<a href="#" target="_blank"><i class="fab fa-linkedin fa-fw"></i></a>
|
||||
<a href="#" target="_blank"><i class="fab fa-twitter-square"></i></a>
|
||||
<a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
|
||||
<a href="#" target="_blank"><i class="fab fa-facebook-square"></i></a>
|
||||
</div>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
</div>
|
||||
<!-- End mobile menu slide-out options -->
|
||||
|
||||
<!-- Begin hero block -->
|
||||
<div class="hero-block-two-columns unhide-content-under-sticky-menu">
|
||||
<div class="item-2 fade-in">
|
||||
<h1>Realise your digital potential</h1>
|
||||
<h2>Helping <b>businesses</b> of every size and type get the most from <b>digital platforms</b>.</h2>
|
||||
</div>
|
||||
<div class="item-2 fade-in">
|
||||
<img src="../assets/img/contact-pic.jpg" alt="hero image">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- End hero block -->
|
||||
|
||||
<!-- Begin container for contact form -->
|
||||
|
||||
<div class="container-contact-form">
|
||||
<h3>Get in touch</h3>
|
||||
<p>Use the form below to let me know a little more about your objectives and I'll get back to you.</p>
|
||||
|
||||
<!-- Contact form starts here -->
|
||||
<form id="contact-form" name="contact-form" accept-charset="utf-8" method="post" action="https://formspree.io/nn/nnnnnn">
|
||||
|
||||
<!-- Begin contact form fields -->
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="item-name">
|
||||
<label for="full-name">Full Name</label>
|
||||
<input type="text" name="name" id="full-name" placeholder="Your First and Last Name here." required>
|
||||
</div>
|
||||
<div class="item-email">
|
||||
<label for="email-address">Email</label>
|
||||
<input type="email" name="_replyto" id="email-address" placeholder="Your Email Address here." required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="item-textarea">
|
||||
<label for="message">Message</label>
|
||||
<textarea rows="5" name="message" id="message" placeholder="Your Message here." required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="item-btn">
|
||||
<button id="btn-submit" type="submit">Send <i class="fas fa-arrow-circle-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
|
||||
<!-- End contact form fields -->
|
||||
|
||||
</form>
|
||||
<!-- Contact form ends here -->
|
||||
|
||||
</div>
|
||||
<!-- End container for contact form -->
|
||||
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
<h4>Aurelien Rebourg, web designer</h4>
|
||||
<h5>Excellence in digital creation</h5>
|
||||
|
||||
<ul class="footer-links">
|
||||
<li><a href="../index.html">Home</a></li>
|
||||
<li><a href="../portfolio/index.html">Portfolio</a></li>
|
||||
<li><a href="index.html">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="footer-icons">
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="fab fa-facebook"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<script src="../assets/js/menus.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Aurélien Rebourg | Home Page</title>
|
||||
<meta name="description" content="Welcome to my website that showcases some of my digital creations.">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="assets/img//favicon-32x32.png">
|
||||
<link rel="stylesheet" href="assets/css/global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Hello</h1>
|
||||
<h2>I'm Aurélien Rebourg</h2>
|
||||
|
||||
<p> This is my website. It has been created to show my new web design skills</p>
|
||||
<ul>
|
||||
<li><a href="exercises/page-1.html">A Tale of Two Cities</a></li>
|
||||
<li><a href="exercises/page-2.html">IBAT Chocolates</a></li>
|
||||
<li><a href="exercises/page-3.html">Prince & Purple Rain</a></li>
|
||||
<li><a href="exercises/page-4.html">Lorem Ipsum Text</a></li>
|
||||
<li><a href="exercises/page-5.html">Vincent van Gogh</a></li>
|
||||
<li><a href="exercises/page-6.html">Irish Tourism</a></li>
|
||||
<li><a href="exercises/page-7.html">Smoothies</a></li>
|
||||
<li><a href="exercises/page-8.html">Software Analytics</a></li>
|
||||
<li><a href="exercises/page-9.html">The Box Model</a></li>
|
||||
<li><a href="exercises/page-10.html">Web Page With Panels</a></li>
|
||||
<li><a href="exercises/forms.html">Emmail Sign-up Form</a></li>
|
||||
<li><a href="exercises/page-12.html">Responsive grid of rows and columns</a></li>
|
||||
<li><a href="exercises/hero-img.html">Text on images</a></li>
|
||||
<li><a href="exercises/hero-img-half.html">Half image</a></li>
|
||||
<li><a href="exercises/hero-video.html">Video background</a></li>
|
||||
</ul>
|
||||
<a href="https://kaktana.com" target="blank">
|
||||
<img src="assets/img/kaktana.png" alt="Kaktana logo">
|
||||
</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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 }
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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 }
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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 }
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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 }
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 538 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 324 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 306 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Sample web page with buttons and icons</title>
|
||||
<meta name="description" content="A sample web page with a range of buttons styles and Font Awesome icons.">
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="assets/css/buttons-icons.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Link to icons for Font Awesome 5 -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<article>
|
||||
|
||||
<header class="header-narrow text-center bg-header">
|
||||
<h1>About Us</h1>
|
||||
<img src="assets/img/three-staff.png" alt="staff members">
|
||||
<h2>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.</h2>
|
||||
</header>
|
||||
|
||||
<section class="section-narrow bg-blue-dark">
|
||||
<h1>Section Heading One</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-blue-light">
|
||||
<h1>Section Heading Two</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<div class="container-btn">
|
||||
<a href="#" class="btn btn-solid btn-rounded"><i class="fas fa-shopping-cart"></i> Order Now</a>
|
||||
<a href="#" class="btn btn-ghost btn-rounded"><i class="fas fa-arrow-right"></i> Learn more</a>
|
||||
</div>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-blue-dark">
|
||||
<h1>Section Heading Three</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-blue-light">
|
||||
<h1>Section Heading Four</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Sample web page with buttons and icons</title>
|
||||
<meta name="description" content="A sample web page with a range of buttons styles and Font Awesome icons.">
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="assets/css/forms.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Fira+Sans:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Link to icons for Font Awesome 5 -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<article>
|
||||
|
||||
<header class="header-narrow text-center bg-header">
|
||||
<h1>About Us</h1>
|
||||
<img src="assets/img/three-staff.png" alt="staff members">
|
||||
<h2>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.</h2>
|
||||
</header>
|
||||
|
||||
<section class="section-narrow bg-blue-dark">
|
||||
<h1>Section Heading One</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-blue-light">
|
||||
<h1>Section Heading Two</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<div class="container-btn">
|
||||
<a href="#" class="btn btn-solid btn-rounded"><i class="fas fa-shopping-cart"></i> Order Now</a>
|
||||
<a href="#" class="btn btn-ghost btn-rounded"><i class="fas fa-arrow-right"></i> Learn more</a>
|
||||
</div>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-blue-dark">
|
||||
<h1>Section Heading Three</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-blue-light">
|
||||
<h1>Section Heading Four</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<div class="container-form">
|
||||
<form action="https://formspree.io/f/mrgoaavw" method="POST" id="email-form">
|
||||
<label for=""></label>
|
||||
<input type="email" id="email" name="email" placeholder="email address" required>
|
||||
<button id="my-form-button" type="submit" class="btn btn-solid btn-rounded"><i class="fas fa-arrow-right"></i> Subscribe</button>
|
||||
<div id="form-status"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
var form = document.getElementById("email-form");
|
||||
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
const status = document.getElementById("form-status");
|
||||
const data = new FormData(event.target);
|
||||
fetch(event.target.action, {
|
||||
method: form.method,
|
||||
body: data,
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
}).then(response => {
|
||||
document.getElementById("form-status").style.display="block";
|
||||
status.innerHTML = "Thanks for your submission!";
|
||||
form.reset();
|
||||
setTimeout(function() {
|
||||
const msg = document.getElementById("form-status");
|
||||
msg.style.transition = '.5s';
|
||||
msg.style.opacity = '0';
|
||||
msg.style.visibility = 'hidden';
|
||||
msg.style.display = 'none';
|
||||
}, 1250);
|
||||
|
||||
}).catch(error => {
|
||||
document.getElementById("form-status").style.display="block";
|
||||
status.innerHTML = "Oops! There was a problem submitting your form."
|
||||
setTimeout(function() {
|
||||
const msg = document.getElementById("form-status");
|
||||
msg.style.transition = '.5s';
|
||||
msg.style.opacity = '0';
|
||||
msg.style.visibility = 'hidden';
|
||||
msg.style.display = 'none';
|
||||
}, 1250);
|
||||
});
|
||||
}
|
||||
form.addEventListener("submit", handleSubmit)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hero Block with Image</title>
|
||||
<meta name="description" content="A hero block with a background image and a tinted overlay.">
|
||||
|
||||
<link rel="preload" href="assets/img/business.jpg" as="image">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/hero-image.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- hero block -->
|
||||
<header class="hero-block text-center">
|
||||
|
||||
<div class="hero-text-container">
|
||||
<h1 class="slide-in-top">Aurelien Rebourg</h1>
|
||||
<h2 class="slide-in-left">Web Developement learner</h2>
|
||||
</div>
|
||||
|
||||
<div class="hero-bg-media">
|
||||
<img src="assets/img/business.jpg" alt="sample background image">
|
||||
</div>
|
||||
|
||||
<div class="bg-overlay"></div>
|
||||
|
||||
</header>
|
||||
<!-- /hero block -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Hero Block with Text</title>
|
||||
<meta name="description" content="An above-the-fold hero block with animated text and various background colours.">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/hero-text.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- hero block -->
|
||||
<header class="hero-block text-center">
|
||||
|
||||
<div class="hero-text-container">
|
||||
<h1 class="slide-in-top">Aurelien Rebourg</h1>
|
||||
<h2 class="slide-in-left">Leaner Web Developer</h2>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<!-- /hero block -->
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>A Tale of Two Cities</title>
|
||||
<meta name="description" content="A basic web page containing some text from A Tale of Two Cities, a novel published in 1859 by English author Charles Dickens.">
|
||||
<link rel="stylesheet" href="assets/css/style-1.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>A Tale of Two Cities</h1>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Small Heading</h2>
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Small Heading</h2>
|
||||
<p>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.</p>
|
||||
|
||||
<h3>Smaller Heading</h3>
|
||||
<p>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!</p>
|
||||
|
||||
<p>by <i>Charles Dickens</i>, published by <b>Chapman & Hall</b> in 1859.</p>
|
||||
|
||||
<p><a href="../index.html">Back to Home page</a></p>
|
||||
<!--- This is a comment -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="robots" content="noindex">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<title>Sample web page with highlighted panels</title>
|
||||
|
||||
<meta name="description" content="A sample web page of text in highighted divs with various background colour and border styles.">
|
||||
|
||||
<link href="assets/css/style-10.css" rel="stylesheet">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>University of Tabi</h1>
|
||||
|
||||
<img src="assets/img/student-computer-screen.jpg" alt="Student at computer screen">
|
||||
|
||||
<h2>An innovative institution delivering world-class student experiences since 1975 .</h2>
|
||||
|
||||
<h3>Mission Statement</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<div class="important-note-box box-style-1">
|
||||
<h3>Important Note</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="important-note-box box-style-2">
|
||||
<h3>Important Note</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="important-note-box box-style-3">
|
||||
<h3>Important Note</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
<div class="important-note-box box-style-4">
|
||||
<h3>Important Note</h3>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>HTML5 Sample Web Page: Sections with alternating dark background colours.</title>
|
||||
<meta name="description" content="Using HTML5 section tags to create a web page with alternating dark coloured blocks of content.">
|
||||
|
||||
<!-- Stylesheet -->
|
||||
<link rel="stylesheet" href="assets/css/style-11.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<article>
|
||||
|
||||
<header class="header-narrow text-center bg-header">
|
||||
<h1>About Us</h1>
|
||||
<img src="assets/img/three-staff.png" alt="staff members">
|
||||
<h2>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.</h2>
|
||||
</header>
|
||||
|
||||
<section class="section-narrow bg-dark-1">
|
||||
<h1>Section Heading One</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-dark-2">
|
||||
<h1>Section Heading Two</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-dark-1">
|
||||
<h1>Section Heading Three</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
<section class="section-narrow bg-dark-2">
|
||||
<h1>Section Heading Four</h1>
|
||||
<p><b>Lorem ipsum dolor</b> 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.</p>
|
||||
|
||||
<p>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.</p>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Flexbox</title>
|
||||
<meta name="description" content="Flexbox exercises.">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style-12.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<article>
|
||||
|
||||
<section>
|
||||
<div class="container-flexbox">
|
||||
|
||||
<div class="bono">
|
||||
<h3>Bono</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
<div class="edge">
|
||||
<h3>Edge</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
<div class="adam">
|
||||
<h3>Adam</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
<div class="larry">
|
||||
<h3>Larry</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>IBAT Chocolates</title>
|
||||
<meta name="description" content="We transform ethically-sourced organically-grown, high-quality cocoa beans into delicious chocolate.">
|
||||
<link rel="stylesheet" href="assets/css/style-2.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>IBAT Chocolates</h1>
|
||||
|
||||
<h2>We transform ethically-sourced organically-grown, high-quality cocoa beans into delicious chocolate.</h2>
|
||||
|
||||
<h3>O'Payo</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<p><b>Ingredients</b>: <i>Organic cocoa beans and organic sugar</i>.</p>
|
||||
|
||||
<h3>Nahua</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<p><b>Ingredients</b>: <i>Cocoa beans and organic sugar</i>.</p>
|
||||
|
||||
<p><a href="../index.html">Back to Home page</a></p>
|
||||
<!--- This is a comment -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Purple Rain</title>
|
||||
<meta name="description" content="A basic web page containing some text from Wikipedia about the 1983-recorded song Purple Rain by Prince">
|
||||
<link rel="stylesheet" href="assets/css/style-3.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Purple Rain</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p><i>Purple Rain</i> 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.</p>
|
||||
|
||||
<h2>Origins</h2>
|
||||
<p>Originally written as a country song and intended to be a collaboration with Stevie Nicks, Prince explained the meaning of the song as follows: <i>"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."</i></p>
|
||||
|
||||
<h2>Recording</h2>
|
||||
<p>The song was recorded during a benefit concert for the Minnesota Dance Theatre at the First Avenue nightclub in Minneapolis on August 3, 1983. <i>City Pages</i> described the 70-minute performance as Prince's "sweatiest and most soulful hometown concert yet."</p>
|
||||
|
||||
<h2>Reception and legacy</h2>
|
||||
<p>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.</p>
|
||||
|
||||
<p><b>Source</b>: <i>Wikipedia</i>.</p>
|
||||
<p><a href="../index.html">Back to Home page</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lorem Ipsum Text</title>
|
||||
<meta name="description" content="A basic web page containing some placeholder text created with Lorem Ipsum.">
|
||||
<link rel="stylesheet" href="assets/css/style-4.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Lorem Ipsum Text</h1>
|
||||
|
||||
<h2>Introduction</h2>
|
||||
<p>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!</p>
|
||||
|
||||
<h2>Sub-heading</h2>
|
||||
<p>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.</p>
|
||||
|
||||
<h2>Sub-heading</h2>
|
||||
<p>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!</p>
|
||||
|
||||
<h3>Smaller Sub-heading</h3>
|
||||
<p>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?</p>
|
||||
|
||||
<h2>Sub-heading</h2>
|
||||
<p>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!</p>
|
||||
|
||||
<p><b>Text Source</b>: <i>Lorem Ipsum, a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content</i>.</p>
|
||||
<p><a href="../index.html">Back to Home page</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>Vincent van Gogh</title>
|
||||
<meta name="description" content="The Dutch post-impressionist whose works are characterised by bold colours and dramatic, impulsive and expressive brushwork.">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style-5.css">
|
||||
|
||||
<!-- Google Fonts stylesheet -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h1>Vincent van Gogh</h1>
|
||||
|
||||
<h2>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.</h2>
|
||||
|
||||
<h3>The Arles Years</h3>
|
||||
<p>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 <i>Bedroom in Arles</i>.</p>
|
||||
|
||||
<img src="assets/img/bedroom-arles-van-gogh.jpg" alt="Bedroom in Arles, van Gogh">
|
||||
<p><b>On view</b>: <a href="https://www.vangoghmuseum.nl/en/collection/s0047V1962" target="_blank" rel="noopener">Vincent van Gogh Museum, Amsterdam</a></p>
|
||||
|
||||
<p>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 <i>The Yellow House</i>.</p>
|
||||
|
||||
<img src="assets/img/yellow-house-van-gogh.jpg" alt="The Yellow House, van Gogh">
|
||||
<p><b>On view</b>: <a href="https://www.vangoghmuseum.nl/en/collection/s0032V1962" target="_blank" rel="noopener">Vincent van Gogh Museum, Amsterdam</a></p>
|
||||
|
||||
<p>The second painting is one of many people's favourites: <i>The Cafe Terrace at Night</i>. The location at the Place du Forum in Arles was refurbished to replicate van Gogh's painting.</p>
|
||||
|
||||
<img src="assets/img/cafe-terrace-at-night-van-gogh.jpg" alt="The Cafe Terrace at Night, van Gogh">
|
||||
<p><b>On view</b>: <a href="https://krollermuller.nl/en/vincent-van-gogh-terrace-of-a-cafe-at-night-place-du-forum-1" target="_blank" rel="noopener">Kröller-Müller Museum, Otterlo</a></p>
|
||||
|
||||
<h3>Life, Suffering and Death</h3>
|
||||
|
||||
<p>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 <i>The Starry Night</i>.</p>
|
||||
|
||||
<img src="assets/img/starry-night-van-gogh.jpg" alt="Starry Night, van Gogh">
|
||||
<p><b>On view</b>: <a href="https://www.moma.org/collection/works/79802" target="_blank" rel="noopener">The Museum of Modern Art, New York</a></p>
|
||||
|
||||
<p>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.</p>
|
||||
|
||||
<p>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, <i>Portrait of Dr. Gachet</i>, fetched $82.5 million at auction.</p>
|
||||
|
||||
<p><b>Source</b>: <i>All text and images from Wikipedia</i>.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<title>Ireland's Top Five Visitor Attractions</title>
|
||||
<meta name="description" content="The country's most popular atractions for visitors, according to the Irish Tourist Board.">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style-6.css">
|
||||
|
||||
<!-- Google Fonts stylesheet -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body id="top-of-page">
|
||||
|
||||
<h1>Ireland's Top Five Visitor Attractions</h1>
|
||||
|
||||
|
||||
<p><a href="#guinness">1: Guinness Storehouse, Dublin</a></p>
|
||||
<p><a href="#cliffs-of-moher">2: Cliffs of Moher, Co. Clare</a></p>
|
||||
<p><a href="#dublin-zoo">3: Dublin Zoo</a></p>
|
||||
<p><a href="#aquatic-centre">4: National Aquatic Centre, Dublin</a></p>
|
||||
<p><a href="#kells-tcd">5: Book of Kells Exhibition, Trinity College, Dublin</a></p>
|
||||
|
||||
|
||||
<p><b>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.</b></p>
|
||||
<p><b>What are Ireland's most popular tourist attractions? According to a <a href="http://www.failteireland.ie/Research-and-insights.aspx">July 2019</a> report by the <a href="https://www.discoverireland.ie/">Irish Tourist Board</a>, the top five paid visitor attractions are those listed below.</b></p>
|
||||
|
||||
|
||||
<h2 id="guinness">Guinness Storehouse, Dublin</h2>
|
||||
<img src="assets/img/guinness-storehouse.jpg" alt="Guinness Storehouse">
|
||||
|
||||
<p>Located at St. James's Gate Brewery, the <a href="https://www.guinness-storehouse.com/en" target="_blank">Guinness Storehouse</a> 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!</p>
|
||||
<p>Annual Number of Visitors: <b>1,711,281</b></p>
|
||||
|
||||
|
||||
<h2 id="cliffs-of-moher">Cliffs of Moher, Co. Clare</h2>
|
||||
<img src="assets/img/cliffs-of-moher.jpg" alt="Cliffs of Moher">
|
||||
|
||||
<p>You simply cannot travel to Ireland without paying a visit to the breathtaking <a href="https://www.cliffsofmoher.ie" target="_blank">Cliffs of Moher</a>, 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.</p>
|
||||
<p>Annual Number of Visitors: <b>1,527,000</b></p>
|
||||
|
||||
|
||||
<h2 id="dublin-zoo">Dublin Zoo</h2>
|
||||
<img src="assets/img/dublin-zoo.jpg" alt="Dublin Zoo">
|
||||
|
||||
<p>Established in 1830, <a href="https://www.dublinzoo.ie" target="_blank">Dublin Zoo</a> 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.</p>
|
||||
<p>Annual Number of Visitors: <b>1,264,300</b></p>
|
||||
|
||||
|
||||
<h2 id="aquatic-centre">National Aquatic Centre, Dublin</h2>
|
||||
|
||||
<img src="assets/img/national-aquatic-centre.jpg" alt="National Aquatic Centre">
|
||||
|
||||
<p>Located in the Dublin suburb of Blanchardstown, Dublin, the <a href="https://www.nationalaquaticcentre.ie" target="_blank">National Aquatic Centre</a> is Ireland's largest and most popular Water Park. The 2,500-capacity venue has won numerous major awards, including <i>Best Leisure Facility in Ireland</i>. 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.</p>
|
||||
<p>Annual Number of Visitors: <b>1,099,756</b></p>
|
||||
|
||||
|
||||
<h2 id="kells-tcd">Book of Kells Exhibition, Trinity College, Dublin</h2>
|
||||
<img src="assets/img/book-of-kells.jpg" alt="Book of Kells">
|
||||
|
||||
<p>Based at Trinity College in the heart of Dublin city, the <a href="https://www.tcd.ie/visitors/book-of-kells/" target="_blank">Book of Kells Exhibition</a> 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.</p>
|
||||
<p>Annual Number of Visitors: <b>983,410</b></p>
|
||||
|
||||
<p><a href="#top-of-page">Return to top of page</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<title>Smooth Smoothies</title>
|
||||
<meta name="description" content="Dublin's finest smoothie store. Offering tasty alternatives to sugary and unhealthy snacks for busy, on-the-go, on-trend professionals.">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style-7.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Smooth Smoothies</h1>
|
||||
|
||||
<h2>Our world-class smoothies are great at any time of the day and offer a tasty alternative to sugary and unhealthy snacks!.</h2>
|
||||
|
||||
<img src="assets/img/watermelon.png" alt="Watermelon Wonder">
|
||||
|
||||
<h3>Watermelon Wonder</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<img src="assets/img/apple.png" alt="Apple Delight">
|
||||
|
||||
<h3>Apple Delight</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<img src="assets/img/blueberry.png" alt="Blueberry Surprise">
|
||||
|
||||
<h3>Blueberry Surprise</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<img src="assets/img/lemons-removebg-preview.png" alt="Lemon Luxury">
|
||||
|
||||
<h3>Lemon Luxury</h3>
|
||||
<p>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!</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>IBAT Analytics Software</title>
|
||||
<meta name="description" content="BAT Analytics tells you all you need to know about your website traffic, without tracking or storing visitors' personal information.">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style-8.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<img src="assets/img/visual-data.png" alt="IBAT Analytics product">
|
||||
|
||||
<h1>Digital Product Innovation for Visionary Brands</h1>
|
||||
|
||||
<h2>IBAT Analytics helps you boost your business impact.</h2>
|
||||
|
||||
<h3>What we offer</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<img src="assets/img/programmer.png" alt="IBAT Analytics - What we offer">
|
||||
|
||||
|
||||
<h3>How you benefit</h3>
|
||||
<p>IBAT Analytics helps you focus on what's important: your business.</p>
|
||||
<img src="assets/img/business.png" alt="IBAT Analytics - How you benefit">
|
||||
|
||||
|
||||
<h3>Happy users</h3>
|
||||
<p>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.</p>
|
||||
|
||||
<img src="assets/img/happy-users.png" alt="IBAT Analytics - Happy Users">
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>The HTML box model with div elements</title>
|
||||
<meta name="description" content="A web page for exploring the HTML box model and in particular the properties of the div tag that can sub-divide elements into rectangular boxes.">
|
||||
|
||||
<link rel="stylesheet" href="assets/css/style-9.css">
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container-flexbox">
|
||||
|
||||
<div class="bono">
|
||||
<h3>Bono</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
<div class="edge">
|
||||
<h3>Edge</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
<div class="adam">
|
||||
<h3>Adam</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
<div class="larry">
|
||||
<h3>Larry</h3>
|
||||
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius corporis obcaecati perferendis fuga quidem ad alias debitis excepturi ipsa laudantium sapiente.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
<title>Aurelien Rebourg Web Designer</title>
|
||||
<meta name="description" content="I create digital experiences to promote products, services and events.">
|
||||
|
||||
<link href="assets/css/resets.css" rel="stylesheet">
|
||||
<link href="assets/css/menus.css" rel="stylesheet">
|
||||
<link href="assets/css/header.css" rel="stylesheet">
|
||||
<link href="assets/css/main.css" rel="stylesheet">
|
||||
<link href="assets/css/footer.css" rel="stylesheet">
|
||||
|
||||
<!-- Link to Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Font Awesome 5 icons -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Begin desktop menu -->
|
||||
<div class="container-menu-desktop menu-dark menu-sticky">
|
||||
<!-- first child item -->
|
||||
<a href="index.html"><img src="assets/img/website-logo.png" alt="website logo"></a>
|
||||
<!-- second child item -->
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="portfolio/index.html">Portfolio</a></li>
|
||||
<li><a href="exercises.html">All my works</a></li>
|
||||
<li><a href="contact/index.html" class="btn-cta">Contact <i class="fas fa-arrow-right"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- End desktop menu -->
|
||||
|
||||
|
||||
<!-- Begin mobile menu bar -->
|
||||
<div class="container-menu-bar-mobile menu-dark menu-sticky">
|
||||
<!-- first child -->
|
||||
<a href="index.html"><img src="assets/img/website-logo.png" alt="website logo"></a>
|
||||
<!-- second child -->
|
||||
<div class="item-icon">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End mobile menu bar -->
|
||||
|
||||
<!-- Begin mobile menu slide-out options -->
|
||||
<div class="flyout-menu flyout-menu-is-closed menu-dark">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="portfolio/index.html">Portfolio</a></li>
|
||||
<li><a href="contact/index.html" class="btn-cta">Contact <i class="fas fa-arrow-right"></i></a></li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
<h4>About Me</h4>
|
||||
<div class="fly-out-profile-box">
|
||||
<img src="assets/img/profile-pic.jpg" alt="Aurelien Rebourg, web designer">
|
||||
<p>Hi, I'm <b>Aurelien Rebourg</b>, a web Front-end and Back-end Developer.</p>
|
||||
</div>
|
||||
|
||||
<h4>Contact</h4>
|
||||
<p>Have a project you'd like to discuss? Let's make something great together!</p>
|
||||
|
||||
<h5><a href="mailto:aurelien.rebourg@gmail.com" target="_blank">aurelien.rebourg@gmail.com</a></h5>
|
||||
|
||||
<h4>Social Links</h4>
|
||||
<div class="fly-out-social-icons">
|
||||
<a href="https://github.com/AurelReb/" target="_blank"><i class="fab fa-github-square fa-fw"></i></a>
|
||||
<a href="#" target="_blank"><i class="fab fa-linkedin fa-fw"></i></a>
|
||||
<a href="#" target="_blank"><i class="fab fa-twitter-square"></i></a>
|
||||
</div>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
<p> </p>
|
||||
</div>
|
||||
<!-- End mobile menu slide-out options -->
|
||||
|
||||
<!-- Begin hero block -->
|
||||
<div class="hero-block-two-columns unhide-content-under-sticky-menu">
|
||||
<div class="item-2 fade-in">
|
||||
<h1>Welcome to my website</h1>
|
||||
<h2>Hi, I'm <b>Aurelien Rebourg</b>. a web Front-end and Back-end Developer.</h2>
|
||||
|
||||
<div class="container-btn">
|
||||
<a href="portfolio/index.html" class="btn btn-gradient btn-rounded"><i class="fas fa-arrow-right"></i> Portfolio</a>
|
||||
<a href="contact/index.html" class="btn btn-ghost btn-rounded"><i class="fas fa-arrow-right"></i> Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-2 fade-in">
|
||||
<img src="assets/img/home-pic.jpg" alt="hero image" style="box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.75);">
|
||||
</div>
|
||||
</div>
|
||||
<!-- End hero block -->
|
||||
|
||||
<!-- Begin single-column container -->
|
||||
|
||||
<!-- Begin parent flexbox container for one column layout (.item-1) on all screens -->
|
||||
<div class="container-flexbox bg-light-slate">
|
||||
<div class="item-1">
|
||||
<h2>Recent Projects</h2>
|
||||
<p>Below you can see some examples of my recent work. Check out my complete <a href="portfolio/index.html" class="fancy-link">portfolio</a>. Have a project you'd like to discuss? <a href="contact/index.html" class="fancy-link">Let's make something great together!</a></p>
|
||||
</div>
|
||||
</div><!-- End parent flexbox container -->
|
||||
|
||||
<div class="container-flexbox bg-light-slate">
|
||||
|
||||
<div class="item-3" style="left: 50%;">
|
||||
<a href="exercises.html"><img src="assets/img/exercises.png" alt="Project: Ireland Tourism"></a>
|
||||
<h3>All my exercises</h3>
|
||||
<p>Here you can find all my exercises done.</p>
|
||||
<a href="exercises.html" class="button button-solid btn-rounded">View Project <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container-flexbox bg-light-slate">
|
||||
|
||||
<div class="item-3">
|
||||
<a href="portfolio/van-gogh/index.html"><img src="assets/img/project-van-gogh.png" alt="Project: Vincent Van Gogh"></a>
|
||||
<h3>Vincent Van Gogh</h3>
|
||||
<p>Responsive page layout with fluid typography, Google Fonts, and embedded YouTube video.</p>
|
||||
<a href="portfolio/van-gogh/index.html" class="button button-solid btn-rounded">View Project <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="item-3">
|
||||
<a href="portfolio/smoothies/index.html"><img src="assets/img/project-smoothie.jpg" alt="Project: Smooth Smoothies"></a>
|
||||
<h3>Smooth Smoothies</h3>
|
||||
<p>Transparent images, serverless email sign-up form and JavaScript on-scroll menu effects.</p>
|
||||
<a href="portfolio/smoothies/index.html" class="button button-solid btn-rounded">View Project <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="item-3">
|
||||
<a href="portfolio/ireland/index.html"><img src="assets/img/project-ireland.jpg" alt="Project: Ireland Tourism"></a>
|
||||
<h3>Ireland's Attractions</h3>
|
||||
<p>On-page navigation with a looped background video that includes a tinted overlay.</p>
|
||||
<a href="portfolio/ireland/index.html" class="button button-solid btn-rounded">View Project <i class="fas fa-arrow-right"></i></a>
|
||||
</div>
|
||||
|
||||
</div><!-- End parent flexbox container -->
|
||||
|
||||
|
||||
<footer>
|
||||
|
||||
<h4>Aurelien Rebourg, web designer</h4>
|
||||
<h5>Excellence in digital creation</h5>
|
||||
|
||||
<ul class="footer-links">
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="portfolio/index.html">Portfolio</a></li>
|
||||
<li><a href="contact/index.html">Contact</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="footer-icons">
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="fab fa-linkedin"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://github.com/AurelReb/" target="_blank">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/menus.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 1-1</b>: JavaScript Introduction</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
document.write("Hello. This is my first script.");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 1-2</b>: JavaScript Introduction</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
document.write("Thank you for visiting my web page.");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 1-3</b>: JavaScript Introduction</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
document.write("She\'s certain that JavaScript is <b>\"great\"<\/b>");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 1-4</b>: JavaScript Introduction</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
document.write("<h1>A heading<\/h1><p>Some text with <b>bold<\/b> formatting.<\/p>");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 1-5</b>: JavaScript Introduction</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
window.alert("Hope you enjoy your visit to my web page.");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 1-6</b>: JavaScript Introduction</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
window.confirm("Did you enjoy"+" "+"your visit to my web page?");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JavaScript Exercise: The DOM</title>
|
||||
<meta name="description" content="JavaScript Exercise: The DOM">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container {
|
||||
padding-top: 40px
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 60px;
|
||||
border: solid 1px yellow;
|
||||
padding: 20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom: 48px;
|
||||
font-size: larger;
|
||||
width: 110%;
|
||||
}
|
||||
|
||||
main p {
|
||||
font-size: 22px
|
||||
}
|
||||
|
||||
#resultBox,
|
||||
#resultNum {
|
||||
border: solid 1px green;
|
||||
height: 40px;
|
||||
background-color: #E7FFE7;
|
||||
width: 280px;
|
||||
padding: 3px 12px;
|
||||
}
|
||||
|
||||
#user-message {
|
||||
background-color: lightgreen
|
||||
}
|
||||
|
||||
.container-flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.container-flex .col-2 {
|
||||
flex-grow: 1;
|
||||
flex-basis: 47%;
|
||||
background-color: red;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
table#buttons {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
table#buttons td {
|
||||
width: 50%;
|
||||
padding-bottom: 18px
|
||||
}
|
||||
|
||||
table#buttons td button {
|
||||
padding: 4px 10px;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
table#buttons td button b {
|
||||
font-family: monospace
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 11-1</b>: The Document Object Model</h1>
|
||||
<p>This script illustrates the DOM.</p>
|
||||
|
||||
<section class="outer">
|
||||
|
||||
<h2 class="text-center">This is the first sub-heading</h2>
|
||||
|
||||
<p>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?</p>
|
||||
|
||||
<h2 class="text-center">This is the second sub-heading</h2>
|
||||
|
||||
<p>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?</p>
|
||||
|
||||
<div id="user-message"></div>
|
||||
|
||||
</section>
|
||||
|
||||
<table id="buttons">
|
||||
<tr>
|
||||
<td><button id="btn1">getElementById(<b>"id"</b>)</button></td>
|
||||
<td><button id="btn2">document.querySelector(<b>"#id"</b>)</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button id="btn3">document.getElementsByTagName(<b>tag</b>)</button></td>
|
||||
<td><button id="btn4">document.querySelectorAll(<b>tag</b>)</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button id="btn5">document.querySelector(<b>tag</b>)</button></td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button id="btn6">document.getElementsByClassName(<b>"class"</b>)</button></td>
|
||||
<td><button id="btn7">document.querySelectorAll(<b>".class"</b>)</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button id="btn8">document.querySelector(<b>".class"</b>)</button></td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
const allButtons = document.querySelectorAll("button");
|
||||
|
||||
for (let i = 0; i < allButtons.length; i++) {
|
||||
allButtons[i].addEventListener("click", function () { doButtons() }
|
||||
);
|
||||
}
|
||||
|
||||
function doButtons() {
|
||||
// get button id
|
||||
const str = event.target.id.toString();
|
||||
const id = str.charAt(str.length - 1);
|
||||
showResponse(id);
|
||||
}
|
||||
|
||||
function showResponse(id) {
|
||||
if (id === "1") {
|
||||
console.log("SELECTING BY UNIQUE ID");
|
||||
let el_ID_1 = document.getElementById("user-message");
|
||||
console.log("document.getElementById(): " + el_ID_1);
|
||||
}
|
||||
else if (id === "2") {
|
||||
console.log("SELECTING BY UNIQUE ID");
|
||||
let el_ID_2 = document.querySelector("#user-message");
|
||||
console.log("document.querySelector(): " + el_ID_2);
|
||||
}
|
||||
else if (id === "3") {
|
||||
console.log("SELECTING BY HTML TAG");
|
||||
let els_Tag_1 = document.getElementsByTagName("p");
|
||||
console.log("document.getElementsByTagName(): " + els_Tag_1);
|
||||
}
|
||||
|
||||
else if (id === "4") {
|
||||
console.log("SELECTING BY HTML TAG");
|
||||
let els_Tag_2 = document.querySelectorAll("p");
|
||||
console.log("document.querySelectorAll(): " + els_Tag_2);
|
||||
}
|
||||
|
||||
else if (id === "5") {
|
||||
console.log("SELECTING BY FIRST HTML TAG");
|
||||
let els_Tag_3 = document.querySelector("p");
|
||||
console.log("document.querySelector(): " + els_Tag_3);
|
||||
}
|
||||
else if (id === "6") {
|
||||
console.log("SELECTING BY CSS CLASS");
|
||||
let els_Class_1 = document.getElementsByClassName("text-center");
|
||||
console.log("document.getElementsByClassName(): " + els_Class_1);
|
||||
}
|
||||
|
||||
else if (id === "7") {
|
||||
console.log("SELECTING BY CSS CLASS");
|
||||
let els_Class_2 = document.querySelectorAll(".text-center");
|
||||
console.log("document.querySelectorAll(): " + els_Class_2);
|
||||
}
|
||||
|
||||
else if (id === "8") {
|
||||
console.log("SELECTING BY FIRST CSS CLASS");
|
||||
let els_Class_3 = document.querySelector(".text-center");
|
||||
console.log("document.querySelectorAll(): " + els_Class_3);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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 }
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
.js-box p:last-child { margin-bottom: 0 }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 2-1</b>: Objects, Properies and Methods</h1>
|
||||
<p>These scripts reveal information about your computer's operating system, web browser, window and web page.</p>
|
||||
|
||||
<h2>Web page URL</h2>
|
||||
<div class="js-box">
|
||||
<script>
|
||||
document.write("<p><b>"+window.location.href+"<\/b><\/p>");
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<h2>Web page details</h2>
|
||||
<div class="js-box">
|
||||
<script>
|
||||
document.write("<p>Title: <b>"+document.title+"<\/b><\/p>");
|
||||
document.write("<p>Last Updated: <b>"+document.lastModified+"<\/b><\/p>");
|
||||
document.write("<p>Referrer: <b>"+document.referrer+"<\/b><\/p>");
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<h3>OS platform and web browser</h3>
|
||||
|
||||
<div class="js-box">
|
||||
<script>
|
||||
document.write("<p><b>"+navigator.userAgent+"<\/b><\/p>");
|
||||
</script>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 }
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
.js-box p:last-child { margin-bottom: 0 }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 3-1</b>: JavaScript Variables and Operators</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
<script>
|
||||
let FirstName = "Eddie";
|
||||
let Surname = "Hamilton"
|
||||
document.write("<i>First Name:<\/i> "+FirstName+"<br>");
|
||||
document.write("<i>Surname:<\/i> "+Surname);
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
.js-box p:last-child { margin-bottom: 0 }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 3-2</b>: JavaScript Variables and Operators</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
let FirstNumber = 36;
|
||||
let SecondNumber = 12;
|
||||
let SumResult = FirstNumber + SecondNumber;
|
||||
document.write("<p>First Number: "+FirstNumber+"<br>");
|
||||
document.write("Second Number: "+SecondNumber+"<br>");
|
||||
document.write("Result: <b>"+SumResult+"<\/b><\/p>");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
.js-box p:last-child { margin-bottom: 0 }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 3-3</b>: JavaScript Variables and Operators</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
/* Declare variables */
|
||||
let fahrenheit;
|
||||
let celsius;
|
||||
/* Assign input temperature */
|
||||
celsius = 220;
|
||||
/* Perform calculation */
|
||||
fahrenheit = ((9/5) * celsius ) + 32;
|
||||
/* Display input and result */
|
||||
document.write("Temperature (<i>Celsius<\/i>): "+celsius+"°<br>");
|
||||
document.write("Temperature (<i>Fahrenheit<\/i>): "+fahrenheit+"°");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
.js-box p:last-child { margin-bottom: 0 }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 3-4</b>: JavaScript Variables and Operators</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<script>
|
||||
let firstVar;
|
||||
document.write("<p><b>Variable Type:<\/b> " + typeof firstVar+"<\/p>");
|
||||
firstVar = "12";
|
||||
document.write("<p><b>Variable Type:<\/b> " + typeof firstVar+"<\/p>");
|
||||
firstVar = 12;
|
||||
document.write("<p><b>Variable Type:<\/b> " + typeof firstVar+"<\/p>");
|
||||
firstVar = "12";
|
||||
document.write("<p><b>Variable Type:<\/b> " + typeof firstVar+"<\/p>");
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 }
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom:20px;
|
||||
font-size: larger;
|
||||
}
|
||||
.js-box p:last-child { margin-bottom: 0 }
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 4-1</b>: JavaScript Functions</h1>
|
||||
<p>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!</p>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<button onclick="sayHello()">Click to display greeting</button>
|
||||
|
||||
<button id="btnGreeting">Click to display greeting</button>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<p>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!</p>
|
||||
|
||||
<p>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!</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
document.getElementById("btnGreeting").addEventListener("click", sayHello);
|
||||
function sayHello() {
|
||||
window.alert("Welcome to my web page.");
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 }
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom: 48px;
|
||||
font-size: larger;
|
||||
}
|
||||
#resultBox, #resultNum {
|
||||
border: solid 1px green;
|
||||
height: 40px;
|
||||
background-color: #E7FFE7;
|
||||
width: 280px;
|
||||
padding: 3px 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 5-1</b>: Javascript User Input</h1>
|
||||
<p>This script captures and displays a value data entered by users.</p>
|
||||
|
||||
<h3>Display User Input</h3>
|
||||
<div class="js-box">
|
||||
|
||||
<p>First Name: <input type="text" id="fName"></p>
|
||||
<p><button onclick="showUserInput()">Show user input</button></p>
|
||||
<p>You entered: </p>
|
||||
<div id="resultBox"></div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function showUserInput() {
|
||||
let userInput = document.getElementById("fName").value;
|
||||
document.getElementById("resultBox").innerHTML = "<b>"+userInput+"<\/b>";
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Women4IT - JavaScript</title>
|
||||
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
||||
<!-- Customise Bootstrap for practical grid layouts -->
|
||||
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
||||
<style>
|
||||
.container { padding-top: 40px }
|
||||
.js-box {
|
||||
border:solid 1px yellow;
|
||||
padding:20px;
|
||||
background-color: lightyellow;
|
||||
margin-bottom: 48px;
|
||||
font-size: larger;
|
||||
}
|
||||
#resultBox, #resultNum {
|
||||
border: solid 1px green;
|
||||
height: 40px;
|
||||
background-color: #E7FFE7;
|
||||
width: 280px;
|
||||
padding: 3px 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<div class="container col-md-8 offset-md-2">
|
||||
<h1><b>Exercise 5-2</b>: JavaScript User Input</h1>
|
||||
<p>This script captures and displays a value data entered by users.</p>
|
||||
|
||||
<h3>Redisplay User Input</h3>
|
||||
|
||||
<div class="js-box">
|
||||
|
||||
<p>First Name: <input type="text" id="fName"></p>
|
||||
<p><button onclick="showUserInput()">Show user input</button></p>
|
||||
<button onclick="resetAll()">Reset All</button></p>
|
||||
<p>You entered: </p>
|
||||
<div id="resultBox"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<!-- Popper JS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
||||
<!-- Latest compiled JavaScript -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
function showUserInput() {
|
||||
/* Place the first name from the input field in a variable */
|
||||
let userInput = document.getElementById("fName").value;
|
||||
/* Display the value on the web page */
|
||||
document.getElementById("resultBox").innerHTML = "<b>"+userInput+"<\/b>";
|
||||
}
|
||||
|
||||
function resetAll() {
|
||||
document.getElementById("fName").value = "";
|
||||
document.getElementById("resultBox").innerHTML = "";
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue