Updates:

-Hide menu elements' text on small screen
-Add some required icons
-Center required items with css

src/pages/home.f7.html

@@ -5,7 +5,7 @@
       <div class="navbar-bg"></div>
       <div class="navbar-inner">
         <div class="left">
-          <a href="/panel-left/" class="link icon-only">
+          <a class="link icon-only" href="/panel-left/">
             <i class="icon f7-icons if-not-md">menu</i>
             <i class="icon material-icons if-md">more</i>
           </a>
@@ -16,21 +16,21 @@
         <div class="right">
           <a class="link">
             <i class="icon material-icons color-teal">car_rental</i>
-            <!-- Aanbod -->
+            <span class="hidden-xs-down">Aanbod</span>
           </a>
-          <a class="link icon-only">
+          <a class="link ">
             <i class="icon material-symbols-outlined color-orange">swap_driving_apps</i>
-            <!-- Uitlenen -->
+            <span class="hidden-xs-down">Uitlenen</span>
           </a>
-          <a class="link icon-only">
+          <a class="link ">
             <i class="icon material-symbols-outlined color-blue">person_raised_hand</i>
-            <!-- Hoe het werkt -->
+            <span class="hidden-xs-down">Hoe het werkt</span>
           </a>
-          <a class="link icon-only">
+          <a class="link ">
             <i class="icon material-symbols-outlined color-red">contact_mail</i>
-            <!-- Hoe het werkt -->
+            <span class="hidden-xs-down">Contact</span>
           </a>
-          <a href="/panel-right/" class="link icon-only">
+          <a class="link icon-only" href="/panel-right/">
             <i class="icon material-icons">more_vert</i>
           </a>
         </div>
@@ -71,11 +71,37 @@
           </li>
         </ul>
         <div class="block">
-          <p class="grid grid-cols-1 grid-gap">
+          <p class="grid grid-cols-1">
             <a href="#" class="button button-small button-fill color-yellow">Bekijk Beschikbaarheid</a>
           </p>
         </div>
       </div>
+      <div class="block cont text-align-center">
+        <div class="card sub-item">
+          <div class="sub-header text-align-center">Goede overdracht</div>
+          <div class="card-content card-content-padding">
+            <div class="item-media">
+              <img src="./static/car-wash.svg" width="44"/>
+            </div>
+          </div>
+        </div>
+        <div class="card sub-item">
+          <div class="sub-header text-align-center">Eenvoudig lenen</div>
+          <div class="card-content card-content-padding">
+            <div class="item-media">
+              <img src="./static/like.svg" width="44"/>
+            </div>
+          </div>
+        </div>
+        <div class="card sub-item">
+          <div class="sub-header text-align-center">Groot aanbod</div>
+          <div class="card-content card-content-padding">
+            <div class="item-media">
+              <img src="./static/hand-key.svg" width="44"/>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="block block-outline inset list">
         <ul>
           <li>
@@ -98,9 +124,22 @@ export default (props, { $, $f7, $on }) => {
   return $render;
 };
 </script>
+
 <style>
 .cont{
   display: flex;
   flex-wrap: wrap;
 }
+.sub-item{
+  flex-grow: 1;
+}
+.sub-header{
+  font-size: 22px;
+  font-weight: bold;
+}
+@media (max-width: 575px) {
+  .hidden-xs-down {
+    display: none !important;
+  }
+}
 </style>

