From 6bae9db23c9a31c9538a11564088300e5c86b1e2 Mon Sep 17 00:00:00 2001
From: tomoayan <63101155+tomoayan@users.noreply.github.com>
Date: Fri, 22 Mar 2024 01:59:09 +0530
Subject: [PATCH] fix: replace roadmap emoji with svg

---
 assets/motorway.svg |  1 +
 index.html          |  2 +-
 main.css            | 18 +++++++++++++++++-
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 assets/motorway.svg

diff --git a/assets/motorway.svg b/assets/motorway.svg
new file mode 100644
index 0000000..5f6caf9
--- /dev/null
+++ b/assets/motorway.svg
@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><filter id="a" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="29.75" width="29.75" x=".215942" y="2.06763"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-1.75" dy="1.75"/><feGaussianBlur stdDeviation="1.25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.376471 0 0 0 0 0.905882 0 0 0 0 1 0 0 0 1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_18_11689"/></filter><filter id="b" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="23.217" width="14.642" x="15.8239" y="7.85059"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5" dy="1.25"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.243137 0 0 0 0 0.211765 0 0 0 0 0.278431 0 0 0 1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_18_11689"/></filter><filter id="c" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="6" width="8.99017" x="2.65637" y="10.5701"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.5" dy=".5"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.341176 0 0 0 0 0.803922 0 0 0 0 0.639216 0 0 0 1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_18_11689"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5" dy="-.5"/><feGaussianBlur stdDeviation=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.12549 0 0 0 0 0.360784 0 0 0 0 0.298039 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_11689" mode="normal" result="effect2_innerShadow_18_11689"/></filter><filter id="d" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="1.15" width="4.15" x="4.00637" y="12.0701"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".15"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.529412 0 0 0 0 0.513726 0 0 0 0 0.537255 0 0 0 1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_18_11689"/></filter><filter id="e" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="1.15" width="1.15" x="9.00637" y="12.0701"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".15"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.529412 0 0 0 0 0.513726 0 0 0 0 0.537255 0 0 0 1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_18_11689"/></filter><filter id="f" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="1.15" width="1.15" x="9.00637" y="14.0701"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".15"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.529412 0 0 0 0 0.513726 0 0 0 0 0.537255 0 0 0 1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_18_11689"/></filter><filter id="g" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="1.13999" width="3.13999" x="4.01638" y="14.0701"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" mode="normal" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".15"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix type="matrix" values="0 0 0 0 0.529412 0 0 0 0 0.513726 0 0 0 0 0.537255 0 0 0 1 0"/><feBlend in2="shape" mode="normal" result="effect1_innerShadow_18_11689"/></filter><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="2.32851" x2="5.76165" y1="8.99338" y2="8.99338"><stop offset="0" stop-color="#47a2c2"/><stop offset="1" stop-color="#47a2c2" stop-opacity="0"/></linearGradient><radialGradient id="i" cx="0" cy="0" gradientTransform="matrix(-1.71657513 1.97086962 -2.11547944 -1.84252644 29.0943 2.89002)" gradientUnits="userSpaceOnUse" r="1"><stop offset="0" stop-color="#6df5ff"/><stop offset="1" stop-color="#6df5ff" stop-opacity="0"/></radialGradient><linearGradient id="j"><stop offset="0" stop-color="#fff"/><stop offset=".926499" stop-color="#bbbbbc"/></linearGradient><radialGradient id="k" cx="0" cy="0" gradientTransform="matrix(-2.38572219 4.54451658 -6.43534474 -3.37834497 5.67593 9.95078)" gradientUnits="userSpaceOnUse" r="1" xlink:href="#j"/><radialGradient id="l" cx="0" cy="0" gradientTransform="matrix(-.93232857 -.81578965 2.02919815 -2.31907749 4.92019 9.49228)" gradientUnits="userSpaceOnUse" r="1"><stop offset=".158028" stop-color="#c1c0c1"/><stop offset="1" stop-color="#c1c0c1" stop-opacity="0"/></radialGradient><radialGradient id="m" cx="0" cy="0" gradientTransform="matrix(-8.23267084 6.98527172 -11.85719596 -13.9746019 14.7789 10.8307)" gradientUnits="userSpaceOnUse" r="1" xlink:href="#j"/><radialGradient id="n" cx="0" cy="0" gradientTransform="matrix(-3.46426745 4.64428713 -7.78319138 -5.80563945 26.9505 11.7769)" gradientUnits="userSpaceOnUse" r="1" xlink:href="#j"/><radialGradient id="o" cx="0" cy="0" gradientTransform="matrix(-6.79273964 6.52630362 -10.93718273 -11.38369267 24.1329 12.7388)" gradientUnits="userSpaceOnUse" r="1"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#b9bdbb"/></radialGradient><radialGradient id="p" cx="0" cy="0" gradientTransform="matrix(-.89783616 3.16192964 -1.06591139 -.30266764 18.874 12.7735)" gradientUnits="userSpaceOnUse" r="1"><stop offset="0" stop-color="#d3d3d4"/><stop offset="1" stop-color="#d3d3d4" stop-opacity="0"/></radialGradient><radialGradient id="q" cx="0" cy="0" gradientTransform="matrix(-5.09454017 -3.08864542 3.74665237 -6.1798842 22.6678 16.56)" gradientUnits="userSpaceOnUse" r="1"><stop offset=".502024" stop-color="#e5e5e6" stop-opacity="0"/><stop offset=".848912" stop-color="#e5e5e6"/></radialGradient><linearGradient id="r" gradientUnits="userSpaceOnUse" x1="22.6345" x2="20.755" y1="16.2321" y2="14.4918"><stop offset="0" stop-color="#a9abab"/><stop offset="1" stop-color="#a9abab" stop-opacity="0"/></linearGradient><radialGradient id="s" cx="0" cy="0" gradientTransform="matrix(-1.13119027 1.49667873 -1.26543613 -.95641704 19.1191 12.0554)" gradientUnits="userSpaceOnUse" r="1"><stop offset="0" stop-color="#d6d6d7"/><stop offset="1" stop-color="#d6d6d7" stop-opacity="0"/></radialGradient><linearGradient id="t" gradientUnits="userSpaceOnUse" x1="22.8949" x2="28.3977" y1="17.7034" y2="9.30228"><stop offset="0" stop-color="#433b4d"/><stop offset="1" stop-color="#614f71"/></linearGradient><radialGradient id="u" cx="0" cy="0" gradientTransform="matrix(-.09536452 2.38412348 -1.46819592 -.05872758 27.9658 8.05564)" gradientUnits="userSpaceOnUse" r="1"><stop offset="0" stop-color="#6c597d"/><stop offset="1" stop-color="#6c597d" stop-opacity="0"/></radialGradient><linearGradient id="v" gradientUnits="userSpaceOnUse" x1="6.04726" x2="2.30515" y1="11.4543" y2="15.4875"><stop offset="0" stop-color="#6a5a79"/><stop offset="1" stop-color="#393742"/></linearGradient><radialGradient id="w" cx="0" cy="0" gradientTransform="matrix(6.07055155 5.86265254 -1.59596294 1.65255833 1.63988 6.67271)" gradientUnits="userSpaceOnUse" r="1"><stop offset="0" stop-color="#877499"/><stop offset="1" stop-color="#877499" stop-opacity="0"/></radialGradient><linearGradient id="x" gradientUnits="userSpaceOnUse" x1="15.9711" x2="15.9711" y1="17.0701" y2="26.1731"><stop offset="0" stop-color="#6bc589"/><stop offset=".167349" stop-color="#5eaa7c"/><stop offset="1" stop-color="#5eaa7c"/></linearGradient><linearGradient id="y" gradientUnits="userSpaceOnUse" x1="16" x2="16" y1="17.0701" y2="30.0676"><stop offset="0" stop-color="#665278"/><stop offset="1" stop-color="#414042"/></linearGradient><linearGradient id="z" gradientUnits="userSpaceOnUse" x1="20.1534" x2="31.2159" y1="17.0701" y2="28.0051"><stop offset="0" stop-color="#e3e0e4"/><stop offset="1" stop-color="#e6e3e8"/></linearGradient><linearGradient id="A"><stop offset="0" stop-color="#928c97"/><stop offset="1" stop-color="#928c97" stop-opacity="0"/></linearGradient><linearGradient id="B" gradientUnits="userSpaceOnUse" x1="23.7159" x2="23.8722" xlink:href="#A" y1="21.7551" y2="21.5989"/><linearGradient id="C" gradientUnits="userSpaceOnUse" x1="25.4659" x2="25.2628" y1="21.7864" y2="22.0051"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="D" gradientUnits="userSpaceOnUse" x1="13.1564" x2="1.2799" y1="17.0701" y2="26.7335"><stop offset="0" stop-color="#e6e5e9"/><stop offset="1" stop-color="#b5b2b6"/></linearGradient><linearGradient id="E" gradientUnits="userSpaceOnUse" x1="6.63782" x2="6.96418" xlink:href="#A" y1="21.5832" y2="21.9417"/><linearGradient id="F"><stop offset="0" stop-color="#ffe039"/><stop offset="1" stop-color="#ffc33c"/></linearGradient><linearGradient id="G" gradientUnits="userSpaceOnUse" x1="15.9659" x2="15.9659" xlink:href="#F" y1="17.5831" y2="18.9419"/><linearGradient id="H" gradientUnits="userSpaceOnUse" x1="15.9659" x2="15.9659" xlink:href="#F" y1="19.9698" y2="22.787"/><linearGradient id="I" gradientUnits="userSpaceOnUse" x1="15.9659" x2="15.9659" xlink:href="#F" y1="24.8226" y2="30.0676"/><linearGradient id="J"><stop offset="0" stop-color="#e3e2e4"/><stop offset=".289158" stop-color="#cccacd"/></linearGradient><linearGradient id="K" gradientUnits="userSpaceOnUse" x1="4.01768" x2="8.15637" xlink:href="#J" y1="12.5701" y2="12.5701"/><linearGradient id="L"><stop offset="0" stop-color="#e3e2e4"/><stop offset=".372089" stop-color="#cccacd"/></linearGradient><linearGradient id="M" gradientUnits="userSpaceOnUse" x1="9.15637" x2="10.1564" xlink:href="#L" y1="12.7808" y2="12.1467"/><linearGradient id="N" gradientUnits="userSpaceOnUse" x1="9.15637" x2="10.1564" xlink:href="#L" y1="14.7808" y2="14.1467"/><linearGradient id="O" gradientUnits="userSpaceOnUse" x1="4.06271" x2="7.15638" xlink:href="#J" y1="14.5651" y2="14.5651"/><linearGradient id="P"><stop offset=".25443" stop-color="#fbfbfd"/><stop offset="1" stop-color="#868587"/></linearGradient><radialGradient id="Q" cx="0" cy="0" gradientTransform="matrix(-.864396 0 0 -2.7563 5.15638 17.3398)" gradientUnits="userSpaceOnUse" r="1" xlink:href="#P"/><linearGradient id="R"><stop offset=".232558" stop-color="#7c8184"/><stop offset="1" stop-color="#7c8184" stop-opacity="0"/></linearGradient><linearGradient id="S" gradientUnits="userSpaceOnUse" x1="4.97375" x2="4.93469" xlink:href="#R" y1="15.9582" y2="16.302"/><radialGradient id="T" cx="0" cy="0" gradientTransform="matrix(-.864396 0 0 -2.7563 10.1564 17.3398)" gradientUnits="userSpaceOnUse" r="1" xlink:href="#P"/><linearGradient id="U" gradientUnits="userSpaceOnUse" x1="9.97375" x2="9.93469" xlink:href="#R" y1="15.9582" y2="16.302"/><g filter="url(#a)"><rect fill="#4bc8f2" height="28" rx="3.8" width="28" x="1.96594" y="2.06763"/></g><rect fill="url(#h)" height="28" rx="3.8" width="28" x="1.96594" y="2.06763"/><rect fill="url(#i)" height="28" rx="3.8" width="28" x="1.96594" y="2.06763"/><path d="m1.96594 13.8177v-6.89545c.36733-.12466.761-.19227 1.17045-.19227 2.01032 0 3.64 1.62968 3.64 3.64002 0 2.0103-1.62968 3.64-3.64 3.64-.40945 0-.80312-.0676-1.17045-.1923z" fill="url(#k)"/><path d="m1.96594 13.8177v-6.89545c.36733-.12466.761-.19227 1.17045-.19227 2.01032 0 3.64 1.62968 3.64 3.64002 0 2.0103-1.62968 3.64-3.64 3.64-.40945 0-.80312-.0676-1.17045-.1923z" fill="url(#l)"/><path d="m17.6427 17.0701c.5951-1.0795.9337-2.3201.9337-3.64 0-4.16997-3.38-7.54997-7.55-7.54997-3.35003 0-6.19003 2.19-7.18003 5.20997-.52726-.5568-1.16136-1.0116-1.86999-1.3298v7.3098z" fill="url(#m)"/><path d="m24.9064 15.9999c1.7452 0 3.16-1.4147 3.16-3.16 0-1.7452-1.4148-3.15997-3.16-3.15997s-3.16 1.41477-3.16 3.15997c0 1.7453 1.4148 3.16 3.16 3.16z" fill="url(#n)"/><path d="m21.9264 21.62c2.7946 0 5.06-2.2654 5.06-5.06s-2.2654-5.06-5.06-5.06-5.06 2.2654-5.06 5.06 2.2654 5.06 5.06 5.06z" fill="url(#o)"/><path d="m21.9264 21.62c2.7946 0 5.06-2.2654 5.06-5.06s-2.2654-5.06-5.06-5.06-5.06 2.2654-5.06 5.06 2.2654 5.06 5.06 5.06z" fill="url(#p)"/><path d="m21.9264 21.62c2.7946 0 5.06-2.2654 5.06-5.06s-2.2654-5.06-5.06-5.06-5.06 2.2654-5.06 5.06 2.2654 5.06 5.06 5.06z" fill="url(#q)"/><path d="m21.9264 21.62c2.7946 0 5.06-2.2654 5.06-5.06s-2.2654-5.06-5.06-5.06-5.06 2.2654-5.06 5.06 2.2654 5.06 5.06 5.06z" fill="url(#r)"/><path d="m21.9264 21.62c2.7946 0 5.06-2.2654 5.06-5.06s-2.2654-5.06-5.06-5.06-5.06 2.2654-5.06 5.06 2.2654 5.06 5.06 5.06z" fill="url(#s)"/><g filter="url(#b)"><path d="m29.966 7.85059v18.41701c0 2.0987-1.7014 3.8-3.8 3.8h-3.9421l-5.8075-5.8075c-.79-.79-.79-2.07 0-2.86l5.68-6.71 4.38-5.25997c.41-.5 1.03-.78 1.67-.78h.12c.58 0 1.13-.23 1.54-.64z" fill="url(#t)"/></g><path d="m29.966 7.85059v18.41701c0 2.0987-1.7014 3.8-3.8 3.8h-3.9421l-5.8075-5.8075c-.79-.79-.79-2.07 0-2.86l5.68-6.71 4.38-5.25997c.41-.5 1.03-.78 1.67-.78h.12c.58 0 1.13-.23 1.54-.64z" fill="url(#u)"/><path d="m12.1464 17.0699-9.78002-9.78001c-.11986-.11986-.251-.22154-.39-.30503v10.08504z" fill="url(#v)"/><path d="m12.1464 17.0699-9.78002-9.78001c-.11986-.11986-.251-.22154-.39-.30503v10.08504z" fill="url(#w)"/><path d="m29.9659 17.0701h-27.98952v9.103h27.98952z" fill="url(#x)"/><path d="m29.9437 26.681c-.206 1.9043-1.8187 3.3866-3.7777 3.3866h-20.40003c-1.81467 0-3.33224-1.272-3.70976-2.973l10.10019-10.0245h8z" fill="url(#y)"/><path d="m29.966 26.081v.1866c0 .4658-.0838.912-.2372 1.3243l-10.5724-10.5218h1z" fill="url(#z)"/><path d="m29.966 26.081v.1866c0 .4658-.0838.912-.2372 1.3243l-10.5724-10.5218h1z" fill="url(#B)"/><path d="m29.966 26.081v.1866c0 .4658-.0838.912-.2372 1.3243l-10.5724-10.5218h1z" fill="url(#C)"/><path d="m2.18768 27.5498c-.14354-.4006-.22174-.8322-.22174-1.2822v-.1833l10.19046-9.0142h1z" fill="url(#D)"/><path d="m2.18768 27.5498c-.14354-.4006-.22174-.8322-.22174-1.2822v-.1833l10.19046-9.0142h1z" fill="url(#E)"/><path d="m16.2159 17.4438.15 1.4981h-.8l.15-1.4981z" fill="url(#G)"/><path d="m16.4359 19.681.31 3.096-1.56.01.31-3.106z" fill="url(#H)"/><path d="m16.8959 24.285.57 5.7826h-3l.57-5.7826z" fill="url(#I)"/><g filter="url(#c)"><path d="m10.0364 11.0701h-5.77003c-.61 0-1.11.5-1.11 1.11v2.78c0 .61.5 1.11 1.11 1.11h5.77003c.61 0 1.11-.5 1.11-1.11v-2.78c.01-.61-.49-1.11-1.11-1.11z" fill="#3ead88"/></g><g filter="url(#d)"><path d="m7.65637 12.0701h-3c-.28 0-.5.22-.5.5s.22.5.5.5h3c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z" fill="url(#K)"/></g><g filter="url(#e)"><path d="m9.65637 12.0701c-.28 0-.5.22-.5.5s.22.5.5.5.50003-.22.50003-.5-.22003-.5-.50003-.5z" fill="url(#M)"/></g><g filter="url(#f)"><path d="m9.65637 14.0701c-.28 0-.5.22-.5.5s.22.5.5.5.50003-.22.50003-.5-.22003-.5-.50003-.5z" fill="url(#N)"/></g><g filter="url(#g)"><path d="m6.72638 14.0701h-2.13c-.24 0-.43.19-.43.43v.13c0 .24.19.43.43.43h2.13c.24 0 .43-.19.43-.43v-.13c0-.24-.19-.43-.43-.43z" fill="url(#O)"/></g><path d="m4.16638 16.0676h.99v1.99244h-.99z" fill="url(#Q)"/><path d="m4.16638 16.0676h.99v1.99244h-.99z" fill="url(#S)"/><path d="m9.16638 16.0676h.99v1.99244h-.99z" fill="url(#T)"/><path d="m9.16638 16.0676h.99v1.99244h-.99z" fill="url(#U)"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index c3bfec8..1012b99 100644
--- a/index.html
+++ b/index.html
@@ -117,7 +117,7 @@ <h3>Tomo</h3>
         </div>
         <div class="roadMap">
             <div class="roadmap-wrapper">
-                <h1>🛣️ Roadmap</h1>
+                <h1><span class="img"><img onload="this.style.opacity=1" src="./assets/motorway.svg" alt="roadmap icon"></span> Roadmap</h1>
                 <div class="active">
                     <h4>Active</h4>
                     <div class="task">
diff --git a/main.css b/main.css
index 8ea05c7..cc9e624 100644
--- a/main.css
+++ b/main.css
@@ -227,11 +227,27 @@ h6 {
     width: 100%;
 }
 
+.roadMap .img {
+    border-radius: 6px;
+    overflow: hidden;
+    width: 2rem;
+    height: 2rem;
+    background-color: hsla(0, 0%, 100%, 0.07);
+}
+.roadMap .img img {
+    transition: opacity 0.1s ease-in;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .roadMap h1 {
+    display: flex;
+    align-items: center;
+    gap: 7px;
     width: 100%;
     margin-bottom: 16px;
     padding-bottom: 6px;
-
 }
 
 .roadmap-wrapper .active, .roadmap-wrapper .planned {