-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
481ff78
commit 28d7af5
Showing
1 changed file
with
198 additions
and
0 deletions.
There are no files selected for viewing
This file contains 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,198 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Cloud Gallery</title> | ||
<style> | ||
body { | ||
font-family: Arial, sans-serif; | ||
margin: 0; | ||
padding: 0; | ||
background-color: white; | ||
color: black; | ||
} | ||
header { | ||
background-color: white; | ||
text-align: center; | ||
padding: 20px 0; | ||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
} | ||
.container { | ||
max-width: 1200px; | ||
margin: 0 auto; | ||
padding: 20px; | ||
} | ||
.app-details { | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
padding: 40px 20px; | ||
} | ||
.app-details .text { | ||
max-width: 50%; | ||
} | ||
.app-details h2 { | ||
color: black; | ||
font-size: 32px; | ||
margin-bottom: 10px; | ||
} | ||
.app-details p { | ||
font-size: 16px; | ||
margin-bottom: 20px; | ||
} | ||
.app-details .screenshots img { | ||
width: 300px; | ||
height: auto; | ||
border-radius: 10px; | ||
margin: 0 10px; | ||
transition: transform 0.3s; | ||
} | ||
.app-details .screenshots img:hover { | ||
transform: scale(1.05); | ||
} | ||
.features { | ||
padding: 40px 20px; | ||
} | ||
.features h2 { | ||
text-align: center; | ||
margin-bottom: 30px; | ||
} | ||
.features .feature-list { | ||
display: flex; | ||
flex-wrap: wrap; | ||
justify-content: space-around; | ||
gap: 20px; | ||
} | ||
.feature { | ||
padding: 20px; | ||
width: 30%; | ||
border-radius: 15px; | ||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); | ||
transition: transform 0.3s, box-shadow 0.3s, background 0.3s; | ||
} | ||
.feature:hover { | ||
transform: translateY(-5px); | ||
background-color: rgba(204, 49, 61, 0.1); | ||
} | ||
.feature h3 { | ||
margin-bottom: 10px; | ||
} | ||
footer { | ||
display: flex; | ||
justify-content: space-between; | ||
padding: 40px 20px; | ||
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); | ||
} | ||
footer .footer-section { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: flex-start; | ||
gap: 10px; | ||
} | ||
footer a { | ||
text-decoration: none; | ||
color: black; | ||
font-size: 14px; | ||
transition: color 0.3s; | ||
} | ||
footer a:hover { | ||
color: #CC313D; | ||
} | ||
footer img { | ||
width: 150px; | ||
transition: transform 0.3s; | ||
} | ||
footer img:hover { | ||
transform: scale(1.05); | ||
} | ||
@media (max-width: 768px) { | ||
.app-details { | ||
flex-direction: column; | ||
text-align: center; | ||
} | ||
.app-details .text { | ||
max-width: 100%; | ||
margin-bottom: 20px; | ||
} | ||
.features .feature-list .feature { | ||
width: 45%; | ||
} | ||
footer { | ||
flex-direction: column; | ||
text-align: center; | ||
gap: 20px; | ||
} | ||
} | ||
@media (max-width: 480px) { | ||
.features .feature-list .feature { | ||
width: 100%; | ||
} | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<header> | ||
<h1>Cloud Gallery</h1> | ||
<p>All Your Memories in One Spot</p> | ||
</header> | ||
<div class="container"> | ||
<section class="app-details"> | ||
<div class="text"> | ||
<h2>Cloud Gallery: All Your Memories in One Spot</h2> | ||
<p>Enjoy all your media in one spot! Easily view and manage photos, videos from Google Drive, Dropbox, and your device, all in a simple, user-friendly interface.</p> | ||
<div style="display: flex; gap: 30px;"> | ||
<a href="https://play.google.com/store/apps/details?id=com.canopas.cloud_gallery"> | ||
<img src="https://github.com/canopas/cloud-gallery/raw/main/cta/google-play.png" width="200" alt="Download on Google Play"> | ||
</a> | ||
<a href="https://apps.apple.com/in/app/cloud-gallery/id6480052005?platform=iphone"> | ||
<img src="https://github.com/canopas/cloud-gallery/raw/main/cta/app-store.png" width="200" alt="Download on App Store"> | ||
</a> | ||
</div> | ||
</div> | ||
<div class="screenshots"> | ||
<img src="https://github.com/canopas/cloud-gallery/raw/main/screenshots/home-light.png" alt="Screenshot"> | ||
|
||
</div> | ||
</section> | ||
<section class="features"> | ||
<h2>Features</h2> | ||
<div class="feature-list"> | ||
<div class="feature"> | ||
<h3>Sync with Cloud Providers</h3> | ||
<p>Access and manage photos and videos from your device, Google Drive, and Dropbox in one place.</p> | ||
</div> | ||
<div class="feature"> | ||
<h3>Auto Backup</h3> | ||
<p>Securely back up your photos and videos to Google Drive or Dropbox automatically.</p> | ||
</div> | ||
<div class="feature"> | ||
<h3>Effortless Transfers</h3> | ||
<p>Upload or download media with just a few clicks, from your device to the cloud or vice versa.</p> | ||
</div> | ||
</div> | ||
</section> | ||
</div> | ||
<footer> | ||
<div class="footer-section"> | ||
<a href="#">Terms and Conditions</a> | ||
<a href="#">Privacy Policy</a> | ||
</div> | ||
<div class="footer-section"> | ||
<a href="#">Community</a> | ||
<a href="#">Having an Issue?</a> | ||
<a href="#">Contact Us</a> | ||
<a href="#">Source Code</a> | ||
<a href="#">About Us</a> | ||
</div> | ||
<div class="footer-section"> | ||
<a href="https://play.google.com/store/apps/details?id=com.canopas.cloud_gallery"> | ||
<img src="https://github.com/canopas/cloud-gallery/raw/main/cta/google-play.png" alt="Download from Google Play"> | ||
</a> | ||
<a href="https://apps.apple.com/in/app/cloud-gallery/id6480052005?platform=iphone"> | ||
<img src="https://github.com/canopas/cloud-gallery/raw/main/cta/app-store.png" alt="Download on App Store"> | ||
</a> | ||
</div> | ||
</footer> | ||
</body> | ||
</html> |