Download_buttons

Shailsharma2604 · Shailsharma2604 · commit 16d4d7f241e1 · 2024-10-24T06:44:03.000Z
diff --git a/download_buttons/index.html b/download_buttons/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Download_buttons</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <ul>
+        <li>
+          <div class="download android">
+            <i class="fa fa fa-android fa-3x"></i>
+            <span class="df">Download from</span>
+            <span class="dfn">Google Play</span>
+          </div>
+        </lI>
+        <li>
+          <div class="download apple">
+            <i class="fa fa fa-apple fa-3x"></i>
+            <span class="df">Download from</span>
+            <span class="dfn">App Store</span>
+          </div>
+        </li>
+        <li>
+          <div class="download windows">
+            <i class="fa fa fa-windows fa-3x"></i>
+            <span class="df">Download from</span>
+            <span class="dfn">Windows Store</span>
+          </div>
+        </li>
+      </ul>
+</body>
+</html>
diff --git a/download_buttons/styles.css b/download_buttons/styles.css
@@ -0,0 +1,65 @@
+@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
+@import url(https://fonts.googleapis.com/css?family=Open+Sans);
+* {
+  font-family: 'Open Sans', 'sans-serif';
+}
+
+html, body {
+  overflow: hidden;
+}
+
+ul {
+  width: 100%;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+li {
+  display: inline-block;
+  margin: 10px;
+}
+
+.download {
+  width: 200px;
+  height: 75px;
+  background: black;
+  float: left;
+  border-radius: 5px;
+  position: relative;
+  color: #fff;
+  cursor: pointer;
+  border: 1px solid #fff;
+}
+
+.download > .fa {
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 15px;
+  transform: translateY(-50%);
+}
+
+.df,
+.dfn {
+  position: absolute;
+  left: 70px;
+}
+
+.df {
+  top: 20px;
+  font-size: .68em;
+}
+
+.dfn {
+  top: 33px;
+  font-size: 1.08em;
+}
+
+.download:hover {
+  -webkit-filter: invert(100%);
+  filter: invert(100%);
+}
diff --git a/images/Download_buttons.png b/images/Download_buttons.png
