├── README.md ├── index.html ├── malmo.css ├── package.json └── sandbox.config.json /README.md: -------------------------------------------------------------------------------- 1 | # HTML_CSS_BasicDemo 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My New Pen! 8 | 9 | 10 | 11 | 12 | 13 | 14 | Malmö 15 | 16 | 17 | 18 |
19 | 25 |
26 |
27 |
28 |
Malmö  
29 |
30 |

City of Connection

31 |

“Malmö has not initiated change — Malmö is already a transformed city. It has happened before in the history of Malmo, but never in a shorter time, The contrasts are striking, both in our near-memories and in what we can trace in the city environment. Visible contrasts tell a bright new story of the new Malmö. (Därför Malmo! 2002, 212)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna elit, sodales ut erat ornare, vulputate pharetra augue. Quisque suscipit diam ut sollicitudin placerat. Morbi sit amet sem venenatis, pellentesque neque vitae, tincidunt purus. Aenean in ultrices ex. Duis dictum lacus quis sapien accumsan congue. Vivamus laoreet, dolor sit amet pharetra viverra, erat massa semper justo, at ultrices velit velit at nisl. Nullam eu auctor mauris. Aenean varius quam eget sapien semper consectetur. Vestibulum dignissim, leo non rhoncus laoreet, risus lacus dictum leo, eget eleifend nibh odio at ipsum. Nulla eu eleifend elit. Integer ex est, sodales id congue sit amet, faucibus sed neque. Quisque mattis eleifend justo, nec porta turpis. Vestibulum ornare tellus id ultrices egestas. Proin ultricies consequat erat at luctus. 32 | 33 | Nulla cursus molestie malesuada. Suspendisse potenti. In id laoreet sapien. Proin id lobortis ipsum. Nunc laoreet mauris sed justo ullamcorper accumsan. Vivamus vel fermentum mi, sed porttitor ex. Proin suscipit, libero nec tempor luctus, leo nibh suscipit dolor, eu congue nisi lorem at arcu. In eu est quam. Ut bibendum scelerisque arcu suscipit fermentum. Suspendisse sit amet sagittis leo. In hac habitasse platea dictumst. Maecenas ut varius enim. Aenean dictum tristique malesuada.

34 |
35 |
36 |

Growth

37 |

This ever-expanding city has 300,000 inhabitants, and over 40% of its residents have immigrant backgrounds. Over 25% of its residents were born in another country. 38 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna elit, sodales ut erat ornare, vulputate pharetra augue. Quisque suscipit diam ut sollicitudin placerat. Morbi sit amet sem venenatis, pellentesque neque vitae, tincidunt purus. Aenean in ultrices ex. Duis dictum lacus quis sapien accumsan congue. Vivamus laoreet, dolor sit amet pharetra viverra, erat massa semper justo, at ultrices velit velit at nisl. Nullam eu auctor mauris. Aenean varius quam eget sapien semper consectetur. Vestibulum dignissim, leo non rhoncus laoreet, risus lacus dictum leo, eget eleifend nibh odio at ipsum. Nulla eu eleifend elit. Integer ex est, sodales id congue sit amet, faucibus sed neque. Quisque mattis eleifend justo, nec porta turpis. Vestibulum ornare tellus id ultrices egestas. Proin ultricies consequat erat at luctus. 39 | 40 | Nulla cursus molestie malesuada. Suspendisse potenti. In id laoreet sapien. Proin id lobortis ipsum. Nunc laoreet mauris sed justo ullamcorper accumsan. Vivamus vel fermentum mi, sed porttitor ex. Proin suscipit, libero nec tempor luctus, leo nibh suscipit dolor, eu congue nisi lorem at arcu. In eu est quam. Ut bibendum scelerisque arcu suscipit fermentum. Suspendisse sit amet sagittis leo. In hac habitasse platea dictumst. Maecenas ut varius enim. Aenean dictum tristique malesuada. 41 |

42 |
43 |
44 |

Nature

45 |

With hundreds of workshops every week, cultural activities for all to enjoy, and varieties of EU-funded empowerment basdjkbkjadnkajsndsandjasndkjsandkandkjasdnkjasndsan dm amdas 46 | dsabdsabdjkasnkjdsa 47 | dsabnmdbsjadnksandklasndlkndlkasndklnasm,asd 48 | dasbdasbdjansdnsklandlkasd 49 | dsanjdasbjdnsalkdnakls
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna elit, sodales ut erat ornare, vulputate pharetra augue. Quisque suscipit diam ut sollicitudin placerat. Morbi sit amet sem venenatis, pellentesque neque vitae, tincidunt purus. Aenean in ultrices ex. Duis dictum lacus quis sapien accumsan congue. Vivamus laoreet, dolor sit amet pharetra viverra, erat massa semper justo, at ultrices velit velit at nisl. Nullam eu auctor mauris. Aenean varius quam eget sapien semper consectetur. Vestibulum dignissim, leo non rhoncus laoreet, risus lacus dictum leo, eget eleifend nibh odio at ipsum. Nulla eu eleifend elit. Integer ex est, sodales id congue sit amet, faucibus sed neque. Quisque mattis eleifend justo, nec porta turpis. Vestibulum ornare tellus id ultrices egestas. Proin ultricies consequat erat at luctus. 50 | 51 | Nulla cursus molestie malesuada. Suspendisse potenti. In id laoreet sapien. Proin id lobortis ipsum. Nunc laoreet mauris sed justo ullamcorper accumsan. Vivamus vel fermentum mi, sed porttitor ex. Proin suscipit, libero nec tempor luctus, leo nibh suscipit dolor, eu congue nisi lorem at arcu. In eu est quam. Ut bibendum scelerisque arcu suscipit fermentum. Suspendisse sit amet sagittis leo. In hac habitasse platea dictumst. Maecenas ut varius enim. Aenean dictum tristique malesuada.

