API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 28th, 2020
210
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.06 KB | None | 0 0
raw download clone embed print report
  1. //html document
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <title>Codecademy | Celestial Color Theory</title>
  6.  
  7. <!-- Meta -->
  8. <meta charset="utf-8">
  9. <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  10. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1 user-scalable=no">
  11.  
  12. <!-- Fonts -->
  13. <link href="https://fonts.googleapis.com/css?family=Barlow+Condensed:700|Barlow:400,700" rel="stylesheet">
  14.  
  15. <!-- CSS -->
  16. <link rel='stylesheet' type='text/css' href='styles.css'>
  17. </head>
  18. <body>
  19. <!-- Site Header -->
  20. <header role="banner" aria-label="site navigation" class="site-header">
  21. <!-- Site Navigation -->
  22. <nav role="navigation" class="site-navigation">
  23. <ul class="site-header-left">
  24. <li>
  25. <img src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-theory-lesson/color-theory-logo.svg" alt="Celestial" />
  26. </li>
  27. </ul>
  28. <ul class="site-header-right">
  29. <li>
  30. <a href="#">About</a>
  31. </li>
  32. <li>
  33. <a href="#" class="button button-primary">Download Now</a>
  34. </li>
  35. </ul>
  36. </nav>
  37. </header>
  38. <!-- Site Main Content -->
  39. <main role="main">
  40. <!-- Main Content Header -->
  41. <section role="region" aria-label="page-hero-title" class="page-hero-header">
  42. <div class="container">
  43. <div class="page-hero-header-left">
  44. <h1 id="page-hero-title">Look up in the sky</h1>
  45. <p>All-new app so you can see deeper and further into space than ever before</p>
  46. <a href="#" class="button button-primary">Download Now</a>
  47. </div>
  48. <div class="page-hero-header-right">
  49. <div class="img-container">
  50. <img src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-theory-lesson/color-theory-screen-1.png" alt="application interface" />
  51. </div>
  52. </div>
  53. </div>
  54. </section>
  55. <!-- Main Content Benefits -->
  56. <section role="region" class="main-content-benefits">
  57. <div class="container">
  58. <ul class="clearfix">
  59. <li class="item">
  60. <div class="item-image"></div>
  61. <h2>Step I</h2>
  62. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc id ligula sollicitudin finibus eget id leo.</p>
  63. </li>
  64. <li class="item">
  65. <div class="item-image"></div>
  66. <h2>Step II</h2>
  67. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc id ligula sollicitudin finibus eget id leo.</p>
  68. </li>
  69. <li class="item">
  70. <div class="item-image"></div>
  71. <h2>Step III</h2>
  72. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc id ligula sollicitudin finibus eget id leo.</p>
  73. </li>
  74. </ul>
  75. </div>
  76. </section>
  77. <!-- Main Content Info -->
  78. <section role="region" class="main-content-info">
  79. <div class="mobile-show main-content-info-left">
  80. <img class="mobile-show" src="https://s3.amazonaws.com/codecademy-content/programs/ui-design/color-theory-lesson/color-theory-image-1.jpg" alt="Nebula"/>
  81. </div>
  82. <div class="container">
  83. <div class="main-content-info-right">
  84. <h2>Pictures of the Sky</h2>
  85. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc id ligula sollicitudin finibus eget id leo.</p>
  86. <a href="#" class="button button-primary">Download Now</a>
  87. </div>
  88. </div>
  89. </section>
  90. <!-- Main Content CTA -->
  91. <section role="region" class="main-content-cta">
  92. <div class="container">
  93. <div class="main-content-cta-left">
  94. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at nunc id ligula sollicitudin finibus eget id leo.</p>
  95. </div>
  96. <div class="main-content-cta-right">
  97. <div class="cta-container">
  98. <input type="email" placeholder="Email Address" />
  99. <button type="submit" class="button button-secondary">Subscribe</button>
  100. </div>
  101. </div>
  102. </div>
  103. </section>
  104. </main>
  105.  
  106.  
  107. <!-- Site Footer -->
  108. <footer role="contentinfo" class="footer clearfix">
  109. <!-- Site Footer Nav -->
  110. <nav role="navigation" class="footer-navigation">
  111. <ul class="footer-left">
  112. <li>
  113. Copyright &copy; 2017. Celestial. All Rights Reserved.
  114. </li>
  115. </ul>
  116. <ul class="footer-right">
  117. <li>
  118. <a href="#">Home</a>
  119. </li>
  120. <li>
  121. <a href="#">About</a>
  122. </li>
  123. <li>
  124. <a href="#">Download Now</a>
  125. </li>
  126. </ul>
  127. </nav>
  128. </footer>
  129. </body>
  130. </html>
  131. //css
  132. /* Site Stylesheet
  133. 1. Global Styles
  134. 2. Typography Styles
  135. 3. Structure Styles
  136. 4. Module Styles
  137. 5. Component Styles
  138. 6. Page Styles
  139. ======================================== */
  140.  
  141. /* 1. Global Styles
  142. ======================================== */
  143. * {
  144. box-sizing: border-box;
  145. }
  146.  
  147. html {
  148. margin: 0 auto;
  149. overflow-x: hidden;
  150. width: 100%;
  151. -ms-text-size-adjust: 100%;
  152. -webkit-text-size-adjust: 100%;
  153. }
  154. body {
  155. margin: 0 auto;
  156. overflow-x: hidden;
  157. width: 100%;
  158. text-rendering: optimizeLegibility;
  159. -webkit-font-smoothing: antialiased;
  160. color: #333333;
  161. }
  162. .clearfix::after {
  163. content: " ";
  164. clear: both;
  165. display: table;
  166. }
  167. .float-right {
  168. float: right;
  169. }
  170.  
  171. /* 2. Typography Styles
  172. ======================================== */
  173. h1,
  174. h2,
  175. h3,
  176. h4,
  177. h5,
  178. h6 {
  179. font-family: 'Barlow Condensed', Helvetica, sans-serif;
  180. font-weight: 700;
  181. line-height: 1.25;
  182. margin-bottom: 15px;
  183. transition: font-size 0.25s ease;
  184. text-transform: uppercase;
  185. }
  186.  
  187. h1 {
  188. font-size: calc(100px / 1.25);
  189. line-height: 0.85;
  190. }
  191. h2 {
  192. font-size: calc(65px / 1.25);
  193. margin-top: 10px;
  194. line-height: 0.85;
  195. }
  196. @media(min-width: 1024px) {
  197. h1 {
  198. font-size: 100px;
  199. }
  200. h2 {
  201. font-size: 60px;
  202. }
  203. }
  204. p {
  205. font-family: 'Barlow', Georgia, serif;
  206. font-size: 16px;
  207. line-height: 23px;
  208. margin: 0 0 15px;
  209. }
  210. a {
  211. font-family: 'Barlow', Helvetica, sans-serif;
  212. font-size: 16px;
  213. color: #0D1C32;
  214. }
  215. ul {
  216. padding: 0;
  217. margin: 0;
  218. }
  219. li {
  220. font-family: 'Barlow', Helvetica, sans-serif;
  221. font-size: 16px;
  222. line-height: 23px;
  223. list-style: none;
  224. }
  225. img {
  226. width: 100%;
  227. }
  228.  
  229. /* 3. Structure Styles
  230. ======================================== */
  231. .container {
  232. margin: 0 auto;
  233. max-width: 1280px;
  234. padding: 0 15px;
  235. }
  236. .container:before, .container:after {
  237. content: " ";
  238. display: table;
  239. clear: both;
  240. }
  241. .mobile-hide {
  242. display: none;
  243. }
  244. .mobile-show {
  245. display: block;
  246. }
  247. @media(min-width: 720px) {
  248. .mobile-hide {
  249. display: block;
  250. }
  251.  
  252. .mobile-show {
  253. display: none;
  254. }
  255. }
  256. /* 4. Modules Styles
  257. ======================================== */
  258.  
  259. /* Site Navigation */
  260. .site-header {
  261. background-color: #FFFFFF;
  262. padding: 30px 15px;
  263. }
  264. .site-navigation {
  265. margin: 0 auto;
  266. max-width: 1280px;
  267. }
  268. .site-header-left,
  269. .footer-left {
  270. display: inline-block;
  271. }
  272. .site-header-left li {
  273. line-height: 0;
  274. }
  275. .site-header-right,
  276. .footer-right {
  277. display: inline-block;
  278. float: right;
  279. }
  280. .site-header-right li,
  281. .footer-right li {
  282. display: inline;
  283. }
  284. .site-header-right li a {
  285. text-decoration: none;
  286. margin-left: 20px;
  287. }
  288.  
  289. /* Site Footer */
  290. .footer {
  291. background-color: #ECF3FF;
  292. padding: 30px;
  293. }
  294. .footer-navigation {
  295. margin: 0 auto;
  296. max-width: 1280px;
  297. }
  298. .footer-right {
  299. float: none;
  300. margin-top: 15px;
  301. }
  302.  
  303. @media(min-width: 720px) {
  304. .footer-right {
  305. float: right;
  306. margin-top: 0;
  307. }
  308. }
  309. .footer li {
  310. line-height: 0;
  311. }
  312. .footer li a {
  313. text-decoration: none;
  314. margin-left: 20px;
  315. }
  316.  
  317. /* 5. Component Styles
  318. ======================================== */
  319. button {
  320. border: none;
  321. }
  322. button:hover {
  323. cursor: pointer;
  324. }
  325. .button {
  326. border-radius: 100px;
  327. display: inline-block;
  328. font-family: 'Barlow', Helvetica, sans-serif;
  329. font-size: 16px;
  330. text-transform: uppercase;
  331. line-height: normal;
  332. padding: 15px 30px;
  333. text-align: center;
  334. text-decoration: none;
  335. transition: opacity 0.5s ease;
  336. }
  337. .button:hover {
  338. opacity: 0.75;
  339. }
  340. .button-primary {
  341. background-color: #0D1C32;
  342. color: #FFFFFF;
  343. }
  344. .button-secondary {
  345. background-color: #627FB0;
  346. color: #FFFFFF;
  347. }
  348. input {
  349. border-radius: 100px;
  350. margin-bottom: 15px;
  351. padding: 10px;
  352. border: none;
  353. box-shadow: none;
  354. transition: border-color 0.5s ease;
  355. width: 100%;
  356. }
  357.  
  358. /* 6. Page Styles
  359. ======================================== */
  360. .page-hero-header {
  361. background-color: #627FB0;
  362. background-image: url('images/saturn-background.svg');
  363. background-position: center;
  364. background-repeat: no-repeat;
  365. background-size: cover;
  366. max-height: 600px;
  367. overflow: hidden;
  368. }
  369. .page-hero-header-left, .page-hero-header-right {
  370. width: 100%;
  371. text-align: center;
  372. display: block;
  373. }
  374. .page-hero-header-left {
  375. padding: 0px 40px;
  376. color: #FFFFFF;
  377. }
  378. .main-content-benefits {
  379. padding: 80px 0;
  380. background-color: #F5F9FF;
  381. }
  382. .main-content-benefits h2 {
  383. color: #0D1C32;
  384. }
  385. .main-content-info {
  386. background-color: #627FB0;
  387. text-align: center;
  388. }
  389. .main-content-info-left {
  390. max-height: 300px;
  391. width: 100%;
  392. overflow: hidden;
  393. }
  394. .main-content-info-right {
  395. padding: 60px;
  396. color: #FFFFFF;
  397. width: 100%;
  398. }
  399. .main-content-cta-left, .main-content-cta-right {
  400. width: 100%;
  401. padding: 0 30px;
  402. text-align: center;
  403. }
  404. .main-content-cta {
  405. background-color: #0D1C32;
  406. color: #FFFFFF;
  407. padding: 80px 0;
  408. }
  409. .cta-container {
  410. position: relative;
  411. }
  412. .cta-container input {
  413. width: 100%;
  414. padding: 23px 30px;
  415. font-size: 1em;
  416. }
  417. .cta-container button {
  418. position: absolute;
  419. right: 10px;
  420. top: 7px;
  421. -webkit-appearance: none;
  422. -moz-appearance: none;
  423. border: none;
  424. }
  425.  
  426. /* Items */
  427. .item {
  428. margin-bottom: 30px;
  429. width: 100%;
  430. padding: 0 2%;
  431. text-align: center;
  432. }
  433. .item .item-image {
  434. background: #FFFFFF;
  435. box-shadow: 0 5px 20px 0 rgba(0,0,0,0.05);
  436. border-radius: 10px;
  437. width: 100%;
  438. height: 250px;
  439. }
  440. @media(min-width: 720px) {
  441. .page-hero-header-left, .page-hero-header-right {
  442. width: 50%;
  443. text-align: left;
  444. display: inline-block;
  445. float: left;
  446. }
  447. .page-hero-header-left {
  448. padding: 80px;
  449. }
  450. .page-hero-header-left p {
  451. font-size: 24px;
  452. line-height: 28px;
  453. margin: 0 0 20px;
  454. }
  455. .main-content-info {
  456. background-image: url('images/space-image.jpg');
  457. background-repeat: no-repeat;
  458. background-position: center left;
  459. background-size:50%;
  460. text-align: left;
  461. }
  462. .main-content-info-right {
  463. padding: 80px;
  464. width: 50%;
  465. float: right;
  466. display: inline-block;
  467. }
  468. .main-content-cta-left, .main-content-cta-right {
  469. width: 50%;
  470. float: left;
  471. display: inline-block;
  472. padding: 0 30px;
  473. text-align: left;
  474. }
  475. .item {
  476. float: left;
  477. margin-bottom: 0;
  478. width: calc(95%/3);
  479. }
  480.  
  481. .item:not(:last-child) {
  482. margin-right: 2.5%;
  483. }
  484. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!