diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..c01c92a --- /dev/null +++ b/Dockerfile @@ -0,0 +1,7 @@ +FROM node:18 + +WORKDIR /app +COPY package*.json ./ +RUN npm install +COPY . . +CMD ["npm", "run", "dev"] \ No newline at end of file diff --git a/css/main.css b/css/main.css index 6537dac..53d1e07 100644 --- a/css/main.css +++ b/css/main.css @@ -1,2 +1,2 @@ - +@font-face{font-family:Georgia;font-style:normal;font-weight:400;src:url(/src/fonts/georgia/georgia.woff) format("woff")}@font-face{font-family:Georgia;font-style:italic;font-weight:400;src:url(/src/fonts/georgia/georgiai.woff) format("woff")}@font-face{font-family:Georgia;font-style:normal;font-weight:700;src:url(/src/fonts/georgia/georgiab.woff) format("woff")}@font-face{font-family:Georgia;font-style:italic;font-weight:700;src:url(/src/fonts/georgia/georgiaz.woff) format("woff")}@font-face{font-family:Futura;src:url(/src/fonts/futura/Futura-Bold.woff2) format("woff2"),url(/src/fonts/futura/Futura-Bold.woff) format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Futura;src:url(/src/fonts/futura/Futura-MediumItalic.woff2) format("woff2"),url(/src/fonts/futura/Futura-MediumItalic.woff) format("woff");font-weight:500;font-style:italic;font-display:swap}@font-face{font-family:Futura;src:url(/src/fonts/futura/Futura-Medium.woff2) format("woff2"),url(/src/fonts/futura/Futura-Medium.woff) format("woff");font-weight:500;font-style:normal;font-display:swap}:root{--fontFamilyGeorgia:'Georgia',serif;--fontFamilyFutura:'Futura',sans-serif}:root{--primaryColor:#202F66;--secondaryColor:#6ED5B8;--fontColor:#202F66;--fontColorLight:#FFFFFF;--generalPadding:20px;--menuBarHeight:80px;--mainlogoWidth:140px;--footerMainHeight:314px;--footerSubHeight:92px}*,::after,::before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:0;box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,html,p{margin:0;padding:0}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}a{color:inherit}.container{max-width:1400px;margin:auto;padding:0 20px;position:relative;width:100%}.container .row{display:flex;flex-wrap:wrap;width:100%}.container .row .col{padding:0 10px;flex:1}.btn{all:unset;border:none;border-radius:10px;padding:21px 56px;font-family:var(--fontFamilyFutura);font-size:18px;font-weight:700;box-shadow:0 4px 15px rgba(0,0,0,.1);cursor:pointer;display:inline-block}.btn.btn-primary{background-color:var(--secondaryColor);color:var(--primaryColor)}body{font-family:var(--fontFamilyFutura);background-color:var(----fontColorLight);color:var(--fontColor);line-height:1.5}header{position:fixed;width:100%;z-index:2}header .top-bar{max-width:1400px;margin:auto;padding:var(--generalPadding) var(--generalPadding);display:flex;justify-content:center;align-items:flex-end}header .top-bar .menu-bar{position:relative;background-color:var(--secondaryColor);display:flex;width:100%;max-width:934px;min-height:var(--menuBarHeight);padding:0 45px;justify-content:flex-start;align-items:center;border-radius:100px}header .top-bar .menu-bar .logo{color:var(--primaryColor);width:var(--mainlogoWidth);height:auto}main{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(180deg,rgba(126,135,167,0) -10.51%,rgba(126,135,167,.53) 6.07%,#202f66 70.16%)}main .hero{text-align:center;padding:calc(var(--menuBarHeight) + var(--generalPadding) * 2) var(--generalPadding) calc(var(--generalPadding) * 2) var(--generalPadding)}main .hero .col{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:35px}main .hero h1{font-family:var(--fontFamilyGeorgia);font-size:45px;line-height:120%;font-weight:400;color:var(--fontColorLight);max-width:660px}main .hero h1 span{font-family:var(--fontFamilyFutura);font-weight:700;color:var(--secondaryColor)}main .hero h2{font-family:var(--fontFamilyFutura);font-size:22px;line-height:125%;font-weight:500;color:var(--fontColorLight);max-width:450px}footer{font-size:16px;line-height:130%;color:var(--primaryColor)}footer .footer-mainfooter{display:flex;justify-content:center;align-items:center;min-height:var(--footerMainHeight);background-color:var(----fontColorLight);padding:var(--generalPadding) 0;text-align:left}footer .footer-mainfooter .container .row{flex-direction:column;justify-content:center;align-items:center;text-align:center}footer .footer-mainfooter .container .row .col{display:flex;flex-direction:column;gap:20px}footer .footer-mainfooter .container .row .col .footer-title{font-family:var(--fontFamilyGeorgia);font-size:30px;line-height:110%;font-weight:400;padding-top:25px}footer .footer-mainfooter .container .row .col .link-address{text-decoration:none}footer .footer-mainfooter .container .row .col ul{list-style:none;padding:9px 0 0 0;margin:0}footer .footer-mainfooter .container .row .col ul li{margin-bottom:10px}footer .footer-mainfooter .container .row .col .social-links{display:flex;flex-direction:row;justify-content:space-between;gap:20px}footer .footer-mainfooter .container .row .col .social-links a{width:38px;height:38px}footer .footer-mainfooter .container .row .col:last-child{margin:calc(var(--generalPadding)*2) var(--generalPadding) var(--generalPadding) var(--generalPadding)}footer .footer-mainfooter .logo{width:220px;height:auto}footer .footer-subfooter{display:flex;justify-content:center;align-items:center;min-height:var(--footerSubHeight);background-color:var(--primaryColor);padding:10px 0;text-align:center;font-size:14px}footer .footer-subfooter .col{display:flex;justify-content:center;align-items:center}footer .footer-subfooter .col .logo{width:150px;height:auto;color:var(--fontColorLight)}@media (min-width:1024px){:root{--menuBarHeight:112px;--mainlogoWidth:182px;--footerMainHeight:314px}.container .row .col.col-3{flex:0 0 25%;max-width:25%}.container .row .col.col-12{flex:0 0 100%;max-width:100%}.btn{transition:all .2s ease}.btn.btn-primary:hover{background-color:var(--fontColorLight);color:var(--secondaryColor)}header .top-bar .menu-bar .logo{transition:all .2s ease}header .top-bar .menu-bar .logo:hover{color:var(--fontColorLight)}main .hero h1{font-size:60px;line-height:107%;max-width:950px}footer .footer-mainfooter .container .row{flex-direction:row;justify-content:flex-start;align-items:flex-start;text-align:left}footer .footer-mainfooter .container .row .col{gap:30px;order:2}footer .footer-mainfooter .container .row .col .social-links{justify-content:flex-start}footer .footer-mainfooter .container .row .col .social-links a{transition:all .2s ease}footer .footer-mainfooter .container .row .col .social-links a:hover{transform:scale(1.1)}footer .footer-mainfooter .container .row .col:not(:last-child) p{line-height:190%;padding-top:9px}footer .footer-mainfooter .container .row .col:last-child{margin:0;order:1}} /*# sourceMappingURL=main.css.map */ diff --git a/css/main.css.map b/css/main.css.map index b227a97..1f53738 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":[],"names":[],"mappings":"","file":"main.css","sourcesContent":[]} \ No newline at end of file +{"version":3,"sources":["_fonts.scss","main.scss","main.css"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["@font-face {\n font-family: 'Georgia';\n font-style: normal;\n font-weight: normal;\n src: url('/src/fonts/georgia/georgia.woff') format('woff');\n}\n\n@font-face {\n font-family: 'Georgia';\n font-style: italic;\n font-weight: normal;\n src: url('/src/fonts/georgia/georgiai.woff') format('woff');\n}\n\n@font-face {\n font-family: 'Georgia';\n font-style: normal;\n font-weight: bold;\n src: url('/src/fonts/georgia/georgiab.woff') format('woff');\n}\n\n@font-face {\n font-family: 'Georgia';\n font-style: italic;\n font-weight: bold;\n src: url('/src/fonts/georgia/georgiaz.woff') format('woff');\n}\n\n@font-face {\n font-family: 'Futura';\n src: url('/src/fonts/futura/Futura-Bold.woff2') format('woff2'),\n url('/src/fonts/futura/Futura-Bold.woff') format('woff');\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Futura';\n src: url('/src/fonts/futura/Futura-MediumItalic.woff2') format('woff2'),\n url('/src/fonts/futura/Futura-MediumItalic.woff') format('woff');\n font-weight: 500;\n font-style: italic;\n font-display: swap;\n}\n\n@font-face {\n font-family: 'Futura';\n src: url('/src/fonts/futura/Futura-Medium.woff2') format('woff2'),\n url('/src/fonts/futura/Futura-Medium.woff') format('woff');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n}\n\n:root {\n --fontFamilyGeorgia: 'Georgia', serif;\n --fontFamilyFutura: 'Futura', sans-serif;\n}\n\n","@import \"fonts\"; \n\n// Define CSS variables\n:root{\n --primaryColor: #202F66;\n --secondaryColor: #6ED5B8;\n --fontColor: #202F66;\n --fontColorLight: #FFFFFF;\n --generalPadding: 20px;\n --menuBarHeight: 80px;\n --mainlogoWidth: 140px;\n --footerMainHeight: 314px;\n --footerSubHeight: 92px;\n} \n\n// Global styles to improve consistency across browsers\n*,\n*::before,\n*::after {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n outline: 0;\n box-sizing: border-box;\n}\n\n// Reset default margins and paddings\nhtml, body, p, h1, h2, h3, h4, h5, h6 {\n margin: 0;\n padding: 0;\n}\n\n// Set images and media to be responsive\nimg, picture, video, canvas, svg {\n display: block;\n max-width: 100%;\n}\n\n// Inherit fonts for form elements\nbutton, input, textarea, select {\n font: inherit;\n}\n\na {\n color: inherit;\n}\n\n// Layout helpers\n.container {\n max-width: 1400px;\n margin: auto;\n padding: 0 20px;\n position: relative;\n width: 100%;\n .row{\n display: flex;\n flex-wrap: wrap;\n width: 100%;\n .col{\n padding: 0 10px;\n flex: 1;\n }\n }\n}\n\n// Button styles\n.btn{\n all: unset;\n border: none;\n border-radius: 10px;\n padding: 21px 56px;\n font-family: var(--fontFamilyFutura);\n font-size: 18px;\n font-weight: 700;\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);\n cursor: pointer;\n display: inline-block;\n &.btn-primary{\n background-color: var(--secondaryColor);\n color: var(--primaryColor);\n }\n}\n\n// Body styles\nbody {\n font-family: var(--fontFamilyFutura);\n background-color: var(----fontColorLight);\n color: var(--fontColor);\n line-height: 1.5;\n}\n\n// Header styles\nheader{\n position: fixed;\n width: 100%;\n z-index: 2;\n .top-bar{\n max-width: 1400px;\n margin: auto;\n padding: var(--generalPadding) var(--generalPadding);\n display: flex;\n justify-content: center;\n align-items: flex-end;\n .menu-bar{\n position: relative;\n background-color: var(--secondaryColor);\n display: flex;\n width: 100%;\n max-width: 934px;\n min-height: var(--menuBarHeight);\n padding: 0px 45px;\n justify-content: flex-start;\n align-items: center; \n border-radius: 100px;\n .logo{\n color: var(--primaryColor);\n width: var(--mainlogoWidth);\n height: auto;\n }\n }\n }\n}\n\n// Main styles\nmain{\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center; \n min-height: 100vh;\n background: linear-gradient(180deg, rgba(126, 135, 167, 0) -10.51%, rgba(126, 135, 167, 0.53) 6.07%, #202F66 70.16%);\n .hero{\n text-align: center;\n padding: calc(var(--menuBarHeight) + var(--generalPadding) * 2) var(--generalPadding) calc(var(--generalPadding) * 2) var(--generalPadding);\n .col{\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 35px;\n }\n h1{\n font-family: var(--fontFamilyGeorgia);\n font-size: 45px;\n line-height: 120%;\n font-weight: 400;\n color: var(--fontColorLight);\n max-width: 660px;\n span{\n font-family: var(--fontFamilyFutura);\n font-weight: 700;\n color: var(--secondaryColor);\n }\n }\n h2{\n font-family: var(--fontFamilyFutura);\n font-size: 22px;\n line-height: 125%;\n font-weight: 500;\n color: var(--fontColorLight);\n max-width: 450px;\n }\n }\n}\n\n// Footer styles\nfooter{\n font-size: 16px;\n line-height: 130%;\n color: var(--primaryColor);\n .footer-mainfooter{\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: var(--footerMainHeight);\n background-color: var(----fontColorLight);\n padding: var(--generalPadding) 0;\n text-align: left;\n .container{\n .row{\n flex-direction: column;\n justify-content: center;\n align-items: center;\n text-align: center;\n .col{\n display: flex;\n flex-direction: column;\n gap: 20px;\n .footer-title{\n font-family: var(--fontFamilyGeorgia);\n font-size: 30px;\n line-height: 110%;\n font-weight: 400;\n padding-top: 25px;\n }\n\n .link-address{\n text-decoration: none;\n }\n\n ul{\n list-style: none;\n padding: 9px 0 0 0;\n margin: 0;\n li{\n margin-bottom: 10px;\n }\n }\n\n .social-links{\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: 20px;\n a{\n width: 38px;\n height: 38px;\n }\n }\n\n &:last-child{\n margin: calc(var(--generalPadding)*2) var(--generalPadding) var(--generalPadding) var(--generalPadding);\n } \n }\n }\n }\n\n .logo{\n width: 220px;\n height: auto;\n }\n }\n .footer-subfooter{\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: var(--footerSubHeight);\n background-color: var(--primaryColor);\n padding: 10px 0;\n text-align: center;\n font-size: 14px;\n .col{\n display: flex;\n justify-content: center;\n align-items: center;\n .logo{\n width: 150px;\n height: auto;\n color: var(--fontColorLight);\n } \n }\n }\n}\n\n// Desktop styles\n@media (min-width: 1024px) {\n :root{\n --menuBarHeight: 112px;\n --mainlogoWidth: 182px;\n --footerMainHeight: 314px;\n } \n\n .container {\n .row{\n .col{\n &.col-3 {\n flex: 0 0 25%;\n max-width: 25%;\n }\n &.col-12 {\n flex: 0 0 100%;\n max-width: 100%;\n }\n }\n }\n }\n\n .btn{\n transition: all 0.2s ease;\n &.btn-primary{\n &:hover{\n background-color: var(--fontColorLight);\n color: var(--secondaryColor);\n }\n }\n }\n\n header{\n .top-bar{\n .menu-bar{ \n .logo{ \n transition: all 0.2s ease;\n &:hover{\n color: var(--fontColorLight);\n }\n }\n }\n }\n }\n\n main{\n .hero{\n h1{\n font-size: 60px;\n line-height: 107%;\n max-width: 950px;\n }\n }\n }\n\n footer{\n .footer-mainfooter{\n .container{\n .row{\n flex-direction: row;\n justify-content: flex-start;\n align-items: flex-start;\n text-align: left;\n .col{\n gap: 30px;\n order: 2;\n .social-links{\n justify-content: flex-start;\n a{\n transition: all 0.2s ease;\n &:hover{\n transform: scale(1.1);\n }\n }\n }\n\n &:not(:last-child){\n p{\n line-height: 190%;\n padding-top: 9px;\n }\n }\n &:last-child{\n margin: 0;\n order: 1;\n }\n }\n }\n } \n }\n }\n}",null]} \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..f2bebf4 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,10 @@ +services: + frontend: + build: . + container_name: ooptimo-frontend + ports: + - "3000:3000" + volumes: + - .:/app + - /app/node_modules + command: npm run dev \ No newline at end of file diff --git a/index.html b/index.html index 4c48af9..87a75f1 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,172 @@ - + + Job Application HTML Tests — ooptimo + + - + + + + + + + + + + -

Job Application HTML Tests — ooptimo

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

Creiem en una era digital, on el consum tradicional i l’online es fusionen

+

Connectant les companyies amb els seus clients com mai abans ho havien fet.

+ +
+
+
+
+ + + diff --git a/server.js b/server.js index 49feb86..1457d6f 100644 --- a/server.js +++ b/server.js @@ -3,7 +3,8 @@ const staticServer = require("static-server"); const server = new staticServer({ rootPath: "./", port: 3000, - open: true + host: "0.0.0.0", + open: false }); server.start(function(){ diff --git a/src/fonts/futura/Futura-Bold.woff b/src/fonts/futura/Futura-Bold.woff new file mode 100644 index 0000000..2419cc2 Binary files /dev/null and b/src/fonts/futura/Futura-Bold.woff differ diff --git a/src/fonts/futura/Futura-Bold.woff2 b/src/fonts/futura/Futura-Bold.woff2 new file mode 100644 index 0000000..a56ba2d Binary files /dev/null and b/src/fonts/futura/Futura-Bold.woff2 differ diff --git a/src/fonts/futura/Futura-CondensedExtraBold.woff b/src/fonts/futura/Futura-CondensedExtraBold.woff new file mode 100644 index 0000000..d7b2b10 Binary files /dev/null and b/src/fonts/futura/Futura-CondensedExtraBold.woff differ diff --git a/src/fonts/futura/Futura-CondensedExtraBold.woff2 b/src/fonts/futura/Futura-CondensedExtraBold.woff2 new file mode 100644 index 0000000..33b0369 Binary files /dev/null and b/src/fonts/futura/Futura-CondensedExtraBold.woff2 differ diff --git a/src/fonts/futura/Futura-CondensedMedium.woff b/src/fonts/futura/Futura-CondensedMedium.woff new file mode 100644 index 0000000..7fc0d95 Binary files /dev/null and b/src/fonts/futura/Futura-CondensedMedium.woff differ diff --git a/src/fonts/futura/Futura-CondensedMedium.woff2 b/src/fonts/futura/Futura-CondensedMedium.woff2 new file mode 100644 index 0000000..fc8b8a4 Binary files /dev/null and b/src/fonts/futura/Futura-CondensedMedium.woff2 differ diff --git a/src/fonts/futura/Futura-Medium.woff b/src/fonts/futura/Futura-Medium.woff new file mode 100644 index 0000000..68a5201 Binary files /dev/null and b/src/fonts/futura/Futura-Medium.woff differ diff --git a/src/fonts/futura/Futura-Medium.woff2 b/src/fonts/futura/Futura-Medium.woff2 new file mode 100644 index 0000000..9e7f7f2 Binary files /dev/null and b/src/fonts/futura/Futura-Medium.woff2 differ diff --git a/src/fonts/futura/Futura-MediumItalic.woff b/src/fonts/futura/Futura-MediumItalic.woff new file mode 100644 index 0000000..82b4af1 Binary files /dev/null and b/src/fonts/futura/Futura-MediumItalic.woff differ diff --git a/src/fonts/futura/Futura-MediumItalic.woff2 b/src/fonts/futura/Futura-MediumItalic.woff2 new file mode 100644 index 0000000..0d39b7e Binary files /dev/null and b/src/fonts/futura/Futura-MediumItalic.woff2 differ diff --git a/src/fonts/futura/demo.html b/src/fonts/futura/demo.html new file mode 100644 index 0000000..5ba79c2 --- /dev/null +++ b/src/fonts/futura/demo.html @@ -0,0 +1,308 @@ + + + + + + + + + Transfonter demo + + + + +
+
+

Futura Bold

+ 
.your-style {
+    font-family: 'Futura';
+    font-weight: bold;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="Futura-Bold.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

Futura Condensed ExtraBold

+ 
.your-style {
+    font-family: 'Futura';
+    font-weight: bold;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="Futura-CondensedExtraBold.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

Futura Condensed Medium

+ 
.your-style {
+    font-family: 'Futura';
+    font-weight: 500;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="Futura-CondensedMedium.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

Futura Medium Italic

+ 
.your-style {
+    font-family: 'Futura';
+    font-weight: 500;
+    font-style: italic;
+}
+ 
+<link rel="preload" href="Futura-MediumItalic.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+

Futura Medium

+ 
.your-style {
+    font-family: 'Futura';
+    font-weight: 500;
+    font-style: normal;
+}
+ 
+<link rel="preload" href="Futura-Medium.woff2" as="font" type="font/woff2" crossorigin>
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+ +
+ + diff --git a/src/fonts/futura/stylesheet.css b/src/fonts/futura/stylesheet.css new file mode 100644 index 0000000..90d81fb --- /dev/null +++ b/src/fonts/futura/stylesheet.css @@ -0,0 +1,45 @@ +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-Bold.woff2') format('woff2'), + url('/src/fonts/futura/Futura-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-CondensedExtraBold.woff2') format('woff2'), + url('/src/fonts/futura/Futura-CondensedExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-CondensedMedium.woff2') format('woff2'), + url('/src/fonts/futura/Futura-CondensedMedium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-MediumItalic.woff2') format('woff2'), + url('/src/fonts/futura/Futura-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-Medium.woff2') format('woff2'), + url('/src/fonts/futura/Futura-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + diff --git a/src/fonts/georgia/example.html b/src/fonts/georgia/example.html new file mode 100644 index 0000000..2841fbf --- /dev/null +++ b/src/fonts/georgia/example.html @@ -0,0 +1,19 @@ + + + + + + + + + +

Generated from: http://www.cufonfonts.com


+

AaBbCcDdEeFfGgHhŞşIıİi Example

+

AaBbCcDdEeFfGgHhŞşIıİi Example

+

AaBbCcDdEeFfGgHhŞşIıİi Example

+

AaBbCcDdEeFfGgHhŞşIıİi Example

+ + + + \ No newline at end of file diff --git a/src/fonts/georgia/georgia.woff b/src/fonts/georgia/georgia.woff new file mode 100644 index 0000000..c90eda2 Binary files /dev/null and b/src/fonts/georgia/georgia.woff differ diff --git a/src/fonts/georgia/georgiab.woff b/src/fonts/georgia/georgiab.woff new file mode 100644 index 0000000..1812bcf Binary files /dev/null and b/src/fonts/georgia/georgiab.woff differ diff --git a/src/fonts/georgia/georgiai.woff b/src/fonts/georgia/georgiai.woff new file mode 100644 index 0000000..cea6c53 Binary files /dev/null and b/src/fonts/georgia/georgiai.woff differ diff --git a/src/fonts/georgia/georgiaz.woff b/src/fonts/georgia/georgiaz.woff new file mode 100644 index 0000000..3f051ae Binary files /dev/null and b/src/fonts/georgia/georgiaz.woff differ diff --git a/src/fonts/georgia/style.css b/src/fonts/georgia/style.css new file mode 100644 index 0000000..3be77b9 --- /dev/null +++ b/src/fonts/georgia/style.css @@ -0,0 +1,32 @@ +/* #### Generated By: http://www.cufonfonts.com #### */ + + @font-face { + font-family: 'Georgia Regular'; + font-style: normal; + font-weight: normal; + src: local('Georgia Regular'), url('georgia.woff') format('woff'); + } + + + @font-face { + font-family: 'Georgia Italic'; + font-style: normal; + font-weight: normal; + src: local('Georgia Italic'), url('georgiai.woff') format('woff'); + } + + + @font-face { + font-family: 'Georgia Bold'; + font-style: normal; + font-weight: normal; + src: local('Georgia Bold'), url('georgiab.woff') format('woff'); + } + + + @font-face { + font-family: 'Georgia Bold Italic'; + font-style: normal; + font-weight: normal; + src: local('Georgia Bold Italic'), url('georgiaz.woff') format('woff'); + } \ No newline at end of file diff --git a/src/img/ooptimo-image.jpg b/src/img/ooptimo-image.jpg new file mode 100644 index 0000000..6406e56 Binary files /dev/null and b/src/img/ooptimo-image.jpg differ diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss new file mode 100644 index 0000000..c4b6428 --- /dev/null +++ b/src/scss/_fonts.scss @@ -0,0 +1,60 @@ +@font-face { + font-family: 'Georgia'; + font-style: normal; + font-weight: normal; + src: url('/src/fonts/georgia/georgia.woff') format('woff'); +} + +@font-face { + font-family: 'Georgia'; + font-style: italic; + font-weight: normal; + src: url('/src/fonts/georgia/georgiai.woff') format('woff'); +} + +@font-face { + font-family: 'Georgia'; + font-style: normal; + font-weight: bold; + src: url('/src/fonts/georgia/georgiab.woff') format('woff'); +} + +@font-face { + font-family: 'Georgia'; + font-style: italic; + font-weight: bold; + src: url('/src/fonts/georgia/georgiaz.woff') format('woff'); +} + +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-Bold.woff2') format('woff2'), + url('/src/fonts/futura/Futura-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-MediumItalic.woff2') format('woff2'), + url('/src/fonts/futura/Futura-MediumItalic.woff') format('woff'); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: 'Futura'; + src: url('/src/fonts/futura/Futura-Medium.woff2') format('woff2'), + url('/src/fonts/futura/Futura-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +:root { + --fontFamilyGeorgia: 'Georgia', serif; + --fontFamilyFutura: 'Futura', sans-serif; +} + diff --git a/src/scss/main.scss b/src/scss/main.scss index e69de29..69e5444 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -0,0 +1,346 @@ +@import "fonts"; + +// Define CSS variables +:root{ + --primaryColor: #202F66; + --secondaryColor: #6ED5B8; + --fontColor: #202F66; + --fontColorLight: #FFFFFF; + --generalPadding: 20px; + --menuBarHeight: 80px; + --mainlogoWidth: 140px; + --footerMainHeight: 314px; + --footerSubHeight: 92px; +} + +// Global styles to improve consistency across browsers +*, +*::before, +*::after { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + outline: 0; + box-sizing: border-box; +} + +// Reset default margins and paddings +html, body, p, h1, h2, h3, h4, h5, h6 { + margin: 0; + padding: 0; +} + +// Set images and media to be responsive +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +// Inherit fonts for form elements +button, input, textarea, select { + font: inherit; +} + +a { + color: inherit; +} + +// Layout helpers +.container { + max-width: 1400px; + margin: auto; + padding: 0 20px; + position: relative; + width: 100%; + .row{ + display: flex; + flex-wrap: wrap; + width: 100%; + .col{ + padding: 0 10px; + flex: 1; + } + } +} + +// Button styles +.btn{ + all: unset; + border: none; + border-radius: 10px; + padding: 21px 56px; + font-family: var(--fontFamilyFutura); + font-size: 18px; + font-weight: 700; + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1); + cursor: pointer; + display: inline-block; + &.btn-primary{ + background-color: var(--secondaryColor); + color: var(--primaryColor); + } +} + +// Body styles +body { + font-family: var(--fontFamilyFutura); + background-color: var(----fontColorLight); + color: var(--fontColor); + line-height: 1.5; +} + +// Header styles +header{ + position: fixed; + width: 100%; + z-index: 2; + .top-bar{ + max-width: 1400px; + margin: auto; + padding: var(--generalPadding) var(--generalPadding); + display: flex; + justify-content: center; + align-items: flex-end; + .menu-bar{ + position: relative; + background-color: var(--secondaryColor); + display: flex; + width: 100%; + max-width: 934px; + min-height: var(--menuBarHeight); + padding: 0px 45px; + justify-content: flex-start; + align-items: center; + border-radius: 100px; + .logo{ + color: var(--primaryColor); + width: var(--mainlogoWidth); + height: auto; + } + } + } +} + +// Main styles +main{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + background: linear-gradient(180deg, rgba(126, 135, 167, 0) -10.51%, rgba(126, 135, 167, 0.53) 6.07%, #202F66 70.16%); + .hero{ + text-align: center; + padding: calc(var(--menuBarHeight) + var(--generalPadding) * 2) var(--generalPadding) calc(var(--generalPadding) * 2) var(--generalPadding); + .col{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 35px; + } + h1{ + font-family: var(--fontFamilyGeorgia); + font-size: 45px; + line-height: 120%; + font-weight: 400; + color: var(--fontColorLight); + max-width: 660px; + span{ + font-family: var(--fontFamilyFutura); + font-weight: 700; + color: var(--secondaryColor); + } + } + h2{ + font-family: var(--fontFamilyFutura); + font-size: 22px; + line-height: 125%; + font-weight: 500; + color: var(--fontColorLight); + max-width: 450px; + } + } +} + +// Footer styles +footer{ + font-size: 16px; + line-height: 130%; + color: var(--primaryColor); + .footer-mainfooter{ + display: flex; + justify-content: center; + align-items: center; + min-height: var(--footerMainHeight); + background-color: var(----fontColorLight); + padding: var(--generalPadding) 0; + text-align: left; + .container{ + .row{ + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + .col{ + display: flex; + flex-direction: column; + gap: 20px; + .footer-title{ + font-family: var(--fontFamilyGeorgia); + font-size: 30px; + line-height: 110%; + font-weight: 400; + padding-top: 25px; + } + + .link-address{ + text-decoration: none; + } + + ul{ + list-style: none; + padding: 9px 0 0 0; + margin: 0; + li{ + margin-bottom: 10px; + } + } + + .social-links{ + display: flex; + flex-direction: row; + justify-content: space-between; + gap: 20px; + a{ + width: 38px; + height: 38px; + } + } + + &:last-child{ + margin: calc(var(--generalPadding)*2) var(--generalPadding) var(--generalPadding) var(--generalPadding); + } + } + } + } + + .logo{ + width: 220px; + height: auto; + } + } + .footer-subfooter{ + display: flex; + justify-content: center; + align-items: center; + min-height: var(--footerSubHeight); + background-color: var(--primaryColor); + padding: 10px 0; + text-align: center; + font-size: 14px; + .col{ + display: flex; + justify-content: center; + align-items: center; + .logo{ + width: 150px; + height: auto; + color: var(--fontColorLight); + } + } + } +} + +// Desktop styles +@media (min-width: 1024px) { + :root{ + --menuBarHeight: 112px; + --mainlogoWidth: 182px; + --footerMainHeight: 314px; + } + + .container { + .row{ + .col{ + &.col-3 { + flex: 0 0 25%; + max-width: 25%; + } + &.col-12 { + flex: 0 0 100%; + max-width: 100%; + } + } + } + } + + .btn{ + transition: all 0.2s ease; + &.btn-primary{ + &:hover{ + background-color: var(--fontColorLight); + color: var(--secondaryColor); + } + } + } + + header{ + .top-bar{ + .menu-bar{ + .logo{ + transition: all 0.2s ease; + &:hover{ + color: var(--fontColorLight); + } + } + } + } + } + + main{ + .hero{ + h1{ + font-size: 60px; + line-height: 107%; + max-width: 950px; + } + } + } + + footer{ + .footer-mainfooter{ + .container{ + .row{ + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + text-align: left; + .col{ + gap: 30px; + order: 2; + .social-links{ + justify-content: flex-start; + a{ + transition: all 0.2s ease; + &:hover{ + transform: scale(1.1); + } + } + } + + &:not(:last-child){ + p{ + line-height: 190%; + padding-top: 9px; + } + } + &:last-child{ + margin: 0; + order: 1; + } + } + } + } + } + } +} \ No newline at end of file