Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@gamerinshaft
gamerinshaft committed May 30, 2015
1 parent c379755 commit 4904c3c
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 33 deletions.
91 changes: 58 additions & 33 deletions css/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
valueに関してはこのようにして取得するイメージ。
動的化はジェネレータの都合上割愛。
back 500 float 700 bar 800
```
<div class="row">
<div class="flex flex-lg-auto flex-fluid-sm-33">
<div class="frame z1 card aspectwrapper-2by3">
<div class="frame z1 card aspectwrapper-2by3 ruby">
<div class="content">
<div class="top z2 aspectwrapper-3by2">
<div class="content image" style="background-image: url('http://blog-imgs-46-origin.fc2.com/k/o/m/komopes/s11_scene02.jpg')"></div>
Expand Down Expand Up @@ -54,25 +54,25 @@ valueに関してはこのようにして取得するイメージ。
</div>
</div>
<div class="flex flex-lg-auto flex-fluid-sm-33">
<div class="frame z1 card aspectwrapper-2by3">
<div class="frame z1 card aspectwrapper-2by3 php">
<div class="content">
<div class="top z2 aspectwrapper-3by2">
<div class="content image" style="background-image: url('http://blog-imgs-46-origin.fc2.com/k/o/m/komopes/s11_scene02.jpg')"></div>
<div class="content image" style="background-image: url('http://i.imgur.com/M3TkdAU.jpg')"></div>
<a href="#" class="float-button z2">>></a>
</div>
<div class="status column between">
<div class="flex flex-xs-auto">
<div class="skill"><span>特技:</span> Web開発</div>
<div class="skill"><span>特技:</span> CMSツール運用</div>
</div>
<div class="row bottom">
<div class="flex flex-xs-auto">
<div class="bars-title">使用頻度:</div>
<div class="bar-name">Ruby</div>
<div class="bar-name">Wordpress</div>
<div class="bar v100" data-value="100"></div>
<div class="bar-name">Php</div>
<div class="bar v80" data-value="80"></div>
<div class="bar-name">C++</div>
<div class="bar v40" data-value="40"></div>
<div class="bar v60" data-value="60"></div>
<div class="bar-name">HTML</div>
<div class="bar v60" data-value="60"></div>
</div>
<div class="flex flex-xs-auto">
<img src="./img/ruby.png" class="fav-logo">
Expand All @@ -83,25 +83,25 @@ valueに関してはこのようにして取得するイメージ。
</div>
</div>
<div class="flex flex-lg-auto flex-fluid-sm-33">
<div class="frame z1 card aspectwrapper-2by3">
<div class="frame z1 card aspectwrapper-2by3 csharp">
<div class="content">
<div class="top z2 aspectwrapper-3by2">
<div class="content image" style="background-image: url('http://blog-imgs-46-origin.fc2.com/k/o/m/komopes/s11_scene02.jpg')"></div>
<div class="content image" style="background-image: url('http://livedoor.blogimg.jp/nizigami/imgs/5/8/58ad4183.jpg')"></div>
<a href="#" class="float-button z2">>></a>
</div>
<div class="status column between">
<div class="flex flex-xs-auto">
<div class="skill"><span>特技:</span> Web開発</div>
<div class="skill"><span>特技:</span> Androidアプリ</div>
</div>
<div class="row bottom">
<div class="flex flex-xs-auto">
<div class="bars-title">使用頻度:</div>
<div class="bar-name">Ruby</div>
<div class="bar-name">C#</div>
<div class="bar v100" data-value="100"></div>
<div class="bar-name">Php</div>
<div class="bar-name">C</div>
<div class="bar v80" data-value="80"></div>
<div class="bar-name">C++</div>
<div class="bar v40" data-value="40"></div>
<div class="bar v50" data-value="50"></div>
</div>
<div class="flex flex-xs-auto">
<img src="./img/ruby.png" class="fav-logo">
Expand All @@ -112,25 +112,25 @@ valueに関してはこのようにして取得するイメージ。
</div>
</div>
<div class="flex flex-lg-auto flex-fluid-sm-33">
<div class="frame z1 card aspectwrapper-2by3">
<div class="frame z1 card aspectwrapper-2by3 javascript">
<div class="content">
<div class="top z2 aspectwrapper-3by2">
<div class="content image" style="background-image: url('http://blog-imgs-46-origin.fc2.com/k/o/m/komopes/s11_scene02.jpg')"></div>
<div class="content image" style="background-image: url('http://animewallpaperstock.com/wallpaper/03sa/steins-gate/steins-gate0118.jpg')"></div>
<a href="#" class="float-button z2">>></a>
</div>
<div class="status column between">
<div class="flex flex-xs-auto">
<div class="skill"><span>特技:</span> Web開発</div>
<div class="skill"><span>特技:</span>セッションハイジャック</div>
</div>
<div class="row bottom">
<div class="flex flex-xs-auto">
<div class="bars-title">使用頻度:</div>
<div class="bar-name">Ruby</div>
<div class="bar-name">Javascript</div>
<div class="bar v100" data-value="100"></div>
<div class="bar-name">Php</div>
<div class="bar v80" data-value="80"></div>
<div class="bar-name">C++</div>
<div class="bar v40" data-value="40"></div>
<div class="bar-name">go</div>
<div class="bar v60" data-value="60"></div>
<div class="bar-name">F</div>
<div class="bar v20" data-value="20"></div>
</div>
<div class="flex flex-xs-auto">
<img src="./img/ruby.png" class="fav-logo">
Expand All @@ -149,8 +149,20 @@ valueに関してはこのようにして取得するイメージ。
min-height: 375px;
width: 235px;
max-width: 235px;
background-color: rgb(249, 37, 113);
}
.frame.card.ruby{
background-color: #E91E63;
}
.frame.card.php{
background-color: #3f51b5;
}
.frame.card.csharp{
background-color: #9c27b0;
}
.frame.card.javascript{
background-color: #ff9800;
}

.frame.card .top{
position: relative;
}
Expand All @@ -161,7 +173,6 @@ valueに関してはこのようにして取得するイメージ。
}
.frame.card .float-button {
padding: 8px;
background-color: rgb(204,2,75);
border-radius: 50px;
text-decoration: none;
color: white;
Expand All @@ -176,6 +187,18 @@ valueに関してはこのようにして取得するイメージ。
right: 24px;
bottom: -36px;
}
.frame.card.ruby .float-button {
background-color: #C2185B;
}
.frame.card.php .float-button {
background-color: #303f9f;
}
.frame.card.csharp .float-button {
background-color: #7b1fa2;
}
.frame.card.javascript .float-button {
background-color: #f57c00;
}
.frame.card .status{
padding: 16px;
font-size: 12px;
Expand All @@ -198,19 +221,21 @@ valueに関してはこのようにして取得するイメージ。
.frame.card .status .bar{
margin: 4px 0px;
height: 8px;
background-color: rgb(204, 2, 75);
}

.frame.card .status .bar.v100{
width: 100%;
.frame.card.ruby .status .bar{
background-color: #AD1457;
}
.frame.card.php .status .bar{
background-color: #283593;
}
.frame.card .status .bar.v80{
width: 80%;
.frame.card.csharp .status .bar{
background-color: #6a1b9a;
}
.frame.card .status .bar.v40{
width: 40%;
.frame.card.javascript .status .bar{
background-color: #ef6c00;
}


.frame.card .status .fav-logo{
width: 90%;
margin-right: 0;
Expand Down
31 changes: 31 additions & 0 deletions css/theme.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,34 @@
.frame.card .status .bar.v100{
width: 100%;
}
.frame.card .status .bar.v90{
width: 90%;
}
.frame.card .status .bar.v80{
width: 80%;
}
.frame.card .status .bar.v70{
width: 70%;
}
.frame.card .status .bar.v60{
width: 60%;
}
.frame.card .status .bar.v50{
width: 50%;
}
.frame.card .status .bar.v40{
width: 40%;
}
.frame.card .status .bar.v30{
width: 30%;
}
.frame.card .status .bar.v20{
width: 20%;
}
.frame.card .status .bar.v10{
width: 10%;
}

.login-wrap.animate .visibleContent.testbox5, .login-wrap.animate .login-mask.testbox5, .login-wrap.animate .login-button.testbox5, .login-wrap.animate .login-button.testbox5:after .login-wrap.animate .visibleContent.testbox5{
animation-iteration-count: infinite !important;
-webkit-animation-iteration-count: infinite !important;
Expand Down

0 comments on commit 4904c3c

Please sign in to comment.