/*Adobe Fonts (Loos)*/ @import url("https://use.typekit.net/oga3zam.css"); /*Google Fonts (Inter)*/ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"); /*#region Global*/ /* CSS pseudoclass representing the root element of the tree of the document In this case, :root represents the element Contains our variables for colours and the like*/ :root { --text-colour: #1b140f; --unselected-colour: #1b140fbf; --white-colour: #fffefe; --white-transparent-colour: #fffefebf; --cream-bg-colour: #fbf9f2; --light-purple-colour: #bc9ee0; --purple-colour: #7e5aaf; --purple-shadow-colour: #8651c8; --light-orange-colour: #f3c2a2; --orange-colour: #ec9767; --light-yellow-colour: #f9e5ae; --yellow-colour: #f7cf56; /*allows us to include the padding and border in an elements total width & height width/height + padding + border = actual width/height of an element BECOMES width/height = actual width height & padding occurs INSIDE the box*/ box-sizing: border-box; scroll-behavior: smooth; /*Adobe Font. Sets expected global font*/ font-family: "loos-wide", sans-serif; color: var(--text-colour); } body { background-color: var(--cream-bg-colour); background-image: url(media/squiggle-bg.svg); background-size: cover; background-position: left 50% bottom -250px; background-repeat: no-repeat; margin: 0; } ul { list-style: none; } .link-button { text-decoration-line: none; background-image: linear-gradient( transparent 50%, var(--light-purple-colour) 50% ); display: flex; justify-content: center; align-items: center; gap: 12px; width: 160px; height: 24px; } .link-button span { color: var(--text-colour); font-size: 16px; font-weight: 700; letter-spacing: 0.72px; height: 16px; } h1 { font-size: 32px; font-weight: 700; line-height: 48px; letter-spacing: 1.92px; margin: 0; padding-top: 2px; } h2 { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 1.44px; margin: 0; } h3 { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 1.08px; margin: 0; } h4 { font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: 0.96px; margin: 0; } p { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 400; line-height: 18px; margin: 0; } /*#endregion Global*/ /*#region Header/Nav*/ .header { background-color: var(--cream-bg-colour); position: sticky; /*tells the browser to place is 0px from the top of the viewport*/ top: 0; width: 100%; height: 58px; /*z-index is the order that elements are stacked on eachother, the higher the number, the more elements it will be on top of*/ z-index: 99; } .nav-logo { display: inline-block; padding-left: 24px; padding-right: 16px; padding-top: 16px; } .nav-logo img { height: 32px; } .nav { /*Set positioning of nav element next to the header*/ top: 58px; /*fit content to the screen*/ width: 100%; height: 100%; /*overlay nav menu on top of main app content*/ position: fixed; /*bg colour for mobile*/ background-color: var(--cream-bg-colour); /*clips the overflow of links, hides the rest of the content*/ overflow: hidden; } .menu a{ /*displays element as a block element - meaning it always starts on a new line and takes up the full width available*/ display: block; padding: 16px; color: var(--unselected-colour); text-decoration-line: none; } /*When hovering over a link...*/ .menu a:hover { color: var(--text-colour); } /*Makes nav invisible and sets the transition for the slide-out menu*/ .nav{ /*content larger than this height will overflow*/ /*thats why the logo isn't part of the nav*/ max-height: 0; /*the element we are changing, the time it takes to change, the speed curve*/ transition: max-height .5s ease-out; } /*#region Menu Buttons*/ .open-menu { cursor: pointer; float: right; padding-left: 16px; padding-right: 24px; padding-top: 24px; padding-bottom: 24px; } .close-menu { cursor: pointer; float: right; display:none; padding-left: 16px; padding-right: 24px; padding-top: 24px; padding-bottom: 24px; } .side-menu { display: none; } /*Toggling the menu*/ .side-menu:checked ~ .nav{ max-height: 100%; } .side-menu:checked ~ .open-menu { display: none; } .side-menu:checked ~ .close-menu { display: flex; } /*#endregion Menu Buttons*/ /*#endregion Header/Nav*/ /*#region Homepage Exclusive*/ /*#region Business Card*/ .business-card { /*Sets the direction of the flex containers main axis*/ display: inline-flex; flex-direction: column; /*width: calc(100% - 24px);*/ align-items: center; /*top, right, bottom, left*/ padding: 24px 24px 0px 24px; } .business-card-line { /*enables the flexbox layout mode, allowing you to manipulate elements' alignment, spacing, and order within a container*/ display: flex; align-items: center; width: 100%; /*Distributed alignment: Distribute items evenly. The first item is flush with the start, the last item is flush with the end*/ justify-content: space-between; margin-top: 0px; margin-bottom: 20px; } /*Representing the third item marked with this class name*/ .business-card-line:nth-child(3) { margin-bottom: 40px; } /*Paragraphs marked with this class name only*/ .business-card-line p { font-family: "loos-wide", sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 28px; letter-spacing: 0.72px; margin-top: 0px; margin-bottom: 0px; padding-right: 16px; } .business-card-line img { height: 60px; width: 60px; } .business-card mark { background-color: transparent; background-image: linear-gradient( transparent 37%, var(--light-purple-colour) 36% ); background-position: 10px 0; background-size: 100%; background-repeat: no-repeat; color: var(--text-colour); padding-right: 8px; /*When the whitespace is collapsed it doesn't move to the next line*/ white-space: nowrap; } .business-card :nth-child(2) mark { background-image: linear-gradient( transparent 37%, var(--light-orange-colour) 36% ); } .business-card :nth-child(3) mark { background-image: linear-gradient( transparent 37%, var(--yellow-colour) 36% ); } /*#endregion Business Card*/ /*#region Projects*/ .projects { display: flex; /*Horizontal alignment*/ justify-content: center; /*Vertical alignment*/ align-items: center; /*flex-direction: row;*/ /*Size of the space between the projects and the phone if it appears*/ /*TODO: check this size later*/ gap: 24px; margin: 24px 24px 24px 24px; } .project-list { display: flex; flex-direction: column; /*Size of the space between the project buttons*/ gap: 16px; } .project-selector { display: flex; flex-direction: column; width: auto; /*Gap between elements inside this selector*/ gap: 8px; background-color: var(--white-transparent-colour); border: 1px solid var(--purple-colour); border-right: none; border-bottom: none; border-radius: 16px; box-shadow: 6px 6px 0px 0px var(--purple-shadow-colour); color: var(--text-colour); text-decoration-line: none; /*Affects the transition that will happen to the colours within on hover*/ transition: background-color 0.5s, color 0.5s; padding: 12px 16px 24px 16px; } .project-selector:hover { background-color: var(--light-purple-colour); color: var(--white-colour); } .project-image { width: 100%; /*The image keeps its aspect ratio, but is resized to fit within the given dimension*/ object-fit: contain; } .project-number-and-title { display: flex; align-items: center; gap: 8px; } .project-number { font-family: "loos-extended", "loos-wide", sans-serif; font-size: 16px; font-weight: 700; line-height: 24px; text-align: center; width: 56px; } .project-title { font-size: 16px; font-weight: 700; line-height: 20px; letter-spacing: 1.2px; padding-top: 4px; } .project-client { font-size: 14px; font-weight: 400; line-height: 16px; letter-spacing: normal; } .project-tag-container { display: flex; flex-wrap: wrap; gap: 8px; } .project-tag { font-family: "Inter", sans-serif; font-size: 14px; line-height: 16px; color: var(--text-colour); background-color: var(--white-colour); border: 1px solid var(--purple-colour); border-right: none; border-bottom: none; border-radius: 32px; box-shadow: 2px 2px 0px 0px var(--purple-shadow-colour); padding: 2px 8px 2px 8px; } .project-screenshot { display: none; } /*#endregion Projects*/ /*#endregion Homepage Exclusive*/ /*#region Folio*/ .folio-segments { display: flex; justify-content: center; align-items: center; /*size of the space between the projects and the blobimage should it appear*/ /*TODO: check this size later*/ gap: 24px; margin: 24px 24px 24px 24px; } .folio-list { display: flex; flex-direction: column; gap: 12px; } .folio-selector { display: flex; flex-direction: row; justify-content: left; align-items: center; width: auto; gap: 8px; border-radius: 20px; background-color: var(--white-transparent-colour); color: var(--text-colour); text-decoration-line: none; /*Affects the transition that will happen to the colours within on hover*/ transition: background-color 0.5s; /*top, right, bottom, left*/ padding: 8px 12px 12px 8px; } .folio-selector:hover { background-color: var(--white-colour); } .folio-icon { width: 56px; height: 56px; } .folio-title-caption-tags { display: flex; flex-direction: column; align-items: left; } .folio-title { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 1.2px; } .folio-caption { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 300; line-height: 28px; letter-spacing: 0.48px; } .folio-blob { display: none; } /*#endregion Folio*/ /*#region DailyUI*/ .dailyui { display: flex; flex-direction: column; align-items: center; gap: 48px; margin-top: 48px; width: 100%; } .dailyui-header { display: flex; flex-direction: column; margin-left: 24px; margin-right: 24px; } .dailyui-header > p { font-size: 18px; font-weight: 300; line-height: 20px; } .dailyui-header > p:last-of-type { font-weight: 500; } .dailyui-header > .link-button { align-self: end; margin-top: 12px; } .dailyui-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .dailyui-item { color: var(--text-colour); text-decoration-line: none; background-color: var(--white-transparent-colour); display: flex; flex-direction: column; position: relative; width: 180px; border: 1px solid var(--purple-colour); border-radius: 8px; box-shadow: 4px 4px 0px 0px var(--purple-shadow-colour); transition: background-color 0.5s; } .dailyui-item:hover { background-color: var(--light-purple-colour); color: var(--white-colour); } .dailyui-item > :first-child { display: flex; justify-content: center; align-items: center; gap: 8px; height: 267px; padding: 8px 8px 8px 8px; } .dailyui-item img { width: 180px; height: 267px; border-radius: 8px; border: 1px solid var(--purple-shadow-colour); } .dailyui-item > :nth-child(2) { display: inline-grid; align-items: center; justify-items: center; padding: 4px 4px 4px 4px; height: auto; } .dailyui-item > :nth-child(2) > :first-child { font-family: "loos-extended", "loos-wide", sans-serif; font-size: 14px; font-weight: 700; } .dailyui-item > :nth-child(2) h4{ margin: 0px; text-align: center; } .dailyui-item > :last-child { font-family: "Inter", sans-serif; font-size: 12px; padding: 0px 8px 16px 8px; height: 100%; align-content: center; text-align: center; } /*Page Numbers*/ .dailyui-page-select { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 12px 0 48px 0; justify-content: center; } .dailyui-page-select > a { color: var(--unselected-colour); font-family: "loos-extended", "loos-wide", sans-serif; font-size: 18px; font-weight: 700; text-decoration-line: none; display: flex; justify-content: center; align-items: center; width: 48px; height: 24px; transition: color 0.5s; } .dailyui-page-select > a:hover { color: var(--text-colour); } .dailyui-page-select > a.active { color: var(--text-colour); background-image: linear-gradient( transparent 50%, var(--light-purple-colour) 50% ); } /*#endregion DailyUI*/ /*#region About*/ #about { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; margin: 60px 24px 40px 24px; } .about-me { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 1280px; } .about-me-portrait { width: 100%; max-width: 240px; } .about-me-para-btns { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; max-width: 800px } .about-me-btns { display: flex; flex-wrap: wrap; justify-content: center; max-width: 160px; gap: 24px; } .slide-carousel { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; height: 340px; width: 100%; max-width: 1280px; } .slide-carousel .slides { box-sizing: border-box; display: flex; align-items: center; justify-content: start; column-gap: 8px; overflow-x: scroll; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100%; } .testimonials-item { box-sizing: border-box; min-width: 300px; max-width: 300px; max-height: 340px; display: block; justify-content: center; padding: 16px 16px 20px 16px; border-bottom: 1px solid #B7B4AA; background-color: var(--white-colour); border-radius: 8px; box-shadow: 0px 2px 4px 0px #B7B4AA; color: var(--text-colour); } .testimonials-person img { width: 36px; height: 36px; border-radius: 50%; } .testimonials-quote { display: flex; flex-direction: row; gap:12px; padding-bottom: 12px; } .testimonials-quote > :first-child { align-self: flex-start; } .testimonials-quote > :nth-child(2){ font-size: 14px; line-height: 16px; } .testimonials-quote > :nth-child(3) { align-self: flex-end; } .testimonials-person { display: flex; flex-direction: row; align-items: center; gap: 8px; } /*#endregion About*/ /*#region Available for work*/ .available-for-work { display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; gap: 8px; margin-left: 24px; margin-right: 24px; padding-bottom: 40px; margin-bottom: auto; } .available-for-work > :first-child { font-family: "loos-extended", "loos-wide", sans-serif; font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.72px; } .available-for-work mark { background-color: transparent; background-image: linear-gradient( transparent 43%, var(--light-purple-colour) 42% ); background-position: 20px 0; background-size: 100%; background-repeat: no-repeat; padding-right: 9px; display: inline-block; word-break: break-all; } .available-for-work a { color: var(--text-colour); font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: 0.72px; text-decoration-line: underline; } /*#endregion Available for work*/ /*#region Footer*/ footer { align-items: center; text-align: center; background-color: var(--cream-bg-colour); padding-top: 24px; padding-bottom: 32px; } .footer-links > a { display: block; color: var(--unselected-colour); text-decoration-line: none; margin-bottom: 32px; } .footer-links > a:hover { color: var(--text-colour); } /*#endregion Footer*/ /*#region Desktop Responsive*/ @media (min-width: 800px) { /*#region Header/Nav*/ .header { height: 84px; } .nav-logo img { height: 52px; } .nav { max-height: none; top: 0; position: relative; float: right; width: fit-content; background-color: transparent; padding-right: 24px; } .menu li { float: right; } .menu a { padding-left: 16px; padding-right: 0px; } .menu a:hover { color: var(--text-colour); } .open-menu { display: none; } .close-menu { display: none; } /*#endregion Header/Nav*/ /*#region Business Card*/ .business-card { /*width: calc(100% - 360px);*/ padding: 60px 120px 0px 120px; } .business-card-line { align-content: center; margin-bottom: 40px; } .business-card-line p { font-size: 48px; line-height: 56px; letter-spacing: 2.88px; } .business-card-line img { height: 100px; width: 100px; } .view-my-work { margin-bottom: 40px; } .view-my-work img { width: 180px; } /*#endregion Business Card*/ /*#region Projects*/ .project-image { display: none; } .project-screenshot { display: inline-flex; background-image: url(media//home/projects/iphone-clay.webp); background-size: cover; background-repeat: no-repeat; position: relative; width: 305px; height: 646px; } .project-screenshot img { position: absolute; top: 13.5px; left: 12.6px; height: 620px; } /*#endregion Projects*/ /*#region Folio*/ .folio-blob { display: inline-flex; position: relative; width: 300px; height: 545px; } .folio-blob img { position: absolute; width: 300px; height: 545px; } /*#endregion Folio*/ /*#region DailyUI*/ .dailyui { display: flex; flex-direction: column; align-items: center; gap: 48px; margin-top: 48px; } .dailyui-grid { display: flex; flex-wrap: wrap; max-width: 984px; } .dailyui-item { width: fit-content; height: fit-content; } .dailyui-item img { width: 200px; height: 356px; } .dailyui-item > :first-child { height: auto; } /*#endregion DailyUI*/ /*#region Available for Work*/ .available-for-work { gap: 40px; padding-bottom: 40px; } .available-for-work > :first-child { font-size: 48px; font-weight: 700; line-height: 56px; letter-spacing: 2.88px; } .available-for-work mark { padding-right: 18px; } .available-for-work a { font-size: 32px; font-weight: 700; line-height: 50px; letter-spacing: 1.92px; } /*#endregion Available for Work*/ /*#region Footer*/ footer { height: 64px; display: flex; flex-direction: row-reverse; align-content: center; padding-top: 0px; padding-bottom: 0px; } .footer-logo { justify-self: left; padding-left: 24px; } .footer-logo > img { height: 32px; /*test*/ } .footer-links { position: relative; display: flex; width: 100%; padding-right: 24px; justify-content: right; } .footer-links > a { padding-left: 16px; margin-bottom: 0px; } /*#endregion Footer*/ } /*#endregion Desktop Responsive*/