src/static/car-wash.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 48 48" width="512" height="512"><path d="M10.942,27.08a45.308,45.308,0,0,0-4.626-.439c-.679-.042-1.574.312-1.729,2.024a3.965,3.965,0,0,0,.123,1.28,2.224,2.224,0,0,0,1.853,1.691l6.619.932a.6.6,0,0,0,.1.008.75.75,0,0,0,.664-1.1C11.769,27.335,11.211,27.163,10.942,27.08Zm-4.17,3.071a.735.735,0,0,1-.605-.561,2.544,2.544,0,0,1-.086-.789,1.581,1.581,0,0,1,.151-.658l.021,0c1.71.107,3.633.262,4.154.354a18.122,18.122,0,0,1,1.506,2.381Z"></path><path d="M41.683,26.641a45.308,45.308,0,0,0-4.626.439c-.269.083-.828.255-3.008,4.4a.75.75,0,0,0,.664,1.1.6.6,0,0,0,.1-.008l6.619-.932a2.224,2.224,0,0,0,1.853-1.691,3.984,3.984,0,0,0,.123-1.28C43.256,26.953,42.356,26.6,41.683,26.641Zm.149,2.949a.735.735,0,0,1-.605.561l-5.141.724a18.293,18.293,0,0,1,1.505-2.381c.53-.093,2.455-.248,4.164-.354a1.371,1.371,0,0,1,.163.661A2.541,2.541,0,0,1,41.832,29.59Z"></path><path d="M34.382,27.778a.752.752,0,0,0-.68-.318c-.069.006-6.958.6-9.7.6s-9.632-.6-9.7-.6a.749.749,0,0,0-.743,1.066l1.975,4.191a.753.753,0,0,0,.635.429l7.829.448,7.841-.448a.751.751,0,0,0,.635-.429l1.975-4.191A.747.747,0,0,0,34.382,27.778Zm-3.078,3.9L24,32.1l-7.3-.422-1.231-2.612c2.159.176,6.439.5,8.534.5s6.376-.324,8.536-.5Z"></path><path d="M28.311,4.994l1.106.414A2.7,2.7,0,0,1,31,6.99L31.414,8.1a.749.749,0,0,0,1.4,0l.414-1.106a2.705,2.705,0,0,1,1.582-1.582l1.106-.414a.749.749,0,0,0,0-1.4l-1.106-.414h0a2.7,2.7,0,0,1-1.582-1.583L32.818.487a.749.749,0,0,0-1.4,0L31,1.593a2.7,2.7,0,0,1-1.582,1.583l-1.106.414a.749.749,0,0,0,0,1.4Zm3.805-2.261a4.192,4.192,0,0,0,1.558,1.559,4.185,4.185,0,0,0-1.558,1.559,4.2,4.2,0,0,0-1.559-1.559A4.2,4.2,0,0,0,32.116,2.733Z"></path><path d="M36.743,9.649l.838.314a1.868,1.868,0,0,1,1.093,1.094l.314.838a.75.75,0,0,0,1.405,0l.313-.838A1.869,1.869,0,0,1,41.8,9.963l.838-.314a.75.75,0,0,0,0-1.4L41.8,7.931h0a1.857,1.857,0,0,1-1.092-1.092L40.393,6a.75.75,0,0,0-1.405,0l-.314.839a1.866,1.866,0,0,1-1.093,1.093l-.839.314a.749.749,0,0,0,0,1.4ZM39.69,8.1a3.344,3.344,0,0,0,.843.843,3.389,3.389,0,0,0-.843.842,3.369,3.369,0,0,0-.842-.842A3.34,3.34,0,0,0,39.69,8.1Z"></path><path d="M41.428,4.994l.838.314A1.866,1.866,0,0,1,43.359,6.4l.314.838a.75.75,0,0,0,1.405,0l.314-.838a1.864,1.864,0,0,1,1.092-1.093l.839-.314a.749.749,0,0,0,0-1.4l-.838-.315h0a1.863,1.863,0,0,1-1.092-1.092l-.314-.839a.75.75,0,0,0-1.405,0l-.314.839a1.864,1.864,0,0,1-1.093,1.092l-.839.315a.749.749,0,0,0,0,1.4ZM44.375,3.45a3.4,3.4,0,0,0,.842.842,3.4,3.4,0,0,0-.842.842,3.369,3.369,0,0,0-.842-.842A3.385,3.385,0,0,0,44.375,3.45Z"></path><path d="M45.811,42.371a.75.75,0,0,0-.75.75v3.114a.265.265,0,0,1-.265.265H40.9a.265.265,0,0,1-.265-.265V44.951a.75.75,0,0,0-1.5,0v1.284A1.767,1.767,0,0,0,40.9,48h3.9a1.767,1.767,0,0,0,1.765-1.765V43.121A.75.75,0,0,0,45.811,42.371Z"></path><path d="M8.062,44.2a.75.75,0,0,0-.75.75v1.284a.265.265,0,0,1-.264.265h-3.9a.265.265,0,0,1-.264-.265V43.121a.75.75,0,0,0-1.5,0v3.114A1.766,1.766,0,0,0,3.146,48h3.9a1.766,1.766,0,0,0,1.764-1.765V44.951A.75.75,0,0,0,8.062,44.2Z"></path><path d="M46.429,18.855l-2.5-.432a1.634,1.634,0,0,0-1.8.967l-.135.3L40.222,15.51a6.084,6.084,0,0,0-4.668-3.664A74.749,74.749,0,0,0,24,11a74.749,74.749,0,0,0-11.554.847A6.084,6.084,0,0,0,7.778,15.51L6,19.694,5.874,19.4a1.639,1.639,0,0,0-1.8-.978l-2.5.433A1.736,1.736,0,0,0,.122,20.568v.491a1.744,1.744,0,0,0,1.362,1.7l2.374.536L2.806,24.9a8.488,8.488,0,0,0-1.395,4.67V38.1c0,3.219,2.242,5.3,5.714,5.3h33.75c3.472,0,5.714-2.08,5.714-5.3V29.566a8.488,8.488,0,0,0-1.395-4.67l-1.052-1.6,2.366-.534a1.746,1.746,0,0,0,1.369-1.7v-.491A1.735,1.735,0,0,0,46.429,18.855ZM1.807,21.291a.237.237,0,0,1-.185-.232v-.491a.233.233,0,0,1,.2-.234L4.333,19.9A.148.148,0,0,1,4.5,20l.613,1.386-.374.57ZM45.089,35.77H4.812a.75.75,0,0,0,0,1.5H45.089V38.1c0,2.378-1.575,3.8-4.214,3.8H7.125c-2.639,0-4.214-1.421-4.214-3.8V29.566A7,7,0,0,1,4.06,25.718l2.364-3.606H39.145a.75.75,0,0,0,0-1.5H7.243L9.159,16.1a4.588,4.588,0,0,1,3.522-2.768A73.024,73.024,0,0,1,24,12.5a73.024,73.024,0,0,1,11.319.829A4.588,4.588,0,0,1,38.841,16.1l2.192,5.167a.669.669,0,0,0,.063.118l2.844,4.337a7,7,0,0,1,1.149,3.848Zm1.288-14.711a.239.239,0,0,1-.191.234l-2.922.66-.374-.57.617-1.4a.151.151,0,0,1,.163-.086l2.506.434a.233.233,0,0,1,.2.234Z"></path></svg> 

