Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

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.

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

              
                <div class="all">
  <div class="menu">
    <img src="https://pei-qun.github.io/Sweetaste/img/flex-ex-img3.svg" width="200" alt="">
    <div class="list">
      <p>回到首頁</p>
      <p>關於我們</p>
      <p>熱銷產品</p>
      <p>購物車</p>
    </div>
    <div class="copy">
      07-1234-5678 <br>
      sweetaste@email.com <br>
      800 高雄市新興區幸福路 520 號
    </div>
  </div>
  <div class="content">
    <div class="container">
      <h3>集使濟業看</h3>
      <p>麼時接發……分童阿卻在我,開似電停,我裡道的園水能金進以生參來題;毒業過立是哥:著要著久電受不身通比大!細不最時麼或公能因人外毒下生濟文政取業銷,也化投題己斷了勢地說在影家長親有得度了下成有統位你我育對此;量滿業明經:非位結是始大進,成花人上風分從否農。了大食大有石坐手,過更實的說!</p>
      <p>水食變軍的。極話英也此為。別我展人人登何五加畫地自現影放論打有。她言斷般濟個;發性易留期天活母層強間不說乎是的分和:教且演府明企生藝。而後參,經特表頭得,現展當等又看力不把最,起智覺如到共離因開跟常們要於結電?老公重……法聯這正術。葉色是先毒倒發預驗,境指世此在人為就率的!手上給對登議雨銀我,園士和化成更下車家不清馬現;相們子?爾看司生安日廣媽破性展稱們今己年。</p>
      <p>因是兒是小名出高長策事然獎出長那,臉發立一他遊完從魚,我強色直克,主動不:分雲巴引平起!景資對呢果兒土導易先片聲安我我否我安和光作。向完為大排小一會全到加為面計一,時起?</p>
      <p>第全葉值不的要一際開為,濟職死的輕兒知!孩來護屋維國以黃,最友都食明般在其怎問康是人,活家聞在建格不清體是心土懷頭不爾爸斷以情的出不。</p>
      <div class="product">
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
        <div class="sweet"></div>
      </div>
      <h4>特要名得家到的學之點大得過不</h4>
      <p>引相優像海取太情送員合消天選學油到,生陸王歌家個、交他速分其像論時生來兒者接友白論李……我校分……快很證微何銀快我什臺,年兩地容形眾書直學牛洋!克飛地……的可水加終興場等書率有好總山否劇思洲轉主!始館謝裡軍據商,話向問關麼一程臺的人高生國中細非選口過心步共下報放子查男所雨保化所了眼德備我來機同細會一港。類動木演長!法海功下北……眼實高有張找新起果十。育表過禮。國生建現在那生建實雲多作只沒年母晚斷是參快情法愛文她試在整陽算安主月高體:大上子部分道員世獎出經電畫,看密便車重成轉排。事後加南導時大人電家一、時至式不願,臺他第回生品西處下收教是?家用多水;有大水形解兩以。分房起想:服利時裡發上片美巴化後著要流的孩畫來聲率動,一開作腦足。

      送的組。國好樂夠雨青不地人提天主身造,前一克、滿女情活不保高取、生卻處是會意特、用防相子部地相馬何:頭積出兒險站加往港家治大不命山業期得通連合想!夫臺心職腳車經冷養;每明主室官海孩高立高無說又,子禮分人行裡。都一手中前這面裡……有像立竟樂費喜一在且過機只門度中難古我河選……單法術的法任戲父案在日效情去現。</p>
    </div>
  </div>
</div>
              
            
!

CSS

              
                body,html{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: "Comic Sans MS","Microsoft JhengHei";
  color: #333;
}
h3{
  color: #3F5D45;
}
.all{
  height: 100%;
}
.menu{
  flex: 0 1 350px;
  background-color: #EAF0ED;
  color: #3F5D45;
  padding: 50px 0;
}
.content{
  flex: 1 1 500px;
  overflow-y: overlay;
  padding: 50px 60px;
}
.content .product{
}
.content .product .sweet{
  flex: 1 1 33.33%;
  background-image: url('https://images.unsplash.com/photo-1525251172010-e7472985a6ca?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80');
  background-size: cover;
  height: 15vw;
  border: 2px #fff solid;
  box-sizing: border-box;
  
}
              
            
!

JS

              
                
              
            
!
999px

Console