123

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.

            
              <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Practice</title>
  <!-- <link rel="stylesheet" href="css/all.css"> 本機端開啟的CSS-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="container-table">
      <div class="container-table-cell">
        <nav>
          <a href="#"> <img src="https://via.placeholder.com/150" alt="me">
          </a>
          ` <ul>
            <li>
              <a href="#about">
                <p>about</p>
              </a>
            </li>
            <li>
              <a href="#experience">
                <p>experience</p>
              </a>
            </li>
            <li>
              <a href="#skill">
                <p>skills</p>
              </a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
  <!-- Home -->
  <section class="home" id="about">
    <div class="container">
      <h1>AC <span>Genie</span></h1>
      <a href="malito:AC-GENIE@ALPHACAMP.CO" class="mail">AC-GENIE@ALPHACAMP.CO</a>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto officia veniam reiciendis odit saepe
        asperiores atque aut quos laboriosam, quia, veritatis ullam voluptate vitae provident, omnis ab ipsum itaque
        nisi similique. Asperiores nihil a fugiat dolorem magni, similique ea velit ut deserunt iusto numquam qui iste
        incidunt molestias dolores, quia fuga maiores. Velit error explicabo labore nam possimus at ducimus tenetur
        recusandae maiores placeat est saepe, reprehenderit animi asperiores totam neque libero tempora aliquam
        accusantium? Excepturi odit harum soluta quas.
      </p>
      <div class="social-icon">
        <a href="https://www.linkedin.com"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
        <a href="https://github.com""><i class=" fab fa-github" aria-hidden="true"></i></a>
        <a href="https://twitter.com><i class="><i class="fab fa-twitter" aria-hidden="true"></i></a>
        <a href="https://www.facebook.com""><i class=" fab fa-facebook" aria-hidden="true"></i></a>
      </div>
    </div>
  </section>

  <!-- Experience -->
  <section class="experience" id="experience">
    <div class="container" id="exp">
      <h2>experience</h2>
      <div class="resume clearfix">
        <div class="job-left">
          <h3>senior web developer</h3>
          <h4>intelitec solutions</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quibusdam perspiciatis fuga amet quae quis
            iste quidem, possimus quasi laudantium, voluptatem quod exercitationem impedit assumenda? Corrupti placeat
            distinctio officia ex!</p>
        </div>

        <div class="time-right">
          <p class="time">march 2013 - present</p>
        </div>
      </div>
      <div class="resume clearfix">
        <div class="job-left">
          <h3>senior web developer</h3>
          <h4>intelitec solutions</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quibusdam perspiciatis fuga amet quae quis
            iste quidem, possimus quasi laudantium, voluptatem quod exercitationem impedit assumenda? Corrupti placeat
            distinctio officia ex!</p>
        </div>

        <div class="time-right">
          <p class="time">December 2011 - March 2013</p>
        </div>
      </div>
      <div class="resume clearfix">
        <div class="job-left">
          <h3>senior web developer</h3>
          <h4>intelitec solutions</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quibusdam perspiciatis fuga amet quae quis
            iste quidem, possimus quasi laudantium, voluptatem quod exercitationem impedit assumenda? Corrupti placeat
            distinctio officia ex!</p>
        </div>

        <div class="time-right">
          <p class="time">July 2010 - December 2011</p>
        </div>
      </div>
      <div class="resume clearfix">
        <div class="job-left">
          <h3>senior web developer</h3>
          <h4>intelitec solutions</h4>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quibusdam perspiciatis fuga amet quae quis
            iste quidem, possimus quasi laudantium, voluptatem quod exercitationem impedit assumenda? Corrupti placeat
            distinctio officia ex!</p>
        </div>

        <div class="time-right">
          <p class="time">September 2008 - July 2010</p>
        </div>

      </div>
    </div>
  </section>
  <!-- Skills -->
  <section class="skills" id="skill">
    <div class="container" id="skills">
      <h2>Skills</h2>
      <h3>programming languages & tools</h3>
      <div class="skills-icon">
        <a href="#"><i class="fab fa-html5" aria-hidden="true"></i></a>
        <a href="#"><i class="fab fa-js-square" aria-hidden="true"></i></a>
        <a href="#"><i class="fab fa-node-js" aria-hidden="true"></i></a>
        <a href="#"><i class="fab fa-vuejs" aria-hidden="true"></i></a>
        <a href="#"><i class="fab fa-node" aria-hidden="true"></i></a>
        <a href="#"><i class="fab fa-wordpress" aria-hidden="true"></i></a>
        <a href="#"><i class="fab fa-npm" aria-hidden="true"></i></a>
      </div>
      <h3>Work Flow</h3>
      <div class="workflow">
        <ul>
          <li><i class="fas fa-check"><span>Mobile-First Responsive Design</span></i></li>
          <li><i class="fas fa-check"><span>Cross Brower Testing & Debuging</span></i></li>
          <li><i class="fas fa-check"><span>Cross Funtional Teams</span></i></li>
          <li><i class="fas fa-check"><span>Agile Development & Scrum</span></i></li>
        </ul>
      </div>
    </div>
  </section>
</body>

</html>
            
          
!
            
              /* ========== CSS 全區設定 ========== */
/*公版內容開始,排版用class,標註特定位置用id*/
html, body {
  width: 100%;
  height: 100%;
}

body {
  padding: 0px;
  margin: 0px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
  font-family: Muli,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
}

* {
  /*border-box:實際寬高=所設定的數值(已包含border和padding)*/
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0px;
  padding: 0px;
  margin-bottom:10px;
}

ul, ol {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

a, a:hover, a:focus {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

/*Section 共用設定*/
section {
  display:table;
  padding-left:350px;
  width:90%;
  height:100%; /*別忘記設定高度,否則無法垂直置中*/
}

/*容器 Container 設定*/
.container {
  display:table-cell;
  width: 85%;
  max-width: 1170px;
  margin: 0 auto;
  vertical-align:middle;
  text-align:justify;
}

/*各段字型專案調整*/
h1{
  font-size:50px;
}

h2 {
  margin-bottom: 10px;
  text-align: left;
  font-size: 24px;
  line-height: 50px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

h3, h4{
  text-transform: uppercase;
}

h4{
  color:#0A50EB;
}
p{
  font-size:16px;
  margin:25px auto;
}


/*清除浮動效果,讓高度出現,方法I*/
.clearfix {
  clear:both;
}

/*公版內容結束*/

/* ========== HEADER設定 ========== */
header{
  position:fixed;
  width:250px;
  height:100%;
  background-color: #0A50EB;
}

.container-table{
  display:table;
  width:100%;
  height:100%;
  position:relative;
}

.container-table-cell{
  display:table-cell;
  text-align:center;
  vertical-align: middle;
}

.container-table-cell img{
  max-width: 150px;
  margin: 0 auto;
  border: 5px solid #0084FF;
  border-radius: 50%;
}

.container-table-cell ul li p{
  display:block;
  font-size: 16px;
  line-height:24px;
  padding:5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.container-table-cell ul li a{
  display:block;
  color:rgba(255,255,255,0.5);
  text-decoration:none;
  font-weight:bold;
  -webkit-transition: linear 2ms;
  -moz-transition: linear 2ms;
  -ms-transition: linear 2ms;
  -o-transition: linear 2ms;
  transition: linear 2ms;
}

header nav a:hover{
  color:#fff;
}

/* ========== Home設定 ========== */
.home span{
  color:#0A50EB;
}

.home a.mail{
  display:inline-block;
  margin-bottom: 40px;
  font-size:14px;
}

.home p{
  line-height: 20px;
  color:#8e8e8e;
}

.social-icon a{
  margin-top:30px;
  margin-right:20px;
  display:inline-block;
  width:40px;
  height:40px;
  text-align: center;
  color:#ffffff;
  background-color: #333;
  border-radius:50%;
  font-size:25px;
  line-height:40px;
}

/* ========== Experience設定 ========== */
.container#exp{
  vertical-align: top;
}

.resume{
  display:inline-block;
}

.job-left{
  float:left;
  width:75%;
}

.job-left p{
  color:#8e8e8e;
}

p.time{
  float:right;
  width:20%;
  text-transform: capitalize;
  font-size:12px;
  color: #0A50EB;
  text-align: right;
  margin:10px;
}

/* ========== Skills 設定 ========== */
.container#skills{
  vertical-align: top;
}

.skills .container h2{
  margin-top:180px;
  font-size:26pt;
  margin-bottom:80px;
}

.skills .container h3{
  font-size:14pt;
  margin-bottom:30px;
  color:#0A50EB;
}

.skills-icon a{
  display:inline-block;
  margin-bottom:20px;
  font-size:40px;
  margin-right: 15px;
  color:#9d9d9d;
}

.skills ul li{
  color:#9d9d9d;
  font-size:18px;
}

.skills ul li span{
  margin-left:10px;
}

.workflow ul i{
  margin: 0 5px;
}
            
          
!
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.

Console