src/static/hand-key.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="79.399" height="71.646" viewBox="0 0 79.399 71.646"><defs><clipPath id="clip-path"><rect id="Rectangle_53" data-name="Rectangle 53" width="79.399" height="71.646" fill="none"></rect></clipPath></defs><g id="Group_446" data-name="Group 446" clip-path="url(#clip-path)"><path id="Path_73" data-name="Path 73" d="M121.441,26.921l9.133,3.8a14.153,14.153,0,0,0,5.439,1.091A14.446,14.446,0,0,0,146.5,27.243l10.47,4.348a1.163,1.163,0,0,0,.892-2.148l-9.875-4.1a14.315,14.315,0,0,0,2.2-5.953l13.783,5.725.261.106.219.089-.276.662a2.285,2.285,0,0,0-.02,1.847,2.345,2.345,0,0,0,1.292,1.212l3.163,1.314a2.037,2.037,0,0,0,1.622.043,2.131,2.131,0,0,0,1.117-1.253l.219-.529.006-.014a.271.271,0,0,1,.285-.2l3.812,1.583a2.74,2.74,0,0,1,1.537,3.868c-.519,1.249-2,2.811-3.967,2l-10.322-4.29a1.163,1.163,0,1,0-.893,2.148l10.323,4.291a5.124,5.124,0,0,0,1.973.408,5.678,5.678,0,0,0,5.034-3.66,5.513,5.513,0,0,0,.215-3.832,5.015,5.015,0,0,0-3.007-3.077l-3.891-1.616a2.588,2.588,0,0,0-1.868.066,2.558,2.558,0,0,0-1.387,1.443l-.156.376-2.923-1.214-.019-.008,0-.009.4-.956a1.95,1.95,0,0,0,.047-1.544,2.672,2.672,0,0,0-1.671-1.3l-.234-.095L150.3,16.914a14.29,14.29,0,0,0-8.782-12.57l-9.133-3.8a7.182,7.182,0,0,0-9.365,3.874l-5.452,13.132h0a7.178,7.178,0,0,0,3.872,9.368m-1.723-8.477L125.17,5.312A4.856,4.856,0,0,1,131.494,2.7l9.133,3.8a11.965,11.965,0,0,1,7.362,11.094,1.164,1.164,0,0,0,0,.182,11.956,11.956,0,0,1-2.68,7.308c-.02.023-.039.046-.058.071a12.012,12.012,0,0,1-13.784,3.423l-9.133-3.8a4.849,4.849,0,0,1-2.615-6.329" transform="translate(-103.411 0)"></path><path id="Path_74" data-name="Path 74" d="M185.832,81.287a4.56,4.56,0,0,0,5.956-2.457l2.4-5.773a4.559,4.559,0,1,0-8.421-3.5l-2.392,5.77a4.561,4.561,0,0,0,2.459,5.957m-.312-5.062v0l2.393-5.77a2.243,2.243,0,0,1,2.069-1.377,2.217,2.217,0,0,1,.848.169,2.242,2.242,0,0,1,1.207,2.921l-2.4,5.774a2.231,2.231,0,0,1-4.119-1.714" transform="translate(-161.735 -58.987)"></path><path id="Path_75" data-name="Path 75" d="M79.315,365.71a4.059,4.059,0,0,0-1.776-2.681,5.2,5.2,0,0,0-3.731-.606l-18.546,2.851a11.875,11.875,0,0,1-4.315-.327c-.542-.108-1.1-.219-1.7-.315L37.7,362.043c-1.577-.527-1.449-1.642-1.371-1.974a1.61,1.61,0,0,1,1.888-1.225l.029,0c1.491.188,2.447.274,3.658.384.665.06,1.419.128,2.368.224a9.471,9.471,0,0,0,.953.049c3.524,0,5.483-2.134,5.874-4.407.454-2.637-1.1-5.8-4.953-6.739l-.066-.014-4.995-.917c-4.9-.894-8.437-.182-15.35,1.381L13.746,351.52A3.146,3.146,0,0,0,10.6,348.4H3.143A3.146,3.146,0,0,0,0,351.542V359.1a1.163,1.163,0,1,0,2.326,0v-7.554a.817.817,0,0,1,.816-.817H10.6a.817.817,0,0,1,.816.817v19.6a.817.817,0,0,1-.816.817H3.143a.817.817,0,0,1-.816-.817v-6.429a1.163,1.163,0,1,0-2.326,0v6.429a3.146,3.146,0,0,0,3.142,3.143H10.6a3.146,3.146,0,0,0,3.14-3.077l11.8,3L39.278,377.7a15.079,15.079,0,0,0,4.331.613,15.951,15.951,0,0,0,3.366-.358L74.919,371.9a5.7,5.7,0,0,0,3.614-2.429,5.171,5.171,0,0,0,.782-3.761m-4.889,3.917-27.943,6.058a13.244,13.244,0,0,1-6.546-.212l-.057-.016-13.76-3.5h0l-12.372-3.142V353.9l12.506-2.829c7.092-1.6,10.173-2.137,14.418-1.362l4.959.911c1.855.466,3.537,2.01,3.181,4.078-.235,1.366-1.486,2.724-4.3,2.438-.962-.1-1.722-.165-2.393-.226-1.185-.107-2.121-.192-3.563-.373a3.914,3.914,0,0,0-4.486,3,3.8,3.8,0,0,0,.4,2.775,4.431,4.431,0,0,0,2.577,1.96c.033.01.066.02.1.027l11.631,2.61.074.014c.569.089,1.118.2,1.648.3a13.873,13.873,0,0,0,5.122.344l18.556-2.853.018,0c1.578-.268,2.616.254,2.843,1.433a3.151,3.151,0,0,1-2.605,3.476" transform="translate(-0.001 -306.672)"></path></g></svg> 

