@font-face { font-family: montserrat; src: url(../fonts/montserrat-variablewght.ttf); } /* --- VERSION LOG --- v20231024: launch v2.1 v20240508: background hero img added --> --- COLORS --- tints&shades: https://maketintsandshades.com/#ffa500 main color: #ffa500 orange light main: #fff6e6 90% lighter tint of main color - for light text gray color 1: #22222e darkest gray gray color 2: #3e3e4c 2nd darkest gray - for dark text + footer background gray color 3: #3c3c4e lighter dark gray gray color 4: #747484 lightest dark gray - for section background gray color 5: #fffffa very light gray - for section background accent color: none */ * { /* global reset */ padding: 0; margin: 0; box-sizing: border-box; } html { /* default font size = 16px, unless otherwise set in the browser /* 1 rem = root element font size = default font size = 16px /* font-size: 62.5%; /* equals 10px for easy calculation AND font-size will be scalable */ overflow-x: hidden; /* prevents scrolling when content exceeds the viewport - also needed on body */ scroll-behavior: smooth; /* set on the element enables smooth scrolling for the whole page */ } body { /* reset any browser defaults that may break layout */ font-family: montserrat, sans-serif; font-weight: 300; color: #3e3e4c; /* gray color 2: 2nd darkest gray for text */ line-height: 1.0; /* default is 1.2 on desktop browsers, but may depend on the element's font-family */ /* 1.5 to 2.0 recommended for normal text 16-32px - below 1.5 for bigger text */ /* the smaller or longer the text, the larger the line height should be */ overflow-x: hidden; /* prevents scrolling when content exceeds the viewport - also on html */ } .content-container { max-width: 75rem; /* 1140 to 1200px or equivalent in rem = a general convention */ margin-left: auto; /* for center alignment */ margin-right: auto; /* for center alignment */ } .flex-container { display: flex; flex-wrap: nowrap; /* wrap allows elements on multiple lines without overflow vs. nowrap forces all items on 1 line, may cause content overflow out of their container */ } .branded-dot { color: #ffa500; } main { /* identifies the main content of the page, up to the footer */ /* not for content repeated on other pages, like a footer */ } section { /* a generic part of any document - in general, a page holds multiple sections */ padding: 2rem 0 0 0; } h1 { /* section headlines */ margin: 0; padding: 2rem 10% 4rem; font-size: 2.75rem; /* 2.75rem = 44px */ font-weight: 600; text-align: center; } h2 { /* not used */ } h3 { /* numbering of steps */ font-size: 4.5rem; /* 4.5rem = 72px */ font-weight: 500; color: #dddddd; margin: 0; padding: 1rem 0 0 0; } h4 { /* features+benefits items titles */ /* margin: 0;*/ padding: 1rem 0 0 0; } h5 { /* small font size uppercase at section headings */ padding: 0 10%; color: #ffa500; font-size: 0.9375rem; /* 15px */ font-weight: 600; text-align: center; text-transform: uppercase; } h6 { /* not used */ } p { margin: 1rem 0; line-height: 1.5; /* 1.5 to 2.0 recommended for normal txt 16-32px - below 1.5 for bigger txt */ } a { text-decoration: none; } .underline-dashed { /* makes links visible */ text-decoration: underline; text-decoration-style: dashed; color: inherit; transition: all 0.25s; } .underline-dashed:hover, .underline-dashed:active { color: #ffa500; } ul { list-style: none; /* default list markup is not desired */ /* overflow: hidden; /* to prevent 'li' elements from going outside of the list [ref:W3Schools] */ /* margin-left: 2em; /* to avoid the styling elements to be invisible because outside the element */ } ol { /* ordered list: numbers for legal info page */ margin-left: 2em; /* to avoid the styling elements to be invisible because outside the element */ } li { /* list item global styling */ } strong { /* has semantic meaning and is recommended over the older tags for bold text */ font-weight: 600; } em { /* has semantic meaning and is recommended over the older tags for italic text */ } img { max-width: 100%; } header { box-shadow: 0 8px 18px -8px #dddddd; /* negative 'blur' eliminates shadow at left/right */ } .site-header { display: flex; /* flex container site branding (logo+slogan) and main-nav */ justify-content: space-between; /* with 2 elements: each is pushed to the sides */ align-items: center; /* for vertical alignment of both elements: logo and main nav */ padding: 0.5rem 1rem; font-size: 1rem; } .site_logo { height: auto; font-size: 3.2rem; color: #ffa500; } .site_slogan { font-size: 0.75rem; color: grey; } .main-nav-ul { display: flex; /* places the menu items side-by-side */ /* gap: 2rem */ /* disabled: gap on flex items is not supported by Safari */ } .main-nav-ul li { /* because gap on flex items not supported by Safari */ margin: 0 0 0 2rem; } .main-nav-ul a:link, .main-nav-ul a:visited { /* because gap on flex items not supported by Safari */ font-weight: 400; color: #3e3e4c; transition: all 0.25s; } .main-nav-ul a:hover, .main-nav-ul a:active { color: #ffa500; } .nav-cta-btn { background-color: #ffa500; padding: 0.5rem 1rem; color: white; } .main-nav-ul a:link.nav-cta-btn, /* specific mark-up when both classes apply at same time */ .main-nav-ul a:visited.nav-cta-btn { color: white; font-weight: 500; } .main-nav-ul a:hover.nav-cta-btn, /* specific mark-up when both classes apply at same time */ .main-nav-ul a:active.nav-cta-btn { color: #ffa500; background-color: #747484; /* gray color 4: #747484 lighest gray - for section background */ } .main-nav-current-page { border-bottom: 2px solid #ffa500; } .btn-mobile-nav { background: none; /* removes default background from buttons */ -webkit-backdrop-filter: blur(2px); /* webkit for support in Safari */ backdrop-filter: blur(2px); /* blurs the transparent background */ padding: 0.5rem 1rem ; border: none; /* removes default border around buttons */ border-radius: 50%; cursor: pointer; display: none; /* made visible at mobile version */ } .icon-mobile-nav { /* styles the mobile nav icons dots and x */ width: 3rem; height: 3rem; position: relative; /* fixes the icon is hidden by the mobile nav */ } .icon-mobile-nav[src="icons/x-thin_ffa500.svg"], .icon-mobile-nav[src="icons/x-regular_ffa500.svg"], .icon-mobile-nav[src="icons/x-bold_ffa500.svg"] { display: none; } .hero-section { background: linear-gradient(to right, rgba(255, 246, 230, 0.0), rgba(255, 246, 230, 0.0) 100%), url("../images/hero-bg-person.jpg"); background-size: cover, 26%; background-position: center, 96% bottom; background-repeat: no-repeat; } .hero-headline { margin-right: 10%; padding: 4rem 10% 1rem; font-size: 3.5rem; /* 3.5rem = 56px */ font-weight: 600; text-align: center; } .hero-subline { margin: 0; /* removes withespace caused by overall setting margin: 1rem 0; */ margin-right: 10%; padding: 3rem 20%; font-size: 1.25rem; line-height: 1.3; font-weight: 200; text-align: center; } .features-section, .features-section h1, /* avoids transparent h1 in some cases */ .benefits-section, .benefits-section h1 { /* avoids transparent h1 in some cases */ background-color: #dddddd; /* #f4f4f4 = light gray */ } .features-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 0 1rem 8rem; gap: 1px; } .benefits-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 0 2rem 6rem; gap: 1px; } .features-grid-item, .benefits-grid-item { padding: 4%; background-color: #ffffff; text-align: center; } .features-grid-item img, /* features icons */ .benefits-grid-item img { /* benefits icons */ width: 3rem; height: 3rem; margin-top: 1rem; } .steps-section h1 { /* avoids transparent h1 in some cases */ background-color: #ffffff; } .steps-grid { padding: 1rem 1rem 4rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.0rem; } .steps-item { border-right: 1px solid #ffa500; border-bottom: 1px solid #ffa500; padding: 0 1rem; } .steps-item-last { /* last item on row needs no right border */ border-right: none; } .steps-item-last-row { /* items on bottom row need no bottom border */ border-bottom: none; } .portfolio-section, .portfolio-section h1 { /* avoids transparent h1 in some cases */ background-color: #fff6e6; /* #fff6e6 95% lighter tint of main color - for light text */ } .portfolio-case { padding: 4rem 0; } .portfolio-case .flex-container { align-items: center; /* vertical center alignment of case txt & img */ } .testimonial-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; margin: 0 0 1.5rem 0; padding: 0.1rem 1rem; background-color: #fff6e6; color: #3e3e4c; font-size: .875rem; height: auto; } .testimonial-grid-item-quote { grid-column: 1 / 3 ; margin: 1rem 0 0 0; } .testimonial-author { font-size: .8125rem; } .testimonial-grid img { /* rating stars */ margin: 0 auto 0; /* same bottom margin as txt */ } #case-velov { /* adds the theme color of the case to the background */ background-color: #5c84b8; /* #5c84b8 = velo-v blue | #b8905c = velo-v gold */ color: #fff6e6; /* 95% lighter tint of main color - for light text */ } #case-jeanvin { /* add the theme color of the case to the background */ background-color: #9B0047; /* jean-vin winered */ color: #fff6e6; /* 95% lighter tint of main color - for light text */ } .flex-case-item-left { /* this container holds the TXT */ flex: 0 0 40%; margin: 0; padding: 1% 2% 2% 1rem; text-align: justify; } .flex-case-item-right { /* this container holds the IMG */ flex: 0 0 60%; margin: 0; padding: 2%; } .flex-case-item-right-mobile { /* this container holds the IMG */ display: none; padding: 2%; } .flex-case-item-left-variant { /* this container holds the IMG */ flex: 0 0 60%; margin: 0; padding: 2%; } .flex-case-item-right-variant { /* this container holds the TXT */ flex: 0 0 40%; margin: 0; padding: 1% 1rem 2% 2%; text-align: justify; } .flex-case-item-right img, .flex-case-item-right-mobile img, .flex-case-item-left-variant img { display: block; /* for center-alignment */ margin: auto; /* for center-alignment */ object-fit: contain; /* maintains aspect ratio of images */ box-shadow: 10px 10px 40px #222222; transition: all .25s; } .flex-case-item-right img:hover, .flex-case-item-right-mobile img:hover, .flex-case-item-left-variant img:hover { transform: scale(1.02); /* opacity: 0.75;*/ /* optional: leaks the background theme color over the img */ } .to-website_btn { display: inline-flex; /* makes btn flex to vertical align the chevron in line with text */ align-items: center; /* for vertical alignment of the chevron and text */ border: 1px solid #ffa500; border-radius: 0px; padding: 0.4rem 1rem; color: #fff6e6; /* 95% lighter tint of main color - for light text */ transition: all 0.25s; } .to-website_btn:hover { border-color: #747484; /* gray color 4: #747484 lighest gray - for section background */ background-color: #747484; /* gray color 4: #747484 lighest gray - for section background */ } .contact-info { flex: 0 0 50%; padding: 1rem; } .contact-info a:link, .contact-info a:visited { color: inherit; line-height: 2rem; transition: all 0.25s; /* transition :hover to #ffa500 set @class footer a:hover below */ } .contact_icon { height: 1rem; margin-right: 0.5rem; } .social_icon { height: 2.5rem; transition: all 0.25s; } .social_icon:hover, .social_icon:active { background-color: #ffa500; } .flex-contact-item-2 { margin: 0 auto 0; } .profile-img { box-shadow: 0 8px 10px 0px #eee; } .contact-form { padding: 2rem 1rem 0; } .contact-form h4 { /* made visible at mobile version */ display: none; } input, textarea { width: 100%; /* how much space to take form the parent element */ display: block; font-family: inherit; /* input elements don't inherit font-family by default ! */ font-size: .875rem; color: inherit; /* input elements don't inherit font color by default ! */ background-color: #f4f4f4; padding: 0.5rem; border: none; border-bottom: 1px solid #f4f4f4; /* same as background-color */ outline: none; /* to prevent the blue outline around the inputfield when focused/clicked on */ transition: all 0.25s; } input:hover, textarea:hover, input:focus, textarea:focus { border-bottom: 1px solid #ffa500; } input::placeholder, textarea::placeholder { color: #aaa; } input[type="submit"] { background-color: #ffa500; font-size: 1rem; border: none; color: white; cursor: pointer; /* without, the cursor does not change while hovering the button */ } input[type="submit"]:hover { background-color: #747484; /* gray color 4: #747484 lighest gray - for section background */ color: white; box-shadow: none; transition: 0.4s; } .honingpotje { /* for spam filter */ display: none; } footer { padding: 2rem .8rem .25rem; background-color: #3e3e4c; font-size: .875rem; color: #fff6e6; /* #fff6e6 95% lighter tint of main color - for light text */ } .footer-3-cols { justify-content: space-between; } footer a:link, footer a:visited { color: #fff6e6; /* #fff6e6 95% lighter tint of main color - for light text */ transition: all 0.25s; } footer a:hover, footer a:active, .contact-info a:hover, .contact-info a:active { color: #ffa500; } .copyright-text { margin-top: 30%; } .btn_totop { z-index: 100; position: fixed; bottom: 15px; right: 15px; height: 3.6rem; width: 3.6rem; transition: all .3s; } .btn_totop:hover { transform: translate(0, -8px); } @media (min-width: 2000px) { .hero-section { background-size: cover, 30rem; background-position: center, 80% bottom; } } @media (max-width: 780px) { .site-header { justify-content: center; /* center alignemnt of the element */ text-align: center; /* center alignment on logo-txt and slogan-txt */ } button { /* place mobile nav at bottom of viewport */ position: fixed; bottom: 10px; z-index: 150; /* avoids overlap by mobile nav having z-index of 100 */ } .main-nav { z-index: 100; /* avoids overlap with animated btns to portfolio sites */ position: absolute; /* prevents vertical scrolling to hidden mobile nav */ top: 0; left: 0; width: 100%; height: 100vh; transform: translateY(100%); /* Y = vertical manipulation - X = horizontal manipulation*/ padding: 0 0 5rem; /* keep mobile nav away from closing button at bottom */ display: flex; /* using 'display: none', transitions/animations will no longer work */ align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.96); opacity: 0; /* 0 hides mobile nav, with 'display: none' transitions don't work */ pointer-events: none; /* disables access for mouse and keyboard */ visibility: hidden; /* disables access for screen readers */ transition: all 0.5s ease-out; } .mobile-nav-open .main-nav { position: fixed; /* makes the mobile nav appear inside viewport instead of always at top */ opacity: 1; /* 1 shows mobile nav, as with 'display: none' transitions don't work */ pointer-events: auto; /* enables access for mouse and keyboard */ visibility: visible; /* enables access for screen readers */ transform: translateY(0); position: fixed; /* makes the mobile nav appear inside viewport instead of always at top */ } .mobile-nav-open .icon-mobile-nav[src="icons/x-bold_ffa500.svg"] { display: block; height: 3.5rem; /* the dots icon ... is 3rem */ width: 3.5rem; /* the dots icon ... is 3rem */ } .mobile-nav-open .icon-mobile-nav[src="icons/dots-three-outline-fill_ffa500.svg"] { display: none; } .main-nav-ul { flex-direction: column; /* change direction to stack the nav items on top of each other */ } .main-nav-ul li { /* because gap on flex items is not supported by Safari */ margin: 1rem auto 0; /* space between links */ padding: 0.5rem; /* space inside the link element */ text-align: center; } .main-nav-ul a:link, /* omnifood does not select hover and active for font styling */ .main-nav-ul a:visited { font-size: 2.5rem; /* 2.5rem = 40px = same as .hero-headline */ font-weight: 600; /* same as h1 */ } .btn-mobile-nav { display: block; /* not displayed on desktop version */ } .hero-section { background: linear-gradient(to right, rgba(255, 246, 230, 0.0), rgba(255, 246, 230, 0.0) 100%), url("../images/hero-bg-person.jpg"); background-size: cover, 30%; background-position: center, right bottom; background-repeat: no-repeat; } .hero-headline { margin-right: 0%; padding: 2rem 10% 1rem; font-size: 2.5rem; /* 2.5rem = 40px */ } .hero-subline { margin-right: 0%; } .features-section h1, .steps-section h1, .benefits-section h1, .portfolio-section h1 { background-color: initial; } .flex-case-item-right { /* this container holds the IMG */ display: none; } .flex-case-item-right-mobile { /* this container holds the IMG */ display: flex; } .testimonial-grid-item-quote { text-align: center; } .features-grid, .benefits-grid, .steps-grid { grid-template-columns: 1fr; padding: 0 1rem 6rem; } .steps-item, .steps-item-last, .steps-item-last-row { border-bottom: 2px solid #ffa500; border-right: none; padding: 0 0.5rem; } .steps-item-last.steps-item-last-row { border: none; } .flex-container { flex-wrap: wrap; } .flex-case-item-left, .flex-case-item-left-variant, .flex-case-item-right, .flex-case-item-right-mobile, .flex-case-item-right-variant { flex: 100%; } .to-website_btn { text-align: center; font-size: 0.9375rem; /* 15px */ margin-left: 50%; transform: translate(-50%, 0); } .contact-info { flex: 100%; } .contact-form { width: 100%; } .contact-form h4 { /* not displayed on desktop version */ display: flex; width: 100%; padding: 2rem 0 1.5rem; } }