├── README.md ├── img ├── logo.png ├── logo-hp.png ├── logos.png ├── logo-ibm.png ├── logo-google.png ├── favicon-32x32.png ├── image-computer.png ├── image-devices.png ├── logo-microsoft.png ├── bg-header-desktop.png ├── bg-header-mobile.png ├── logo-vector-graphics.png ├── icon-facebook.svg ├── icon-twitter.svg ├── icon-text.svg ├── icon-instagram.svg ├── icon-preview.svg ├── icon-blacklist.svg └── logo.svg ├── main.js ├── index.html └── css └── main.css /README.md: -------------------------------------------------------------------------------- 1 | # Please-edit-me -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/logo-hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/logo-hp.png -------------------------------------------------------------------------------- /img/logos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/logos.png -------------------------------------------------------------------------------- /img/logo-ibm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/logo-ibm.png -------------------------------------------------------------------------------- /img/logo-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/logo-google.png -------------------------------------------------------------------------------- /img/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/favicon-32x32.png -------------------------------------------------------------------------------- /img/image-computer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/image-computer.png -------------------------------------------------------------------------------- /img/image-devices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/image-devices.png -------------------------------------------------------------------------------- /img/logo-microsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/logo-microsoft.png -------------------------------------------------------------------------------- /img/bg-header-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/bg-header-desktop.png -------------------------------------------------------------------------------- /img/bg-header-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/bg-header-mobile.png -------------------------------------------------------------------------------- /img/logo-vector-graphics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Atanda1/Please-edit-me/HEAD/img/logo-vector-graphics.png -------------------------------------------------------------------------------- /img/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /img/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Path 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | 2 | var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1DpRZ4IA6Xd_rd4sNnkpuTkp_-6KOEJJWS-VqZxw4oU0/edit?usp=sharing'; 3 | 4 | function init() { 5 | Tabletop.init( { key: publicSpreadsheetUrl, 6 | callback: showInfo, 7 | simpleSheet: true } ) 8 | } 9 | 10 | 11 | function showInfo(data, tabletop) { 12 | data.forEach(function(data) { 13 | header.innerHTML = data.header; 14 | header2.innerHTML = data.header2; 15 | body.innerHTML = data.body; 16 | body2.innerHTML = data.body2; 17 | body3.innerHTML = data.body3; 18 | body4.innerHTML = data.body4; 19 | body5.innerHTML = data.body5; 20 | body6.innerHTML = data.body6; 21 | body7.innerHTML = data.body7; 22 | body8.innerHTML = data.body8; 23 | body9.innerHTML = data.body9; 24 | body10.innerHTML = data.body10; 25 | body11.innerHTML = data.body11; 26 | body12.innerHTML = data.body12; 27 | body13.innerHTML = data.body13; 28 | body14.innerHTML = data.body14; 29 | body15.innerHTML = data.body15; 30 | body16.innerHTML = data.body16; 31 | body17.innerHTML = data.body17; 32 | 33 | }); 34 | } 35 | window.addEventListener('DOMContentLoaded', init) 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /img/icon-text.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Combined Shape 2 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /img/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /img/icon-preview.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Shape 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | Please Edit Me 16 | 27 | 28 | 29 | 30 |
31 | 42 |
43 | 44 | 45 |
46 |
47 |

48 |

49 | 50 |

51 |
52 |
53 |
computer
54 |
55 |
56 |

57 |

58 |

59 |
60 |
61 |

62 |

63 |
64 |
65 |

66 |

67 |

68 |
69 |
70 |
71 |
72 | 73 | 74 |
75 |
76 |

77 |

78 | 79 |

80 |
81 |
82 | devices 83 |
84 |
85 | 86 | 87 |
88 |
89 |

90 |

91 |
92 |
93 |
94 | 95 |

96 |

97 |

98 |
99 |
100 | 101 |

102 |

103 | 104 |

105 |
106 |
107 | 108 |

109 | 110 |