src/static/like.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="72" viewBox="0 0 64 72"><defs><clipPath id="clip-path"><rect id="Rectangle_52" data-name="Rectangle 52" width="64" height="72" transform="translate(0 0)" fill="none"></rect></clipPath></defs><g id="Group_443" data-name="Group 443" transform="translate(0 0.039)"><g id="Group_442" data-name="Group 442" transform="translate(0 -0.039)" clip-path="url(#clip-path)"><path id="Path_65" data-name="Path 65" d="M311.4,0A1.4,1.4,0,0,0,310,1.4V7.831a1.4,1.4,0,1,0,2.8,0V1.4A1.4,1.4,0,0,0,311.4,0" transform="translate(-266.647 0.044)"></path><path id="Path_66" data-name="Path 66" d="M81.4,312a1.4,1.4,0,1,0,1.4,1.4,1.4,1.4,0,0,0-1.4-1.4" transform="translate(-68.812 -268.324)"></path><path id="Path_67" data-name="Path 67" d="M64.33,132.012a5.6,5.6,0,0,0-5.594-5.594H48.3a35.119,35.119,0,0,0,2.144-13.35,15.927,15.927,0,0,0-.1-1.608,5.593,5.593,0,0,0-11.184.134v1.4c0,8.845-11.358,13.814-19.929,15.945a4.2,4.2,0,0,0-3.845-2.52H1.4a1.4,1.4,0,0,0-1.4,1.4v33.563a1.4,1.4,0,0,0,1.4,1.4H15.383a4.2,4.2,0,0,0,3.832-2.491q1.065.273,1.977.513a45.358,45.358,0,0,0,14.114,1.978H50.345a5.591,5.591,0,0,0,4.647-8.7A5.61,5.61,0,0,0,57.8,145.68a5.592,5.592,0,0,0,2.787-8.387,5.6,5.6,0,0,0,3.744-5.281M16.782,158.582a1.4,1.4,0,0,1-1.4,1.4H2.8V129.215H15.383a1.4,1.4,0,0,1,1.4,1.4Zm41.954-23.774H51.743a1.4,1.4,0,1,0,0,2.8h4.2a2.8,2.8,0,0,1,0,5.594H48.946a1.4,1.4,0,1,0,0,2.8h4.2a2.8,2.8,0,1,1,0,5.594H46.149a1.4,1.4,0,0,0,0,2.8h4.2a2.8,2.8,0,0,1,0,5.594H35.306A42.664,42.664,0,0,1,21.9,158.094q-1.057-.276-2.32-.6V131.735c10.12-2.411,22.375-8.295,22.375-18.743v-1.4a2.8,2.8,0,0,1,5.594,0v0c0,.608.759,8.067-2.283,14.824H40.556a1.4,1.4,0,1,0,0,2.8h18.18a2.8,2.8,0,1,1,0,5.594" transform="translate(0 -91.132)"></path><path id="Path_68" data-name="Path 68" d="M81.4,352a1.4,1.4,0,0,0-1.4,1.4v11.188a1.4,1.4,0,1,0,2.8,0V353.4a1.4,1.4,0,0,0-1.4-1.4" transform="translate(-68.812 -302.73)"></path><path id="Path_69" data-name="Path 69" d="M196.992,126H191.4a1.4,1.4,0,0,0,0,2.8h5.594a1.4,1.4,0,1,0,0-2.8" transform="translate(-163.429 -108.336)"></path><path id="Path_70" data-name="Path 70" d="M396.992,126H391.4a1.4,1.4,0,0,0,0,2.8h5.594a1.4,1.4,0,0,0,0-2.8" transform="translate(-335.46 -108.336)"></path><path id="Path_71" data-name="Path 71" d="M372.912,41.56a1.4,1.4,0,0,0-1.978,0l-3.955,3.955a1.4,1.4,0,1,0,1.978,1.978l3.955-3.955a1.4,1.4,0,0,0,0-1.978" transform="translate(-315.307 -35.352)"></path><path id="Path_72" data-name="Path 72" d="M231.492,45.515l-3.955-3.955a1.4,1.4,0,1,0-1.978,1.978l3.955,3.955a1.4,1.4,0,0,0,1.978-1.978" transform="translate(-193.664 -35.352)"></path></g></g></svg>