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

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

              
                
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
	<script src="js/bootstrap.js"></script>

	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/0131.css">
	<link rel="stylesheet" type="css/bootstrap-grid.css">
	</head>
<body>
	<div class="wrapper">
	  <div class="main-bg"></div>
	  <div class="header">
		<ul class="menu">
			<li><a href="#">contact</a></li>
			<li><a href="#">work</a></li>
		</ul>
	    <a href="#" class="showmenu">☰</a>
	  </div>
	  <div class="main">
		  <div class="jumbotron">
		  	
		  		<h1 style="font-family: 中國龍新藝體;color: #A96360;font-size: 40px;padding-left: 20px;">HELLO! I'M MAXINE.</h1>
		  		<h2 style="font-family: 中國龍新藝體;color: #954A45;font-size: 30px;padding-left : 20px;padding-right: 20px;">Illustration & Graphic Design Portfolio<br></h2>
		  	</h1>

		  </div>
		  <div id="container" style="position: relative;height: 2000px;margin:10px; ">
		  	<div class="item"><img src="圖片檔/1.jpg" style="width: 160px; margin: 5px;position: absolute;">桔揚三十周年茶禮-穩重墨綠<br>"此專案為桔揚公司成立30週年所設計的紀念茶禮,以桔揚的發展歷史為主軸設計兩種不同調性的配色並且利用線條的方式勾勒最初位於三峽的利昌茶行及茶園,慢慢發展到大溪的茶廠及未來將正式營運的龍潭廠,利用連續圖的方式看見過去及未來。"</div>
		  	<div class="item"><img src="圖片檔/3.jpg" style="width: 360px; margin: 5px;position: absolute;">桔揚三十周年茶禮-繽紛桔揚<br>"此專案為桔揚公司成立30週年所設計的紀念茶禮,以桔揚的發展歷史為主軸設計,利用繽紛的漸層色呈現溫暖的氛圍,利用連續圖的方式看見過去及未來。"</div>
		  	<div class="item"><img src="圖片檔/2.jpg" style="width: 360px; margin: 5px;position: relative;">浸泡式咖啡-逗趣雙寶<br>"以兩隻動物為主角,用擬人的手法表現人們小偷懶的行為呈現假日只想放鬆的模樣,後方堆放了沖泡咖啡的器具暗喻泡好咖啡再需要繁複的程序,整體風格走溫暖色調呈現慵懶放鬆的感覺。"</div>
		  	<div class="item"><img src="圖片檔/11.jpg" style="width: 360px; margin: 5px;position: absolute;">浸泡式咖啡-慵懶靈魂<br>"此款設計是瞄準25-40歲的客群,繪畫風格是以粉蠟筆粗曠的線條略帶成熟的風格,將人們慵懶放鬆的樣子融入咖啡漫漫的香氣中。"</div>
		  	<div class="item"><img src="圖片檔/4.jpg" style="width: 360px; margin: 5px;position: absolute;">鮮茶道盒裝咖啡-異國戀情侶<br>"依企劃設定的主題-無論何時何地都想喝咖啡。故事為一對異國戀的男女主角,即使分隔兩地不同時區不同季節,彼此共同的興趣就是品嘗咖啡,因此外盒正面為女生;背面是男生,咖啡的煙連接了兩個主角,是一款故事性十足的設計。"</div>
		  	<div class="item"><img src="圖片檔/5.jpg" style="width: 360px; margin: 5px;position: absolute;">茶葉禮盒設計-祈禱的茶園之母<br>"靈感源自於寧靜且充滿仙氣的阿里山茶園,將茶園擬人化,茶園之母雙手合十為茶農祈禱每年都能豐收,也有取之於大地更要珍惜大地的意涵,是一款充滿童趣的禮盒。"</div>
		  	<div class="item"><img src="圖片檔/6.jpg" style="width: 360px; margin: 5px;position: relative;">茶葉禮盒設計-祈禱的茶園之母<br>"靈感源自於寧靜且充滿仙氣的阿里山茶園,將茶園擬人化,茶園之母雙手合十為茶農祈禱每年都能豐收,也有取之於大地更要珍惜大地的意涵,是一款充滿童趣的禮盒。"</div>
		  	<div class="item"><img src="圖片檔/7.jpg" style="width: 360px; margin: 5px;position: absolute;">茶葉禮盒設計-日出<br>"以網格工具畫出溫暖自然的漸層插畫表現日出的茶園景色,遠處的陽光灑落在山頭上,也畫出我心中的美好,傳遞樸實溫暖的氛圍。"</div>
		  	<div class="item"><img src="圖片檔/8.jpg" style="width: 360px; margin: 5px;position: absolute;">茶葉禮盒設計-日出<br>"以網格工具畫出溫暖自然的漸層插畫表現日出的茶園景色,遠處的陽光灑落在山頭上,也畫出我心中的美好,傳遞樸實溫暖的氛圍。"</div>
		  	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet deserunt consectetur commodi molestias autem facere eius obcaecati esse iure, debitis maxime distinctio fugiat sunt, deleniti quidem velit necessitatibus, illum veritatis.</div>
		  	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem reprehenderit inventore ad soluta possimus sequi assumenda tenetur minima aliquid nulla eum voluptates delectus, ea obcaecati! Maxime quisquam, aperiam corrupti commodi.</div>

		  </div>

	   </div>
		  
		
    </div>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 200
});
});
});
</script>
  <script>
  $(document).ready(function() {
  $('.showmenu').on('click', function(e){
    e.preventDefault();
    $('body').toggleClass('menu-show');
  });
  
});
  </script>
