Skip to content

Instantly share code, notes, and snippets.

@jpmarchand
Last active June 12, 2023 07:59
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jpmarchand/fa1e45ba3778eaf9c89039086219c826 to your computer and use it in GitHub Desktop.
Save jpmarchand/fa1e45ba3778eaf9c89039086219c826 to your computer and use it in GitHub Desktop.
Custom Dropshare Landing Page
<!-- Dropshare Landing Page HTML - Updated June 2023 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>__FILENAME__</title>
<link rel="stylesheet" href="/lib/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header class="site-header">
<div class="wrap">
<ul>
<li class="menu-item"><i class="fa-regular fa-file"></i> __FILENAME__</li>
<li class="menu-item alignright"><a class="download" href="__PATH__" download="__FILENAME__"><i class="fa-solid fa-cloud-arrow-down"></i> Download (__FILESIZE__)</a></li>
</ul>
</div>
</header>
<div class="content">__PREVIEW__</div>
</body>
</html>
/* Dropshare Landing Page CSS - Updated June 2023 */
.site-header {
border-bottom: 1px solid #eee;
overflow: hidden;
background-color: #fafafa;
}
.wrap {
max-width: 1280px;
margin: 0 auto;
}
body {
font-family: 'Source Sans 3', sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-weight: 400;
color: #333;
margin: 0;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
float: left;
}
.menu-item {
display: inline-block;
line-height: 1;
padding: 18px;
}
.alignright {
float: right;
}
a.download {
text-decoration: none;
color: #333;
}
a.download:hover {
color: #ff3366;
}
.content {
margin: 50px 20px;
text-align: center;
}
/* Previews */
img {
max-width: 100%;
max-height: 80vh;
border: 1px solid #eee;
}
video, iframe {
height: auto;
max-height: 80vh;
width: 100%;
}
iframe {
height: 80vh;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment