A Pen by Chiharu

Thumbnail
This awesome code was written by chiharu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chiharu ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chiharu</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  わたしたちは、3つのサービス「話す」「創る」「魅せる」を提供しています。

最良の成果を生み出すため、クライアントのビジネスを理解し、ユーザーの気持ちに共感することを心がけています。

	<div class="vision">
<img src="https://www.loarc.co.jp/cms/wp-content/uploads/2016/08/ico_bg.png">
			<ul>
				<li class="ol_web">
					<a href="https://www.loarc.co.jp/cms/service/web/">
						<img src="https://www.loarc.co.jp/cms/wp-content/uploads/2016/08/ico_web.png" alt="">
					</a>
				</li>
				<li class="ol_ofc">
					<a href="https://www.loarc.co.jp/cms/service/officesuport/">
						<img src="https://www.loarc.co.jp/cms/wp-content/uploads/2016/08/ico_ofc.png" alt="">
					</a>
				</li>
				<li class="ol_evn">
					<a href="https://www.loarc.co.jp/cms/service/event/">
						<img src="https://www.loarc.co.jp/cms/wp-content/uploads/2016/08/ico_evt.png" alt="">
					</a>
				</li>
			</ul>
	</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chiharu/a-pen-by-chiharu-pbxrXQ */

  .vision{ position: relative; width:100%; height:100.9%; max-width:333px;}
  .vision ul li{ position: absolute; width:49.849%;  display: block; color: #fff;}
  .vision ul li.ol_web{ bottom: 4%; left: 0;}
  .vision ul li.ol_ofc{ top: 8%; left: 30.9%; right: 0;}
  .vision ul li.ol_evn{ bottom: 4%; right: 0;}
	/*.vision ul li:hover{ border: 3px solid #777;  border-radius: 100%;}*/
	/*.vision ul li:hover img{ opacity: 1;}*/
  .vision ul li a img{ width:100%;}

Comments