css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

              <div id="navigacija">
      <th clsss="oigri"><a href="#oigri">O Betlefieldu</a></th>
      <th class="Play"><a target="_black" href="https://www.battlefield.com/">Play Betlefield</a></th>
      <th class="igrati"><a href="#igrati">Kako igrati</a></th>
      <th class="kreatori"><a href="#kreatori">O kreatorima</a></th>
      <th class="gameplay"><a href="#gameplay">Gameplay</a></th>
      <th class="mreze"><a href="#mreze">Mreze</a></th>
<div id="O igri">
  <h1>O Betlefield-u</h1>
  <p>Ovaj članak je o video igrici za 2016. godinu. Za prvu igru u seriji Battlefielda pogledajte Battlefield 1942.
Battlefield 1
Battlefield 1 cover art.jpg
Programer (i) EA DICE
Izdavač (i) Electronic Arts
Direktor (i)
Jorgen Carlstrom
Stefan Strandberg
Lars Gustavsson
Producent Aleksander Svendsen Grøndal
Dizajner (i) Daniel Berlin
Programator (i) Vidar Nigren
Izvođač (i) Gustav Tillebi
Pisac (i) Steven Hall
Kompozitor (i)
Patrik Andren
Johan Soderkvist
Series Battlefield
Motor Frostbite 3
Platforma (i)
Microsoft Vindovs
PlaiStation 4
Ksbok One
VV: 21. oktobar 2016
Žanr (a) Prvi čovjek pucač
Režimi Jednostavni igrač, multiplaier
Battlefield 1 je video igrica pucačine prve vrste koju je razvila EA DICE i objavila Electronic Arts. Uprkos svom imenu, Battlefield 1 je petnaestorica rata u Battlefield seriji i prvi glavni ulaz u s</div><br>
<div id="igrati">
  <h1>Kako igrati</h1>
  <p>Ova igrica se moze igrati na svim novijim konzolama i racunarima.Igra je veoma dobro optimizovana pa je tako mogu pokrenuti i malo slabiji racunari<br>
    <br>Da bi ste pokrenuli igru morate imati sledece specifikacije  OS: 64-bit Windows 7, Windows 8.1 and Windows 10<br>
Processor (AMD): AMD FX-6350<br>
Processor (Intel): Core i5 6600K<br>
Memory: 8GB RAM<br>
Graphics card (AMD): AMD Radeon™ HD 7850 2GB<br>
Graphics card (NVIDIA): nVidia GeForce® GTX 660 2GB<br>
DirectX: 11.0 Compatible video card or equivalent<br>
Online Connection Requirements: 512 KBPS or faster Internet connection<br>
Hard-drive space: 50GB <br>
    <br> <br>

    <br> <br> <br> </p>
<div id="kreatori">
  <h1>O kreatoru</h1>
  <p><br>Ovu igru je napravilia kompanija po imenu Eletronic Arts,ili ti EA nesto vise o EA mozete saznati na wikipediji.  </p>
<div id="gameplay">
  <h1>Neki gameplay</h1>
  <div id="video">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/4oTPyrfYHgM" frameborder="0" allowfullscreen></iframe></iframe>
  <div id="video_2">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/z6h7bHuYYO0" frameborder="0" allowfullscreen></iframe></div>
  <div id="video_3">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/xLFJdwzneSs" frameborder="0" allowfullscreen></iframe></div>
  <div id="video_4">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/t80ejGyT1Dc" frameborder="0" allowfullscreen></iframe></div>

<div id="mreze">
  <ul type="square">
      <a target="_blank" href="https://www.facebook.com/battlefield/?brand_redir=492905170767207"><img src="https://facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/fb-art.png" width="50px" alt="facebook">

      <a target="_blank" href="https://twitter.com/battlefield"><img src="http://img.freepik.com/free-icon/twitter_318-136405.jpg?size=338&ext=jpg" width="50px" alt="twitter"> </a>
      <a target="_blank" href="https://www.twitch.tv/directory/game/Battlefield%201"><img src="https://static-cdn.jtvnw.net/jtv_user_pictures/twitch-profile_image-8a8c5be2e3b64a9a-300x300.png" width="50pxs"></a>
      <a target="_blank" href="https://www.youtube.com/user/Battlefield"><img src="http://is4.mzstatic.com/image/thumb/Purple117/v4/cc/d8/0c/ccd80ca1-a0fb-3328-afbf-f36edf41c793/source/1200x630bb.jpg" width="50px" alt="facebook">

              #video {
  width: 40%;
  margin-right: 10%;
  height: 300px;
  float: left;
#video_2 {
  width: 40%;
  margin-right: 10%;
  height: 300px;
  float: right;
#video_3 {width: 40%;
  margin-right: 10%;
  height: 300px;
  float: right;
#video_4 {width:40%;
float: left}
#mreze li {
  display: inline;
#mreze {
  width: 20%;
  margin-left: 40%;}
#navigacija {
  width: 100%;

#navigacija table {
  width: 60%;
  margin-left: 20%;

#navigacija a {
  color: rgb(26, 26, 255);
  text-decoration: none;
p {

h1 {
  color: black;
   margin-top: 20px;
  text-align: center;

🕑 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.
Loading ..................