123

Pen Settings

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

     

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

     

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Next Step Leave tour

HTML

            
              <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
    attractions.</p>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- 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
    roof.</p>
</div>
<!-- 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>
</div>
<br><br>
<iframe width="854" height="480" src="https://www.youtube.com/embed/nPOO1Coe2DI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
!

CSS

            
              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;
}
h4,
.whattodop {
  font-family: "Roboto";
  padding: 1em;
}

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

JS
!
999px
🕑 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.

Console