52 |
53 |
54 |

Culture

55 |

With hundreds of workshops every week, cultural activities for all to enjoy, and varieties of EU-funded empowerment initiatives, there is always something new to learn or experience

56 |
57 |
58 |

Which part of Malmo are you most interested in?

59 |
60 |

61 | 64 | 67 | 70 | 71 | 73 |

74 |
75 |

A city of diversity. A city of empowerment. A city we call home. 76 |

77 | 78 | 79 | -------------------------------------------------------------------------------- /malmo.css: -------------------------------------------------------------------------------- 1 | /** 2 | * index.scss 3 | * - Add any styles you want here! 4 | */ 5 | 6 | body { 7 | background: linear-gradient(35deg, #ccffff, #ffcccc); 8 | } 9 | 10 | h1 { 11 | font-family: Helvetica, serif; 12 | color: #29b6f6; 13 | font-size: 40px; 14 | } 15 | 16 | h2 { 17 | font-family: Helvetica, serif; 18 | color: #29b6f6; 19 | font-size: 30px; 20 | } 21 | 22 | p { 23 | font-family: Helvetica; 24 | font-size: 22px; 25 | color: #29b6f6; 26 | } 27 | 28 | button { 29 | font-family: Helvetica; 30 | font-size: 25px; 31 | font-style: bold; 32 | color: white; 33 | background-color: red; 34 | padding: 10px; 35 | margin: 1%; 36 | border-radius: 20px; 37 | } 38 | 39 | button:hover { 40 | transform: scale(1.2); 41 | } 42 | 43 | .navbar { 44 | display: flex; 45 | position: absolute; 46 | background-color: white; 47 | margin-top: 70px; 48 | margin-left: 130px; 49 | z-index: 1; 50 | color: red; 51 | font-family: Helvetica; 52 | font-size: 27px; 53 | font-weight: bold; 54 | padding: 20px; 55 | } 56 | 57 | a { 58 | color: red; 59 | text-decoration: none; 60 | } 61 | 62 | a:hover { 63 | color: orangered; 64 | } 65 | 66 | .navbar li { 67 | list-style: none; 68 | font-family: Helvetica; 69 | margin-right: 20px; 70 | } 71 | 72 | .heading { 73 | display: block; 74 | position: absolute; 75 | background-color: red; 76 | bottom: 25px; 77 | left: 25px; 78 | font-family: Helvetica; 79 | font-size: 100px; 80 | color: white; 81 | margin: 5%; 82 | } 83 | 84 | .textblock { 85 | max-width: 1000px; 86 | background: linear-gradient(35deg, white, #f9f9f9); 87 | padding: 40px; 88 | margin-left: 100px; 89 | } 90 | 91 | .headerimage { 92 | background: url("https://www.scanbox.se/en/wp-content/uploads/sites/3/2019/05/ScanBox-Malmo%CC%88-Stad.jpg") 93 | no-repeat left; 94 | position: relative; 95 | background-attachment: fixed; 96 | height: 500px; 97 | font-size: 100px; 98 | color: white; 99 | font-family: Helvetica; 100 | } 101 | 102 | .backimage1 { 103 | background: url("https://lonelyplanetimages.imgix.net/a/g/hi/t/d2581159edd9062c5ca0322008237e8f-malmo.jpg?sharp=10&vib=20&w=1200") 104 | no-repeat; 105 | background-attachment: fixed; 106 | height: 500px; 107 | } 108 | 109 | .backimage2 { 110 | background: url("https://img.guidebook-sweden.com/malmoe-kommun/slottsparken.jpg") 111 | no-repeat center; 112 | background-attachment: fixed; 113 | height: 500px; 114 | } 115 | 116 | .backimage3 { 117 | background: url("http://cdn-01.rockfoto.nu/imagesbig/20160806_013605_429651.jpg") 118 | center; 119 | background-attachment: fixed; 120 | height: 500px; 121 | } 122 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "static", 3 | "version": "1.0.0", 4 | "description": "This is a static template with no bundling", 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "serve", 8 | "build": "echo This is a static template, there is no bundler or bundling involved!" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/codesandbox-app/static-template.git" 13 | }, 14 | "keywords": [ 15 | "static", 16 | "template", 17 | "codesandbox" 18 | ], 19 | "author": "Ives van Hoorne", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/codesandbox-app/static-template/issues" 23 | }, 24 | "homepage": "https://github.com/codesandbox-app/static-template#readme", 25 | "devDependencies": { 26 | "serve": "^11.2.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /sandbox.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "template": "static" 3 | } 4 | --------------------------------------------------------------------------------