Love Letter #021 - Card hover testimonial slider, Commit Mono typeface, conversational One Pager 💬

Twenty One Pilots have given us a totally unique take on their catalog for their unplugged album. [Love Letter logo](=.6ww3j2TaED_M_jn47ns6GxUGfdm8DsxiPIFyyU8iZ04) [Love Letter](=.qgMDKp2TBdAPj00jMKV_Wk05Z6y2eYX2gZTgObHGsFU) [021](=.SE6r9kprNypTMVOzlczRxmTa_46G2P_wwtlFoSGNBIk) [Read / Share](=.WPL10SjE8ZA7oyz6pg8qfQkfQyUoek-NZAIXT6TBCjY) Below are my favorite websites, UI components, templates, domains & finds featured on [One Page Love](=.foTV44on3lNnrDfaUIDeT81-p2m4aBnhzlqaw1gtD-M) since I last wrote - hope it keeps the inspo topped up! [Rob Hope](=.oGM5kiem4MT5Ml9KOnKnTh4WvkR_-Ag-9lM8ryZjbyc) Much love, [Rob Hope] [Supported By](=.xTh0jeewLQ7fDWCsbyuzyGj1N4R4TwSXYRKYq3YrBBM) [Design in Figma, launch in Webflow](=.y2T2zBza0pZHX69GeAGmp8iR8W-BjTFgh16H63NM0hw) Big shout-out to website builder [Webflow](=.c82pTym6ZlNpN0Fq3ZpI1TLCtnZQFRDi50M5v8pi7Tk) for sponsoring this edition of the Love Letter. Turn your static designs into clean, production-ready code with the [Figma to Webflow plugin](=.ZvpaLxevGdn35VtIWbEP6tBobP4bGXZJdwKn-FfXyJc). Learn how to copy and paste your Figma designs into Webflow to streamline your site build. The plugin translates Figma layers into their HTML and CSS equivalent — which is the code that Webflow generates when you visually design your site. [Try it yourself today](=.9gn-HwDgckhUoDkzSmA7uCwtPbP5vTGK0cMZZpkqF7Y) → [ Design in Figma, launch in Webflow](=.kL_-4TD34smII-iWDCJBRLIYrBHRQBvQpwkSNJyUBYk) [Get Inspired](=.az05xTYpFEjFz4aw2HtXcqNo1ErhAOzML36HYC5FAjY) [One Page website inspiration.](=.lJsDXb3YO4DzlpdfxjCtkbT3oEKk5OOW7lguNs5o37Y) Get inspired with these unique Single Page websites ([full archive](=.vSWDymVhq07kd5KqCgs1-PifNIZt4fnvpxEEOKgbj-8)) featured on One Page Love over the past week. [CROJungle](=.8kaxB3LXixl-tbeBkQ9qa5epvEb_n-75M5xhzHy80MM) [CROJungle](=.Zce3vqALx6ePaXmuwsN3U28J_TvDvrm-2zXhRFdXLMU) [Visit ➝](=.xJtuN4buwjnllrODXq6IYtbR-lkn_HI-9agHNHvyloA) An incredible amount of effort has gone into this One Pager (built with [Webflow](=.akk3th6CJdvraq2W9OxdPNIGb1YFpGWRoawe7pA3lB8)) for CROJungle who offer an unlimited design subscription service. The feature card hover animations are gorgeous but my favorite component is the testimonial slider, with a screenshot preview of the work snapped to your cursor as you browse. First I've seen and I love it! [CROJungle](=.610D7VT-oeGeKlM4bqL9vfoYz3czZtJPwY06kGseQ2I) [CROJunglePro](=.pSN7zUHuryyK5joJxNjcPQVMboitCb6-c0soX2pbyZs) [Article](=.nO6rg0OCt56YCaRhF9cAWoObncLzb5_qJX_yj6cVh-o) [Article](=._cbrWBLCqRqPmquAYsJiGDhZrquEFDzgKuVkAPsKXF0) [Visit ➝](=.rxDtdtoHdYEesMj4hXuHa_51skUCu_RQ7Q9RJJDRNus) What a superb showreel in this minimal launching soon page (built with WordPress) for Article, who specialize in branding and digital creative. [Article](=.gF4PE5crSTN9gD_NM1YBAX-gSBCkkumnBk3kzzbBe3Y) [Article](=.MZzbGbNKuShqTL3AWk5YrQHrWQgte3ZQ3FGo2sbwkv0) [Hunter Hastings](=.ZVEtoBZVbDqqOcuGIVmyET7-b05F28qdkda4D8odYPQ) [Hunter Hastings](=.ksGp33hHiRtRNiHQew1gYG8UQZvK-qsS4sQxeYnAuOs) [Visit ➝](=.rXCbsja0VdjQ_R4IQZ5-UTOPDOujsHBCDooij9-cICg) Unique glowing border card animations as you scroll this dark-schemed One Pager (built with [Framer](=.aRcyaM3zS9nsnI8TBZHDzpSLVewkNGE1BqGpSN9sH5w)) for product designer Hunter Hastings. I'd be fibbing if I said I wasn't a tad envious of his 3-letter Twitter handle [@hah](=.2llZCNn1gGHB4S32aaWXZZZGXBb4Uh8pn3-A30t1o_Y). [Hunter Hastings](=.ejhfyWPy9FRS86t5Z2x_x859c9vIJ6YTG3C8r7zPqcQ) [Hunter HastingsPro](=.Q-V41_LfgRAeSh0ATTxxJBmAVDSp4CozWqgbTLjVARw) [Wacomet](=.cdqcouRbHO2KhD_YeKUAEIQDUeM7TkAB34vWQ0UD-Mc) [Wacomet](=.BB4dXI5m3xZl55Le1UsXhDD5dDL8Mz2fIvgrrI84A_c) [Visit ➝](=.Dr5juQ0BndyJ2tW4Hiv9y0t1pP8vhEhp-qS1E1ipKps) Impressive how-it-works sections throughout this multi-scrolling One Pager (built with [Webflow](=.EqJnhNY51NOX1DMsTrz_I0hUzm0ocBbO8HTpQlZXj9c)) for Wacomet, who are advocates for sustainable water using solvent extraction desalination. [O0](=.5mnjjsjpc5ffWy1d1SQ1HLwszziyij033TwzeHust_0) [O0Pro](=.Xp979GfzNYj5ZjNMPjVjJiYNm_dQAbcdsa3eheLzf2Q) [Endless](=.TUOf-4TENrxzOLgo1Vcv_C-4B8DNb4BP4pj4T4hg7ps) [Endless](=.iI9SKm3yRFOuXFrgpZ5KMOvXkL2fq1aMCnVJTwkjp-A) [Visit ➝](=.uXfXlAxn6bvpLWPP06WvNAOmMrz54gqYKJGIQKSWaJk) Conversational One Pager (built with [Framer](=.nrFr3FuTdjW9TEfUac3FL0ANdkRVMfsGENImTLGn2Ok)) promoting the Endless design subscription by Daryl Ginn. Neat touches making the work section UI elements interactive, breaking down the how-it-works as a real project conversation and ending with a footer chat-style suggestion to head back to the pricing plans. [Daryl Ginn](=.kRrZjmn9Hj5O3pkBTuI9kpDdgsg6KJat0x7c2cc1ulQ) [Daryl Ginn](=.lZS1x3S3CELT6iPaa9e-ffi1ITZYxcCA_ch3BlO-EbE) [Noteworthy](=._4wgs4Hh1nmtJt-XJYc0YvShKTqSiElHyWd0oVn9fAQ) [Interesting UI components.](=.xqu61022DeWU5Jei-RYZ5zHU6zed-1rTxIvCaq936eA) Some recent page components ([full archive](=.8h9C2ikr9vqtRmSGkcsoLIKbYXlqORz7fJTmufQYaus)) I thought were really well designed or found interesting. Each is captured in full HD and links to the original page source. Hit me up if you scroll into something fresh. [Mike McAlister](=.r9W7tS_pCo50YFm9fV_Zt-toCFwZFZZLOnMk3UHlDr8) [Mike McAlister Biography](=.5Zul1o4qkIYTXs4TSDKcwdLRiful5EsySL-fGeY18bI) [Enlarge ➝](=.i3tBgKlzZVPkjGmRPMV-Gmc9mE-vyNEZ1DqzX1ciCt4) Mike's Liftoff Course bio is strengthened with testimonials below all using his first name. Also love touch with signature and social media icons. [Validate Faster](=.EhxZthIPAYxv2v6X_WvU2oa-ejazAdnM7Jed1zixfj4) [Landing Page Templates.](=.ep42bDA8wSTQ0_xnmBYxqrs1MfYOz9hSL0FSqEFj2aU) Long-scrolling Landing Page templates ([full archive](=.NB-8Es8z6LJpDJHX2Y1AuMx4HqLWRJngpI_28eTs4os)) to kickstart and validate your next idea quicker. [Black](=.fH5XNoFx4ZmpKEJjOwXsIcK4xz3KKLBcSh0eTvwezjE) [Black Webflow Template](=.5YfxQVHU1wNE-M2vm9zy5u4W9G4tpFHnYgNDorZOgBE) [Demo](=.O919NNRVNh-oFOXWfExnKqB7V3Lo-3xiK1m8VA2OHwc) [Clone $24](=.FRqw1gf2s-Ks0CTHomxKcwL1952m2U_SnMt_piKloto) 'Black' is One Page [Webflow](=.3-RVWlBgWxIno6duHXp7DujEQ7AEBy6-3Mrt9lh3jm8) template crafted by [Wedoflow](=.YChOMf2Wcb7LQdB5CDmzH1dBezuKihvVIUiNCNNAk6s) to help take leads for your mobile app. The long scrolling design begins with a central hover-sensitive device preview, email capture, bento-box overview sections, parallax effect and app metrics. [Solid – NextJS](=.eYkc1fr2zA53YwfQd1Yem8HzXANz7wvg8VKq1velnus) [Solid – NextJS Template](=.KsHS9ua9VxQwFIJOITkLK8rqTpnwMObFmaBfeakO0Cs) [Demo](=.1_i2BwjS-tRuBBFC6faMxKs4uMnexwfMh_UA61EB_58) [Buy $49](=.icwdmgyrDfOFFMrQBoX2Og3BGhvtd84M6sc8Au3qOvE) 'Solid' is a SaaS boilerplate and starter template crafted by UIdeck for Next.js. The long-scrolling multi-scheme layout includes all the sections you’ll need to promote your SaaS from lead sign up, client logos, block style features, metrics, testimonials and a pricing form. [Next Podcast](=.EG-W9JkM1Jae2R8yRkLztgGb1q6EDj7ZG-xLm35lrxU) [Next Yo! Podcast Guest: @traf](=.ZKQ4FQLzoVUJGzRA1hTl1R4qwmX-iNhWfGLueMtEXSY) Designer, developer, maker, minimalist, NFT advocate and Framer expert [James Traf](=.0FyEVTyEjHJ-xPsUYGC0kR20dpk2ytE1iwL97rL-olQ) is coming up on the [Yo! Podcast](=.0xzTOle4mFkF9i4-o6YXrQYLeM6HqxOA57WV_h5zTpA) in August. Smash that reply button if you have any questions for him. [ Next Yo! Podcast Guest: @traf](=.bEMxiIyUJDcMrZk_eULCNOrthMchR2cxa2YekeotLJg) [Available to register](=.dCwBBU3jdp63RNnvvYyv9XHxLY2kcKjSbhA9SwNlg2M) [Brandable dot com domains.](=.5hfPW9CjnW3UKKQFIlqpZKb3xdG5rR8NTu_eFKavlbE) Give your side project a better first impression with these memorable dot com domains ([full archive](=.OY9XzI1Irqaxba_AJlQduskWIiHtwn8sLve3292mWrk)) I handpicked recently. They are all available to register right now. Yup! First come, first serve. • [Ovable.com](=.NdY8WZs919627C9h3NuqMVOKomQZoKAhcAwUv6Ox0Uk) • [Keably.com](=.n_TwwwssI9BukWzG8949NBTjhbwtmeDWRVGTSFDUG3Y) • [Letlia.com](=.BWUyoJ_uPw0BjNnHI9i_rT26h79YNMAiMAf2dP1HVVY) • [Vondea.com](=.fVnAdtTh4qDwZzyIQIkssyqbOZIzyJ-JetrFnfZdxAs) • [Amdoe.com](=.ElMEvUp4v1T5t2Z5G7nEVMG0j-L0N_-LtW04MB4QEV4) • [Akett.com](=.EGUtsAqlqsE5xn_GN3MXQK3YCgQ52rlM5DtKcdEv9O0) • [Heirsy.com](=.r9FCPQLrKzku5NVYnuQkEgSfP9obPdfz2g8VWgKBLa0) • [Kertie.com](=.X4behnx_4I35KLcUojWlNY2G1HY3aXcyf9oSiW7ny6s) • [Vemply.com](=.TC9eTsw1hXyOVZpUooTqrsEMzkoX_E7uhsuO7Y0auso) • [Nivbo.com](=.S8MUD8MD7IgIO1c9tTrN4tWhm22MvArTbQoceQOczJs) Here are a few premium dot com domains I'm selling on behalf of other makers. Each are a tidy $199. Let me know if you want to contribute yours. • [Vebie.com](=.Yb25cYeIEpQmNa_Tx7_mMo6oWZWxhpsua2SxFLBmy98) • [Nebbly.com](=.LVUSZqrziV1fcgSdRh6tS6ShTuSBNwntqyeaDoApNho) • [Alkso.com](=.RnDkjrwadE9O5OMaTaV6HUdEuczrmMojvgLuL1jCkkI) • [Picoby.com](=.u2Q46syoyztUi2JqnWVwmNQ7a4-lotITJjej4xBlFJk) • [Jitby.com](=.HXZuQAe7HFuToRqR-6RIq6p79ieG-YgRYOdYHgn43DM) • [Awbie.com](=.MPL4zjCd9eXtto0krutE4qagFO-I1BxQT5d_fQUVgy4) [Tweet of the week](=.tQZlk6iDhDrCvMIaMrKzlber5EtRhJ-5LlWj0MXIlQs) [Bonus](=.D4PakJJsgrcq2VXd6wFYwRekKXCY7DT9av9ixsn1oz4) [My favorite online finds.](=.GlC2Z-nc2YA2uuRQZAX67ykejVlqcVar0Ki-H1XJhTs) A few resources for your next project but also some inspiring links to take a break with. Experienced anything special recently? Holla. [Illustration.lol](=.8r3Jf2of3j4FkHu5idVFowT5MJDvaBL40qgJN5HBpI8)[- Editorial illustrations from around the world curated by Shane Zucker. h/t @maxlind](=.muuOIN6scPiv4PJlrOTC3qVWzo9jQ_28FTRBOA5IlgM) [Commit Mono](=.Vi_TRRPSRnln4WpFERSloQNjepMB5J7jrDl52WsaZAA)[- Neutral coding typeface by Eigil Nikolajsen. h/t @manuelmoreale](=.QE0KZ7qJCS1FWrTWTwgQjajkl1_H4hT9BOe07sq6zW8) [Recent Design](=.H3zFNMUA_m5LajXqCOrEqAwLIlsGschbueOnrNz8wXc)[- A simple feed highlighting some of the best web, interface and interaction designs. Launching soon. Get notified. By Daryl from Godly so will be quality.](=.keaqa55bf6vzwLZXUM2O9oKNVTlh8fYVNEFHw5s-6zc) [Opens Wins](=.TsOTfPFrH9eKNEA6ZA3-lXs-8k_yl5R8qf3wOpxdRf0)[- Good reminder RSS is still around and it's still really good.](=.2NbS7e7c21IvjICM7Lo1NMbszcUHxgHq4a3NgnFUuXo) [Laws of UX](=.6hoTfs0NLrcJKf00YzlARxUu_saG0oHyd6XqLJfj3c0)[- Collection of best practices that designers can consider when building user interfaces. It's had a new lick of paint since I last passed by, so wanted to give it another shout. h/t Zaid](=.bPHCZyE6vCZUKrFmIBPs6Yz2fkac-muqKiB7PS4WcnA) [Twenty One Pilots MTV Unplugged](=.4MsCEvgsV4nejpGf02hrWa_N8a7-cuYdTsFBTMdtTPs)[- Ending this edition off with a track I have on repeat this week. Wish more artists would do this. Twenty One Pilots gave us a totally unique take on their catalog for their unplugged album (that Car Radio / Heathens blend is fire).](=.I1WUutxDzBUB-axfz_JliimfeE48GE5eEDio0u-y2GQ) [Landing Page Hot Tip](=.IbOQ4rsAfHvuqHr4FRn0p-2fcIR26dbRr6KAjd5F084) [Code your own social share buttons](=.FgH9_Yp0OfXBXyC1ydSdAOT8v29SD0mZWgWQjmzk3to) Hot Tip #41 is to code your own social share buttons. Embedding a crowd of social share buttons adds unnecessary requests to your Landing Page load. I’d vote for removing them completely. If you must have them, consider hard-coding the buttons with fun pre-composed text. Mamma mia! This free set of restaurant icons by @iconfinder is deeelicious 🍕 ps. check out [Share Link Creator](=.bkNSxf-FVyC7aAjFmD6eqX0v_xbTXNmTYrrceDyiSP4), my go-to-tool for populating social share links in my Landing Pages and even within my Ebook [Your Curator](=.09ZRPzahSdY3oEW52TQz0miZkipnI2JfT9G2HNXeKv8) [Hey! I'm Rob Hope.](=.rEAAJ7MiP_IWqvLJwYQanJmBk3O7XV_UHzdTITXOiRE) If you are enjoying [One Page Love](=.lkJbDeWaVVZkkLz48cL3J--cJw4imPzlw6eCDJAqpxo) and the Love Letter editorial here are a few ways to help support the work I do. [Rob Hope](=.kbQ_LoS_kKokYvISLsOhcpIntYtvbnIvR4f8yg0I3TU) Spread love about this Love Letter using: [onepagelove.com/letter](=.zh0x7OEzgqWGZ0-CQ5LPLdZZOW8jNevUlRcHXFMurn0) Grab my [Landing Page Hot Tips Ebook](=.giTlt_BOQjuoVoPWh1vl_24bMHJAJ1OM9kNo69R_fZI) (here is 40% off) Follow [@robhope](=.fbkejHQL6Xf8AfJ9fl1HJo4AvlbpnbNbPKVcS1GR4OI) or [@onepagelove](=.-scMdMMSqTMxQhyad_HArcUFTbCXp6kcpl-YirjSxww) on Twitter Review the [Yo! Podcast](=.wECtljTJYBDoAsYGCNvZAMnwqXAeKY2SF-iLvvRV_lE) on [Spotify](=.xR6fLnrmdCA3WAEmJMGzLc9Liie5eFT4NZdCvM_iVLY), [Google Podcasts](=.w9CRpPL9iEiSJhDLDbDbA010RPzN8GlR49xwGEcSjQA) or [Apple Podcasts](=.NL22Jht3F5u42NJBDLbB0Vi2IYNu42A5BokERZ1dSD4) Want to build a One Pager with no-code? [Get started free](=.i8r4MWDRpVcF24GAB-I-LuZN8_WTlGX1AE2-3BaTc0g) using [Webflow](=.cuLMEL4riPsxxaI0FSbW1Nk55Oqsl11UbyHJSTIGEsg) <3 [Unsubscribe from the Love Letter](=.T7qP6gx0AG3e6YJGj3mlf0HqOSPcuM010fMMoSDm3Bw) [Love Letter logo](=.T9Y-43E_fxdGpjKw82bZb_sptcndT0PpjwJqO1392So)