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.

            
              <nav>
  <a href="">صفحه بن بست</a>
  <a href="">صفحه فرعی</a>
  <a href="">صفحه اصلی</a>  
</nav>

<main>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius odit dolor officiis at dicta molestiae magnam omnis ducimus, neque, officia ipsum, minima dolore tempore modi, asperiores obcaecati placeat. Atque modi perspiciatis quisquam impedit dolore corporis nemo, dolores autem quas, omnis quod, sit mollitia earum. At quis, autem saepe. Autem, sed tempore dignissimos odit optio iusto at commodi nesciunt exercitationem quia minima laboriosam enim, cum qui ducimus sint quas aspernatur, dolore quos dolorem. Veniam laborum maxime, blanditiis harum iusto quas veritatis recusandae delectus? Blanditiis praesentium consectetur, veritatis, officiis officia mollitia excepturi, minima, nemo odio delectus illo dolores sed ut sequi? Cum amet soluta numquam, eius consequatur cumque, laudantium temporibus voluptate praesentium quaerat quas dolorum non aperiam ullam, voluptates saepe nihil? Dolores hic doloremque, maiores velit ex eaque perspiciatis porro repudiandae quidem itaque dolorem est reiciendis facere, odit pariatur enim. Perspiciatis esse ullam consequuntur quo reprehenderit nam necessitatibus et, dolores eius dolore illum veniam nulla a odio fuga laudantium repellat ad ipsa eligendi suscipit omnis, fugiat quos placeat, consectetur, natus. Velit architecto error voluptates similique repellat numquam, provident, nemo reprehenderit aut distinctio dolore nulla quo voluptatum iste officiis nesciunt maxime maiores aliquam dolores. Debitis maiores eligendi minima amet itaque asperiores. Nobis temporibus impedit consectetur quia, repudiandae fugit, non totam. Maxime deserunt sapiente error adipisci sequi aliquam, eum tenetur sit, illo tempore impedit itaque sint nemo, vero placeat inventore repellat laudantium. Natus cupiditate quod sapiente minus, provident, praesentium cum est ipsam! Nihil distinctio veritatis voluptatum pariatur sit animi possimus, ratione assumenda eaque, nam iure cum hic sapiente, quae similique autem culpa quia numquam! Molestias totam temporibus maiores ex ratione eligendi, dolor saepe deleniti? Saepe, blanditiis provident, explicabo, ipsam possimus repudiandae illo quibusdam odit id perspiciatis rem magnam commodi esse a neque eligendi voluptas autem laboriosam dolore eum sunt maxime quis repellendus quod. Cumque delectus eveniet totam dicta officia quasi, perspiciatis consequatur aliquam voluptates vero tenetur illum repellendus commodi consectetur. Vel laborum, ex, repellendus sunt recusandae obcaecati nemo aliquid, error fuga sed quasi cupiditate tempora! Consequuntur neque dolore eos quod totam in. A quod natus laborum dolore necessitatibus quia ipsam aperiam impedit sed culpa et at alias quos quasi ipsa amet dolorem tempora ducimus, nesciunt voluptatibus aliquam suscipit accusantium earum. Eius quod doloremque eos explicabo magni. Necessitatibus officia rem, non error ipsum cum accusantium doloremque cupiditate tempore, molestiae ab illum quis, eligendi. Ipsa esse beatae officia natus animi sed libero ipsum distinctio maxime blanditiis possimus adipisci voluptas earum nobis voluptates aliquam obcaecati non, labore debitis qui deleniti repellendus, ex. Enim consequatur quas eius perspiciatis, dolor obcaecati ea saepe explicabo labore voluptas totam vero nostrum, corporis ut architecto, aut nemo corrupti aperiam soluta porro facere. Omnis, sapiente, nostrum. Natus architecto consequatur, asperiores aliquam, inventore sunt in mollitia dolorem quae unde facilis vitae repudiandae sequi ratione eveniet laboriosam dolorum ipsum consequuntur distinctio eos nemo blanditiis. Esse ratione aspernatur ab libero deserunt animi illum amet distinctio atque nisi eveniet ullam officia quam et, facere nihil eos a! Assumenda quis omnis ab fuga animi! Fugit, quia ipsam magni enim, quasi corporis facilis perferendis, atque qui sunt nobis eos quisquam. Quo distinctio, molestiae repellendus animi minima facilis temporibus vel inventore non debitis possimus, recusandae quam, deserunt aperiam! Veniam delectus nesciunt quibusdam quasi sed amet quod, qui, consectetur neque quaerat quam officia cumque molestiae voluptatibus dignissimos. Praesentium maxime voluptate, repellendus id iste, voluptatum at alias quae accusantium reiciendis aut omnis nobis! Molestias sapiente quibusdam neque officiis repudiandae, corporis recusandae voluptatem similique consequatur aliquid, eum placeat repellendus incidunt aliquam iste tenetur iure ut soluta, quis natus est voluptate molestiae. Dolor vel doloremque ab, aliquid similique fuga voluptatem, ipsum neque ratione ex nam saepe maiores repudiandae sit laudantium voluptatibus dolore eius tempora placeat odit modi, soluta vero distinctio tenetur. Vitae commodi aliquid suscipit, aspernatur tempore ut nemo nam maiores ea saepe, et illo ducimus veritatis sed quos iusto consectetur quisquam esse. Facere sit magnam placeat, repudiandae amet hic odit mollitia, labore accusantium voluptas, delectus perferendis dignissimos nesciunt dolorem rerum repellat adipisci porro minus possimus cumque nobis aperiam voluptates quia debitis? Soluta fuga repudiandae impedit expedita nemo numquam accusamus molestias animi alias reprehenderit ducimus, vitae in necessitatibus quidem eos officia fugiat architecto praesentium nihil. Voluptates aliquid fuga, iusto non ducimus quae sunt modi nesciunt tempore molestias sit rerum dolorum rem ex ipsum aut corporis in, quia saepe ut. Eligendi vero, doloremque quisquam voluptate velit. Suscipit excepturi, distinctio! Ex suscipit nam unde cumque quos fugiat asperiores sed praesentium consectetur? Doloremque laboriosam autem eos rerum esse labore repellat, consectetur aut voluptate at tempore sequi voluptatum in unde omnis quas nobis quidem odio molestias perspiciatis officia necessitatibus assumenda quod quam? Sit porro magnam blanditiis earum, fugit, minima unde eos vero neque, quos ab, dignissimos cumque id quam! Omnis recusandae, maiores deleniti amet, vel dolore, et iusto molestias eum neque unde praesentium voluptatibus tempora. Laudantium ducimus tenetur dolore illum consectetur ullam, accusamus, asperiores nesciunt, iusto dicta ea? Harum neque doloremque perspiciatis ea unde, temporibus minus quo quod aut illo, necessitatibus, iure maxime perferendis possimus eveniet est. Facere nisi hic atque laborum asperiores, quos, assumenda, sint ea maxime similique est placeat ex repellendus veniam nam. Accusamus quidem culpa iure necessitatibus labore numquam ex, molestiae eos voluptates fugit! Enim, odit maiores labore voluptates iste mollitia officia. Explicabo id adipisci quos magni officiis ipsum, nihil quia, alias dolorum, aut quis nisi distinctio unde ducimus vitae odit maiores mollitia nostrum assumenda exercitationem animi! Nostrum quas in totam molestiae. Excepturi suscipit, nisi quo, ipsa minima voluptas quasi sed odio aliquid quia unde deserunt ex repellendus porro at nulla dolorem. Veritatis modi, perspiciatis dolorum, minus itaque ducimus totam eum quis libero quae expedita nostrum! Sequi, nostrum tenetur quis, aspernatur, veritatis eaque enim dolore accusamus quaerat temporibus quidem nemo sit harum ex corrupti laudantium molestiae dolorem cupiditate consectetur dolores mollitia. Ad facere cupiditate quam porro ducimus labore architecto veniam cumque eum quaerat quod quidem culpa optio fugit, sapiente perferendis maxime laborum fuga sint consectetur nostrum velit ab quas repudiandae. Nulla eligendi, doloremque, nam unde, sed adipisci nobis totam ad exercitationem labore est nemo sequi?
</main>
            
          
!
            
              body {
  height: 1000px;
}
nav {
  background-color: #1b1b1b;
  text-align: center;
  
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

a {
  display: inline-block;
  padding: 1em;
  color: #fff;
  text-decoration: none;
  font-family: tahoma;  
}

a:hover {
  color: yellow;
}

main {
  margin: 100px auto;
  width: 80%;
  margin: u;
}
            
          
!
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.
Loading ..................

Console