</body>
</html>
              
            
!

CSS

              
                *{
	position: relative;
	box-sizing: border-box;
}
a{
	text-decoration: none;
	color: #444444;
	font-family: 'Georgia';
}
li{
	list-style: none;
}
body{
	font-family: 微軟正黑體;
	font-size: 12px;
}
.wrapper{
	overflow: hidden;
  width:100%;
}
.main-bg{
	background: #000;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}
.elements{
	background-color: rgba(0,0,0,0.2);
	color:#000;
	border-radius: 20px;
	font-size: 20px;
	padding: 15px;


}
.header{
  background:#fff;
	z-index:650;
	border: 1px solid red;
	width: 100%;
	height:60px;
	position:fixed;
  top:0px;
  left: 0px;
}
.menu{
  z-index:500;
  float:right;
  padding-right:10px;
  
}
.menu li{
  float:left;
  width:120px;
  list-style-type:none;
  height:150px;
  display:inline;
}
.menu li a {
  overflow:hidden;
	display:inline-block;
	height:30px;
	width: 120px;
	text-align: center;
  text-decoration:none;
  font-family: fantasy ;
  color:#fff;
  text-shadow:0.05em 0.03em 0.15em #000;
  transition: transform 0.2s ;
  font-size:25px;
  margin:0 auto;

}
.menu li a:hover {
  transform: scale(1.3);
}

.showmenu{
 display: none;
}

.jumbotron{
	width: 100%;
	height: 65%;
	border: 5px solid #000;
  position:relative;
  top:50px;
}

#container{
  border:1px solid #000;
  top:40px;
}
.item{
  diplay:inline;
   position:relative;
  top:20px;
	width: 300px;
    margin: 10px;
    padding: 10px;
    float: right;
    background: #fff;
    border: 5px solid #333;
    border-color: hsla(0, 0%, 0%, 0.5);
    border-radius: 5px;
}

@media(max-width: 768px){
   .header{
	width: 100%;
	height:100px;
	position: relative;
    
    }
	.menu {
 z-index:500;
 max-height: 10px;
 overflow: hidden;
 transition: max-height .3s;
 margin-top: 10px;
 position: absolute;
 
 top: 81px;
 right: 0;
 width:150px;
 padding-left:20px;
}
.menu li{
  
 float: none;
 padding-top:10px;
 height:50px;
  z-index: 500;
 }
 .menu li a{
  padding-left:10px;
  transition: all 0.3s;
 }
.menu li a:hover{
 color: #000;
 }
.showmenu{
  font-size:25px;
  color:#000;
  text-decoration:none;
  display: block;
  float: right;
  margin-right:25px;
  margin-top:25px;
  
 }
 
.menu-show .menu{
 max-height: 500px;
 z-index:600;
}

    .jumbotron{
	width: 100%;
	height: 80vh;
	border: 1px solid #000;
	position: relative;
	top:0px;
    } 


}
              
            
!

JS

              
                $(document).ready(function() {
  $('.showmenu').on('click', function(e){
    e.preventDefault();
    $('body').toggleClass('menu-show');
  });
});
              
            
!
999px

Console