111 |
112 |
113 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /img/icon-blacklist.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Group 24 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Bai Jamjuree", sans-serif; 3 | font-size: 18px; 4 | line-height: 1.5; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | body h1, 13 | body h3, 14 | body h4 { 15 | color: #4c545d; 16 | margin: 0; 17 | } 18 | 19 | body h1 { 20 | font-size: 1.7rem; 21 | } 22 | 23 | body h3 { 24 | font-size: 1.4rem; 25 | } 26 | 27 | body p, 28 | body a { 29 | color: #9fabb2; 30 | font-size: 0.9rem; 31 | } 32 | 33 | body a { 34 | text-decoration: none; 35 | } 36 | 37 | body .button-box { 38 | text-align: center; 39 | padding: 1.8rem 0; 40 | } 41 | 42 | body .button-box button { 43 | border: none; 44 | color: #fff; 45 | height: 50px; 46 | width: 300px; 47 | border-radius: 40px; 48 | font-size: 0.8rem; 49 | font-weight: 600; 50 | margin: 0.4rem 0.3rem; 51 | } 52 | 53 | body .button-box button.ios-button { 54 | background-color: #26baa4; 55 | border-bottom: 2.5px solid #27aa97; 56 | -webkit-box-shadow: 0px 2px 20px rgba(39, 170, 151, 0.5); 57 | box-shadow: 0px 2px 20px rgba(39, 170, 151, 0.5); 58 | } 59 | 60 | body .button-box button.mac-button { 61 | background-color: #6173ff; 62 | border-bottom: 2.5px solid #5766db; 63 | -webkit-box-shadow: 0px 2px 20px rgba(87, 102, 219, 0.5); 64 | box-shadow: 0px 2px 20px rgba(87, 102, 219, 0.5); 65 | } 66 | 67 | footer { 68 | display: none; 69 | } 70 | 71 | section.footer .media { 72 | background-color: #f2f2f2; 73 | display: flex; 74 | justify-items: center; 75 | } 76 | 77 | @media screen and (min-width: 1000px) { 78 | header { 79 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)), url(https://res.cloudinary.com/dpkreativ/image/upload/v1575491163/Clipboard%20Landing%20Page/bg-header-desktop_x7xzfn.png); 80 | background-image: linear-gradient(rgba(255, 255, 255, 0), white), url(https://res.cloudinary.com/dpkreativ/image/upload/v1575491163/Clipboard%20Landing%20Page/bg-header-desktop_x7xzfn.png); 81 | background-repeat: no-repeat; 82 | background-size: cover; 83 | text-align: center; 84 | padding-top: 5rem; 85 | } 86 | header img { 87 | margin-bottom: 1rem; 88 | } 89 | header .banner .banner-paragraph { 90 | max-width: 500px; 91 | margin: auto; 92 | } 93 | section.feature { 94 | text-align: center; 95 | -webkit-box-pack: space-evenly; 96 | -ms-flex-pack: space-evenly; 97 | justify-content: space-evenly; 98 | margin: 0 6rem; 99 | padding: 40px 0; 100 | } 101 | section.feature img { 102 | max-width: 600px; 103 | } 104 | section.feature .intro-text { 105 | text-align: center; 106 | max-width: 500px; 107 | margin: auto; 108 | margin-bottom: 3rem; 109 | } 110 | section.feature .track-snippets { 111 | display: -ms-grid; 112 | display: grid; 113 | -ms-grid-columns: (1fr)[2]; 114 | grid-template-columns: repeat(2, 1fr); 115 | text-align: left; 116 | } 117 | section.feature .track-snippets .snippet-right { 118 | margin: 0 4rem; 119 | } 120 | section.feature .track-snippets .snippet-right div { 121 | margin-top: 3.5rem; 122 | } 123 | section.feature.supercharge-workflow .columns { 124 | display: -ms-grid; 125 | display: grid; 126 | -ms-grid-columns: (1fr)[3]; 127 | grid-template-columns: repeat(3, 1fr); 128 | } 129 | section.feature.supercharge-workflow .columns .col { 130 | padding: 1rem; 131 | } 132 | section.feature.supercharge-workflow .columns .col img { 133 | height: 30px; 134 | } 135 | section.feature.partners { 136 | display: -ms-grid; 137 | display: grid; 138 | -ms-grid-columns: (1fr)[5]; 139 | grid-template-columns: repeat(5, 1fr); 140 | } 141 | .footer { 142 | background-color: #f2f2f2; 143 | display: -ms-grid; 144 | display: grid; 145 | -ms-grid-columns: (1fr)[5]; 146 | grid-template-columns: repeat(5, 1fr); 147 | } 148 | .footer div { 149 | margin: auto; 150 | } 151 | .footer .logo img { 152 | width: 50px; 153 | height: auto; 154 | } 155 | .footer .short-links a { 156 | text-decoration: none; 157 | color: #4c545d; 158 | } 159 | .footer .media { 160 | display: -ms-grid; 161 | display: grid; 162 | -ms-grid-columns: (1fr)[3]; 163 | grid-template-columns: repeat(3, 1fr); 164 | } 165 | .footer .media .social-media { 166 | margin: 0 10px; 167 | } 168 | .footer .media .social-media img { 169 | width: auto; 170 | height: 20px; 171 | } 172 | } 173 | 174 | @media screen and (max-width: 999px) { 175 | header { 176 | background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(white)), url(https://res.cloudinary.com/dpkreativ/image/upload/v1575491162/Clipboard%20Landing%20Page/bg-header-mobile_zynglc.png); 177 | background-image: linear-gradient(rgba(255, 255, 255, 0), white), url(https://res.cloudinary.com/dpkreativ/image/upload/v1575491162/Clipboard%20Landing%20Page/bg-header-mobile_zynglc.png); 178 | background-repeat: no-repeat; 179 | background-size: cover; 180 | text-align: center; 181 | padding: 40px; 182 | } 183 | header img { 184 | padding: 80px 0; 185 | } 186 | section { 187 | text-align: center; 188 | padding: 40px; 189 | } 190 | section.feature .track-snippets img, section.feature.access-clipboard img { 191 | width: 16rem; 192 | } 193 | section.feature.supercharge-workflow img { 194 | width: 2rem; 195 | margin: 20px; 196 | } 197 | section.feature.partners img { 198 | margin: 20px; 199 | width: 8rem; 200 | } 201 | section.footer .media { 202 | background-color: #f2f2f2; 203 | display: flex; 204 | justify-items: center; 205 | } 206 | section.footer .logo img { 207 | width: 50px; 208 | } 209 | section.footer .media { 210 | padding: 40px; 211 | display: -ms-grid; 212 | display: grid; 213 | -ms-grid-columns: (1fr)[3]; 214 | grid-template-columns: repeat(3, 1fr); 215 | } 216 | section.footer .media img { 217 | height: 25px; 218 | color: #f2f2f2; 219 | } 220 | } 221 | --------------------------------------------------------------------------------