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.
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.
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.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
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.
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).
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.
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.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
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.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
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;
}
}
Also see: Tab Triggers