Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

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.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Việt Nam</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
    <li>Thành phố</li>
      <li>Khu du lịch</li>
      <li>Món ăn</li>
    </ul>
  </div>

  <div class="col-6">
    <h1>Thành phố</h1>
    <p>Việt Nam hiện có 85 thành phố, gồm: 5 thành phố trực thuộc Trung ương là Hà Nội, Hải Phòng, Đà Nẵng, TP Hồ Chí Minh và Cần Thơ; 1 thành phố thuộc thành phố trực thuộc Trung ương là TP Thủ Đức của TP Hồ Chí Minh; còn lại là 79 thành phố trực thuộc 58 tỉnh.</p>
  </div>

  <div class="col-3 right">
    <div class="aside">
      <h2>Ở đâu? </h2>
       <p>Việt Nam nằm ở ĐNA</p>
       <h2> Làm thế nào? </h2>
       <p> Bạn có thể đến Việt Nam bàng máy bay</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Thay đổi kích thước cửa sổ trình duyệt để xem nội dung phản hồi như thế nào với việc thay đổi kích thước</p>
</div>

</body>
</html>



              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console