diff --git a/wiki/pages/home.html b/wiki/pages/home.html index 4ed0fd88a8233b1ea34377f5ab716f1906473555..5833a0f783227dbc1031ce2c1c3de8c28ddfdb06 100644 --- a/wiki/pages/home.html +++ b/wiki/pages/home.html @@ -224,7 +224,55 @@ .read-more-button:hover { background-color: #ff6b5b; } - + + .ape-solution { + width: 90%; + max-width: 1000px; + margin: 50px auto; + background-color: #ffffff; + border-radius: 15px; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 30px; + } + + .ape-solution h2 { + font-family: 'Merriweather', serif; + font-size: 2rem; + color: #333; + text-align: center; + margin-bottom: 30px; + } + + .ape-row { + display: flex; + align-items: center; + margin-bottom: 20px; + } + + .ape-icon { + width: 50px; + height: 50px; + margin-right: 20px; + } + + .ape-text { + flex: 1; + } + + .ape-title { + font-family: 'Merriweather', serif; + font-size: 1.5rem; + color: #333; + margin: 0 0 5px 0; + } + + .ape-description { + font-size: 1.1rem; + color: #666; + margin: 0; + } + </style> </head> <body> @@ -312,6 +360,34 @@ </div> </div> </div> + + <div class="ape-solution"> + <h2>We offer an APE solution!</h2> + + <div class="ape-row"> + <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-sf1.png" alt="Affordable" class="ape-icon"> + <div class="ape-text"> + <h3 class="ape-title">Affordable</h3> + <p class="ape-description">Our solution is cost-effective, making it accessible to a wider range of patients.</p> + </div> + </div> + + <div class="ape-row"> + <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-sf2.png" alt="Potential" class="ape-icon"> + <div class="ape-text"> + <h3 class="ape-title">Potential</h3> + <p class="ape-description">The innovative approach shows great potential for treating IBD and possibly other conditions.</p> + </div> + </div> + + <div class="ape-row"> + <img src="https://static.igem.wiki/teams/5187/wiki-home-fig/home-sf3.png" alt="Efficiency" class="ape-icon"> + <div class="ape-text"> + <h3 class="ape-title">Efficiency</h3> + <p class="ape-description">Our method is designed to efficiently deliver treatment, maximizing its effectiveness.</p> + </div> + </div> + </div> </div> </div>