AGs

Kunst

Musik

Dummy

Der obere Code ist nur der Bereich für die Boxen, zusammen mit einer Dummy box. Dabei sollte pro neuer Box die id der ersten div box geändert werden, der Titel (h1), die SVGs (Icon und Hintergrund), Farben und der zuöffnende Link (in der ersten div box).

     <div class="ags">

       <div class="ags-category" id="Dummy" style="background: #4e5263" onclick='window.open("https://dummy.com", "_self");'>
        <svg class="ags-category-bg" xmlns="http://www.w3.org/2000/svg" width="330.065" height="206.17" viewBox="0 0 330.065 206.17">
          <path id="Pfad_143" data-name="Pfad 143" d="M1501.592,642.688c-55.618,0-48.116,84.146-143.392,93.2-50.4,4.789-109.12,34-145.264,60.614-32.686,24.067-41.409,52.291-41.409,52.291l330.065.065Z" transform="translate(-1171.527 -642.688)"/>
        </svg>

        <div class="ags-category-detail">
          <svg class="ags-detail-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.579 132.775">
            <g id="Gruppe_40" data-name="Gruppe 40" transform="translate(-333.261 -59.224)">
              <g id="Gruppe_39" data-name="Gruppe 39" transform="translate(333.261 59.224)">
                <path id="Pfad_142" data-name="Pfad 142" d="M406.84,97.879a38.251,38.251,0,0,1-6.954,22.073,39.068,39.068,0,0,1-18.536,14.239v7.26a12.858,12.858,0,0,1-25.716,0V124.841a14.154,14.154,0,0,1,13.847-14.133,12.915,12.915,0,1,0-12.361-19.473,12.866,12.866,0,0,1-22.182-.419,12.637,12.637,0,0,1,.18-12.886,38.646,38.646,0,0,1,71.694,18.417C406.833,96.857,406.84,97.371,406.84,97.879Z" transform="translate(-333.261 -59.224)"/>
              </g>
              <rect id="Rechteck_98" data-name="Rechteck 98" width="25.716" height="25.716" rx="12.858" transform="translate(355.635 166.283)"/>
            </g>
          </svg>

          <h1 class="ags-detail-title">Dummy</h1>
        </div>
    </div>


    <!-- Platz für mehr Boxen -->


</div>





-----------------------------------------------------------------------------------------------------------

Übersichtlicherer Code zum Übernehmen. <svg>...</svg> enthält hineinkopierten Code und stellt die Icons bzw. die Hintergründe dar. Der Code ist in einem Codeblock in die Seite integriert. Styleanpassungen für die Titel und Farben sind im <style></style> Bereich und werden mit Klassen und IDs definiert.


    <div class="ags">

      <div class="ags-category" id="Sport" style="background: #3199AE"  onclick='window.open("https://www.google.com/search?q=Sport", "_self");'>
        <svg class="ags-category-bg" xmlns="http://www.w3.org/2000/svg" fill="#10465e" width="351.276" height="218.151" viewBox="0 0 351.276 218.151">...</svg>
        <div class="ags-category-detail">
          <svg class="ags-detail-icon" xmlns="http://www.w3.org/2000/svg" width="89.012" height="103.854" viewBox="0 0 89.012 103.854">...</svg>
          <h1 class="ags-detail-title">Sport</h1>
        </div>

      </div>  

      <div class="ags-category" id="Kunst" style="background: #ed4b82" onclick='window.open("https://www.google.com/search?q=Kunst", "_self");'>
        <svg class="ags-category-bg" xmlns="http://www.w3.org/2000/svg" fill="#8c143d" width="351.276" height="218.151" viewBox="0 0 351.276 218.151">...</svg>
        <div class="ags-category-detail">
          <svg class="ags-detail-icon" id="ags-detail-icon-kunst" xmlns="http://www.w3.org/2000/svg" width="115.968" height="134.33" viewBox="0 0 115.968 134.33">...</svg>

          <h1 class="ags-detail-title">Kunst</h1>
        </div>

      </div>

      <div class="ags-category" id="Musik" style="background: #4bedb6" onclick='window.open("https://www.google.com/search?q=Musik", "_self");'>
        <svg class="ags-category-bg" xmlns="http://www.w3.org/2000/svg" fill="#2b906d" width="351.276" height="218.151" viewBox="0 0 351.276 218.151">...</svg>
        <div class="ags-category-detail">
          <svg class="ags-detail-icon" xmlns="http://www.w3.org/2000/svg" width="89.913" height="89.81" viewBox="0 0 89.913 89.81">...</svg>

          <h1 class="ags-detail-title">Musik</h1>
        </div>

      </div>

    </div>