Zack Wilson 🇬🇧

\r\n

\r\n Senior full-stack engineer at\r\n Google\r\n

\r\n

Helping with:

\r\n

React.js
Node.js
PostgreSQL

\r\n

\r\n \r\n Book a lector\r\n \r\n \r\n Learn More\r\n \r\n

\r\n

\r\n\r\n

\r\n

\r\n \r\n \r\n \r\n\r\n\r\n

\r\n

From @ David Mraz

\r\n

","css":":root {\r\n --background: #D8E3FA;\r\n --gray: #EAEAEC;\r\n --primary: #29283F;\r\n --primary-violet: #7370F4;\r\n}\r\n\r\nbody {\r\n background-color: var(--background);\r\n display: grid;\r\n place-items: center;\r\n height: 100vh;\r\n padding: 24px;\r\n font-size: 16px;\r\n font-family: Poppins, sans-serif;\r\n}\r\n\r\n* {\r\n margin: 0px;\r\n padding: 0px;\r\n}\r\n\r\n.card {\r\n display: flex;\r\n flex-wrap: wrap;\r\n border-radius: 24px;\r\n background-color: white;\r\n cursor: pointer;\r\n overflow: hidden;\r\n max-width: clamp(320px, 70vw, 740px);\r\n min-width: 320px;\r\n min-height: 280px;\r\n}\r\n\r\n.card:hover {\r\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\r\n}\r\n\r\n.background {\r\n flex: 1 1 250px;\r\n}\r\n\r\n.background img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.content {\r\n flex: 3 1 350px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: start;\r\n padding: 16px;\r\n}\r\n\r\n.content>h2 {\r\n font-size: clamp(1.3rem, 2.5vw,\r\n 1.8rem);\r\n font-weight: 700;\r\n margin-bottom: clamp(0.35rem, 2vw,\r\n 0.55rem);\r\n}\r\n\r\n.content>p {\r\n font-size: clamp(1rem,\r\n 1.75vw, 1.1rem);\r\n font-weight: 400;\r\n margin: 6px 0;\r\n}\r\n\r\n.content a {\r\n color: var(--primary-violet);\r\n}\r\n\r\n.chips {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n list-style-type: none;\r\n padding: 12px 0px 16px 0px;\r\n}\r\n\r\n.chip {\r\n border-radius: 12px;\r\n padding: 10px;\r\n font-size: 15px;\r\n background-color: var(--gray);\r\n transition: all 0.3s;\r\n font-weight: 500;\r\n}\r\n\r\n.chip:hover {\r\n background-color: var(--primary-violet);\r\n color: var(--gray)\r\n}\r\n\r\n.action-buttons {\r\n border-top: 1px solid var(--gray);\r\n padding-top: 16px;\r\n gap: 12px;\r\n display: flex;\r\n margin-top: auto;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.action-buttons a {\r\n background-color: var(--primary);\r\n color: white;\r\n padding: 12px;\r\n text-decoration: none;\r\n border-radius: 12px;\r\n outline: none;\r\n border: none;\r\n font-size: 18px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n white-space: nowrap;\r\n flex: 1 0 240px;\r\n max-width: 100%;\r\n}\r\n\r\n.action-buttons a:hover {\r\n text-decoration: underline;\r\n}\r\n\r\n.action-buttons a.secondary {\r\n background-color: inherit;\r\n color: var(--primary);\r\n border: 1px solid var(--primary);\r\n flex: 1 0 80px;\r\n}\r\n\r\n#credits {\r\n\r\n font-family: sans-serif;\r\n font-size: 10px;\r\n}\r\n\r\n.ct {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.icon {\r\n width: 2.5em;\r\n height: 2.5em;\r\n font-size: 2em;\r\n display: flex;\r\n text-decoration: none;\r\n color: #000;\r\n outline: 2px solid #000;\r\n outline-offset: -8px;\r\n border-radius: 50%;\r\n}\r\n\r\n.icon i {\r\n margin: auto;\r\n}\r\n\r\n.icon:hover {\r\n outline-width: 6px;\r\n outline-color: var(--background);\r\n color: #fff;\r\n\r\n}\r\n\r\n.icon:hover:has(.fa-x-twitter) {\r\n background-color: #000;\r\n}\r\n\r\n.icon:hover:has(.fa-instagram) {\r\n background-image: radial-gradient(circle at 30% 107%,\r\n #fdf497 0%,\r\n #fdf497 5%,\r\n #fd5949 45%,\r\n #d6249f 69%,\r\n #285aeb);\r\n}\r\n\r\n#credits {\r\n text-align: center;\r\n}","js":"// ","user_id":"4529d7ae-0865-47e6-850e-f9cbf1ed7d3c","project_key":"bj5bDX","description":"Responsive Profile Card Using HTML, CSS And Fluid Typography\r\n","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":true,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":469}],"profiles":{"username":"abdulmumin"}}]