Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <h1>Travel to Dubai<br></h1>

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Dubai_marina2.jpg/270px-Dubai_marina2.jpg" class="dubaipic">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Dubai_Marina_and_JLT_on_18_October_2007.jpg/270px-Dubai_Marina_and_JLT_on_18_October_2007.jpg" class="dubaipic">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Dubai_night_skyline.jpg" class="dubaipic">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Dubai_aerial.jpg" class="dubaipic">
<p id="i-am-here"><em>I am here - my heart is in Dubai</em></p>

<h2>The city that shines throughout day and night</h2>
<p id="thecityp">The Emirate of Dubai is the second largest of the seven United Arab Emirates but has the biggest population at over 2.1 million inhabitants. Size has been synonymous with Dubai as it continues to build the first, largest and the biggest constructions
  in the world. Dubai's dynamics are always transient and ever-changing with its constant urge to construct something better and bigger than the previous. If there was a Palm Island, Nakheel thought of the World Island. Burj Al Arab seemed too timid when
  Burj Khalifa cropped up, distancing itself to being a loner in the crowd. Dubai constantly dwells in a suppressive competition with itself trying to magnetize tourists to a dreamy world of attractions and unheard of luxuries. The emirate's scoring points
  lie in its entrepreneurial abilities to create the inconceivable found in its tourist attractions, landmarks, shopping centres, parks, nightlife and hotels. Although it strictly safeguards its traditional practices, it allows space for other religions
  to breathe, a rare quality amongst the conservative Arab world. Thankfully, it has been successful in shielding itself from extremism, much-needed for it to survive. Today, Dubai has emerged as a cosmopolitan metropolis that has grown steadily to become
  a global city and a business and cultural hub of the Middle East and the Persian Gulf region.</p>

<h2>What to do in Dubai</h2>
<!-- Burj-Al-Arab -->
<div class="whattodoparent"><img src="https://upload.wikimedia.org/wikipedia/en/archive/2/2a/20120813060112%21Burj_Al_Arab%2C_Dubai%2C_by_Joi_Ito_Dec2007.jpg" class="whattodoimg" title="Burj-Al-Arab">
  <p class="whattodop"><strong>Attractions</strong><br>Having expanded along both banks of the Creek, Dubai is divided into two parts - Deira on the northern side and Bur Dubai to the south, as well as the top tourist destination of Jumeirah.Abras, the traditional water taxis,
    are regularly used each day to cross people over to either side of the Creek. Each side has its share of fine mosques and busy souqs, public buildings, shopping malls, hotels, office towers, banks, hospitals, schools, apartments and villas. Dubai
    is blessed with golden sunshine and silvery beaches.From the timeless tranquility of the desert to the lively bustle of the souk, Dubai does not only boast the best contemporary sightings but has also preserved some of the most intriguing historical
<!-- Dalma Mall -->
<div class="whattodoparent"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Fun_CIty.jpg/220px-Fun_CIty.jpg" class="whattodoimg" title="Dalma Mall">
  <p class="whattodop"><strong>Entertainment</strong><br>Since Dubai is a cultural and tourist hub for people living in the region, they have provided an endless amount of things to see and do. But when it comes to providing entertainment, films and theatre take centre stage
    in the emirate. Shop your favourite stores, grab a bite to eat and catch the latest movie at any of the plush multiplexes. On the other hand, theatres are arguably the most lively entertainment offerings where you can connect with the performers.Besides
    all of this, there is a wide range of sports and outdoor activities on offer. The events calendar boasts quite a few top-grade sports activities, including Dubai World Cup, the world’s richest horse race and prestigious DP World Tour Championship
    golf tournament and many more.</p>
<!-- Sharjah -->
<div class="whattodoparent"><img src="https://upload.wikimedia.org/wikipedia/commons/8/89/University_of_Sharjah_Main_Campus.jpg" class="whattodoimg" title="Sharjah">
  <p class="whattodop"><strong>Culture</strong><br>The culture of Dubai is ingrained in Islam, but increasing globalisation and immigration of various nationalities have transformed the emirate into a melting pot of diverse sensibilities. However, the influence of traditional
    Arab culture is prominently seen on its museums, festivals, belly dance and attire. Generosity and hospitality are the most highly prized virtues of in the Arab world, and tourists are welcomed with utmost affection and friendliness. Since 2006, the
    weekend in Dubai has been shifted to Friday - Saturday, as a token of respect for Friday's holiness to Muslims and Western weekend of Saturday and Sunday. Although Dubai's Arab society is open to all cultures, it is important for tourists to respect
    the Muslim traditions.</p>
<!-- Dubai Mall -->
<div class="whattodoparent"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Dubai_Mall-Dubai3189.JPG" class="whattodoimg" title="Dubai Mall">
  <p class="whattodop"><strong>Shopping</strong><br>Dubai is known as the “Shopping Capital of the Middle East”. With so many shopping centres and souks, there is no better place to find products at unbeatable prices. It is truly a duty free shopper’s paradise that gives
    you more for your money. Dubai’s numerous shopping centres cater for every consumer’s needs. Cars, clothing, jewellery, electronics, furnishing, sporting equipment, cinema theatres, as well as food courts will all be likely to be found under the same
<!-- Fairmont Dubai -->
<div class="whattodoparent"><img src="https://upload.wikimedia.org/wikipedia/en/4/45/Fairmont_Dubai.jpg" class="whattodoimg" title="Fairmont Dubai">
  <p class="whattodop"><strong>General Information</strong><br>The Emirate of Dubai is the second largest of the seven United Arab Emirates but has the biggest population at over 2.1 million inhabitants. Size has been synonymous with Dubai as it continues to build the first,
    largest and the biggest constructions in the world. Dubai’s dynamics are always transient and ever-changing with its constant urge to construct some better and bigger wonderful attractions than the previous. Here we provide a general over view of
    Dubai, as well as numerous tips when visiting this fantastic city.</p>
<iframe width="854" height="480" src="https://www.youtube.com/embed/nPOO1Coe2DI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
              body {
  background-color: #f2ffe6;
.dubaipic {
  width: 24%;
  height: 250px;
  margin: auto;
h1 {
  text-align: center;
  color: green;
  font-family: "Roboto";
#i-am-here {
  text-align: center;
  font-size: 25px;
  font-family: "Courier New", Courier, monospace;
  color: #208000;
h2 {
  text-align: center;
  font-family: "Roboto";
#thecityp {
  font-size: 18px;
  width: 95%;
  margin: auto;
  font-family: "Roboto";
iframe {
  margin: auto;
  display: block;
.whattodoparent {
  margin: 0 auto;
  display: flex;
  margin-bottom: 1em;
  align-items: center;
.whattodoimg {
  width: 150px;
  height: 150px;
  padding-left: 1em;
.whattodop {
  font-family: "Roboto";
  padding: 1em;

@media (min-width: 768px) and (max-width: 1024px) {
  .whattodoimg {
    display: none;

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.