From 681dfa9c009305b50c894d60d1be4b8a4e288cb3 Mon Sep 17 00:00:00 2001 From: ditaajipratama Date: Wed, 26 Jun 2024 09:53:24 +0700 Subject: [PATCH] Add CostaPy template --- costapy-template/kiddy/html/footer.html | 7 + costapy-template/kiddy/html/index.html | 22 +++ costapy-template/kiddy/html/navbar.html | 22 +++ costapy-template/kiddy/main.py | 11 ++ costapy-template/kiddy/static/style.css | 180 ++++++++++++++++++++++++ 5 files changed, 242 insertions(+) create mode 100644 costapy-template/kiddy/html/footer.html create mode 100644 costapy-template/kiddy/html/index.html create mode 100644 costapy-template/kiddy/html/navbar.html create mode 100644 costapy-template/kiddy/main.py create mode 100644 costapy-template/kiddy/static/style.css diff --git a/costapy-template/kiddy/html/footer.html b/costapy-template/kiddy/html/footer.html new file mode 100644 index 0000000..7e94b8a --- /dev/null +++ b/costapy-template/kiddy/html/footer.html @@ -0,0 +1,7 @@ + +
+
+

${copyright}

+

Privacy Policy | Terms of Service

+
+
diff --git a/costapy-template/kiddy/html/index.html b/costapy-template/kiddy/html/index.html new file mode 100644 index 0000000..57f4eee --- /dev/null +++ b/costapy-template/kiddy/html/index.html @@ -0,0 +1,22 @@ + + + + + + ${title} + + + + + + ${navbar} + + ${container} + + ${footer} + + + + + + diff --git a/costapy-template/kiddy/html/navbar.html b/costapy-template/kiddy/html/navbar.html new file mode 100644 index 0000000..c19c213 --- /dev/null +++ b/costapy-template/kiddy/html/navbar.html @@ -0,0 +1,22 @@ + + diff --git a/costapy-template/kiddy/main.py b/costapy-template/kiddy/main.py new file mode 100644 index 0000000..9e23dc7 --- /dev/null +++ b/costapy-template/kiddy/main.py @@ -0,0 +1,11 @@ +from core import html + +def main(dir, page): + html_template = html.main.get_html("templates/kiddy/html") + html_page = html.main.get_html(dir) + return { + "index" : html_template [ "index.html" ], + "navbar" : html_template [ "navbar.html" ], + "footer" : html_template [ "footer.html" ], + "container" : html_page [f"{page}.html" ] + } diff --git a/costapy-template/kiddy/static/style.css b/costapy-template/kiddy/static/style.css new file mode 100644 index 0000000..8656b70 --- /dev/null +++ b/costapy-template/kiddy/static/style.css @@ -0,0 +1,180 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #f8f9fa; +} +.navbar { + margin-bottom: 0; +} +.header { + background: url('https://img.freepik.com/free-photo/little-cute-boy-proud-when-he-finish-drawing-with-happiness-raised-two-hands-his-head-smile_1150-15403.jpg') no-repeat center center; + background-size: cover; + color: white; + padding: 100px 0; + text-align: center; + position: relative; + min-height: 400px; +} +.header-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 123, 255, 0.6); + z-index: 1; +} +.header-content { + position: relative; + z-index: 2; +} +.header h1 { + margin: 0; + font-size: 3em; + font-family: 'Comic Sans MS', cursive, sans-serif; +} +.header p { + font-size: 1.5em; +} +.packages { + padding: 50px 0; + text-align: center; +} +.packages h2 { + font-size: 2.5em; + margin-bottom: 50px; +} +.package { + border-radius: 15px; + padding: 20px; + margin: 20px 0; + background-color: white; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + transition: transform 0.2s; + color: white; +} +.package:hover { + transform: scale(1.05); +} +.package:nth-child(1) { background-color: #FF6F61; } +.package:nth-child(2) { background-color: #6B5B95; } +.package:nth-child(3) { background-color: #FFA07A; } +.package:nth-child(4) { background-color: #88B04B; } +.package .btn { + background-color: white; + color: black; + border: none; + margin-top: 10px; + padding: 10px 20px; + border-radius: 5px; +} +.package .btn:hover { + background-color: #f0f0f0; + color: black; +} +.package img { + width: 80px; + margin-bottom: 10px; +} +.about-us { + padding: 50px 0; + background-color: #FFC857; + text-align: center; +} +.about-us h2 { + font-size: 2.5em; + margin-bottom: 20px; +} +.about-us p { + font-size: 1.2em; + max-width: 800px; + margin: 0 auto; +} +.price-plan { + padding: 50px 0; + text-align: center; + background-color: #fff; +} +.price-plan h2 { + font-size: 2.5em; + margin-bottom: 50px; +} +.price-card { + border-radius: 15px; + padding: 30px; + margin: 20px; + background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + transition: transform 0.2s; + color: white; + position: relative; + overflow: hidden; +} +.price-card:hover { + transform: scale(1.05); +} +.price-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.1); + z-index: 1; + pointer-events: none; +} +.price-card h3 { + font-size: 2em; + margin-bottom: 20px; +} +.price-card p { + font-size: 1.2em; + margin-bottom: 10px; + z-index: 2; + position: relative; +} +.price-card .btn { + margin-top: 20px; + padding: 10px 20px; + border-radius: 50px; + z-index: 2; + position: relative; + background-color: rgba(255, 255, 255, 0.9); + color: #333; + border: none; +} +.price-card .btn:hover { + background-color: rgba(255, 255, 255, 1); + color: #333; +} +.get-started { + padding: 50px 0; + display: flex; + justify-content: space-between; + align-items: center; + background-color: #f8f9fa; + text-align: left; +} +.get-started .content { + flex: 1; + font-size: 1.2em; + margin-right: 20px; +} +.get-started .btn { + font-size: 1.2em; + padding: 15px 30px; + border-radius: 50px; +} +.footer { + background-color: #343a40; + color: white; + padding: 20px 0; + text-align: center; +} +.footer a { + color: #ffc107; + text-decoration: none; +} +.footer a:hover { + text-decoration: underline; +}