Created
December 30, 2024 12:01
-
-
Save sunmeat/633f29aaf88e3349034a3b14f7819c08 to your computer and use it in GitHub Desktop.
демо фреймів
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="uk"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Демонстрація фреймів</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| background: #f5f5f5; | |
| color: #333; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #333; | |
| padding: 20px; | |
| margin-top: 20px; | |
| font-size: 2em; | |
| } | |
| .container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| justify-content: center; | |
| margin: 20px; | |
| } | |
| .frame-container { | |
| width: 100%; | |
| max-width: 600px; | |
| margin-bottom: 20px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| background: #fff; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .frame-container:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 300px; | |
| border: 0; | |
| border-radius: 0 0 8px 8px; | |
| } | |
| .frame-title { | |
| background: linear-gradient(135deg, #4A90E2, #50E3C2); | |
| color: #fff; | |
| padding: 15px; | |
| text-align: center; | |
| font-size: 1.3em; | |
| font-weight: bold; | |
| border-radius: 8px 8px 0 0; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Приклад використання фреймів для вбудованих контентів</h1> | |
| <div class="container"> | |
| <!-- фрейм для сайта itstep.org --> | |
| <div class="frame-container"> | |
| <div class="frame-title">Сайт IT STEP</div> | |
| <iframe src="https://www.itstep.org/" title="IT Step website"></iframe> | |
| </div> | |
| <!-- фрейм для YouTube ролика --> | |
| <div class="frame-container"> | |
| <div class="frame-title">YouTube Відео</div> | |
| <iframe src="https://www.youtube.com/embed/Sa4dCWLibU8" allowfullscreen></iframe> | |
| </div> | |
| <!-- фрейм для карты Google --> | |
| <div class="frame-container"> | |
| <div class="frame-title">Карта Одеського Оперного театру</div> | |
| <iframe | |
| src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAlehQRLpq9Me6q3m8MiNASmaB6jH8r-MI&q=Одеський+національний+академічний+театр+опери+та+балету,Одеса,Україна" | |
| allowfullscreen></iframe> | |
| </div> | |
| <!-- фрейм для сайта Wikipedia --> | |
| <div class="frame-container"> | |
| <div class="frame-title">Вікіпедія</div> | |
| <iframe src="https://uk.wikipedia.org/wiki/HTML" title="Wikipedia"></iframe> | |
| </div> | |
| <!-- фрейм для гугл документів --> | |
| <div class="frame-container"> | |
| <div class="frame-title">Google Документ</div> | |
| <iframe | |
| src="https://docs.google.com/document/d/13ylLN85LHgXuBYGIui8j5mVHeZeuiN7JbA5lpRwo0BU/edit?usp=sharing" | |
| title="Google Document"></iframe> | |
| </div> | |
| <!-- фрейм для сайта Alerts --> | |
| <div class="frame-container"> | |
| <div class="frame-title">Карта повітряних тривог</div> | |
| <iframe src="https://alerts.in.ua/" title="Alerts"></iframe> | |
| </div> | |
| <!-- фрейм для Dou.ua --> | |
| <div class="frame-container"> | |
| <div class="frame-title">Dou.ua</div> | |
| <iframe src="https://dou.ua/" title="Dou.ua"></iframe> | |
| </div> | |
| <!-- фрейм для SuperPupers --> | |
| <div class="frame-container"> | |
| <div class="frame-title">Подаруночки</div> | |
| <iframe src="https://superpupers.com/" title="SuperPupers"></iframe> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment