github pages 三島

2019/9/20

github pagesを作ってみる。

作り方

→プロジェクトサイト用でブランチを切る。

HTMLのテンプレートを探す。

ポートフォリオ用の1枚ものがよさそう。

こちらの、Transcendにする。

ちょこっといじってみた

https://gyazo.com/d14813f312e4d5a87a6d767dd7d509a0

いい感じ！

項目を決める

https://gyazo.com/7c8745dac3544381f07f5ced5ff21daa

この部分。

↓

code:bash

・概要 overview

・学んだことlearning

・記録 memo

・食レポ eating

これを参考にする

↓

code:html

<!-- services

================================================== -->

<section id='leaning' class="s-leaning light-gray">

<div class="row section-header" data-aos="fade-up">

<div class="col-full">

<h3 class="subhead">What We Do</h3>

<h1 class="display-1">We have everything you need to launch and grow a successful digital business.</h1>

</div>

</div> <!-- end section-header -->

<div class="row" data-aos="fade-up">

<div class="col-full">

<p class="lead">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

</p>

</div>

</div> <!-- end about-desc -->

<div class="row services-list block-1-3 block-m-1-2 block-tab-full">

<div class="col-block service-item " data-aos="fade-up">

<div class="service-icon service-icon--brand-identity">

<i class="icon-tv"></i>

</div>

<div class="service-text">

<h3 class="h4">Brand Identity</h3>

<p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium.

Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.

Sunt suscipit voluptas ipsa in tempora esse soluta sint.

</p>

</div>

</div>

<div class="col-block service-item" data-aos="fade-up">

<div class="service-icon service-icon--illustration">

<i class="icon-group"></i>

</div>

<div class="service-text">

<h3 class="h4">Illustration</h3>

<p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium.

Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.

Sunt suscipit voluptas ipsa in tempora esse soluta sint.

</p>

</div>

</div>

<div class="col-block service-item" data-aos="fade-up">

<div class="service-icon service-icon--web-design">

<i class="icon-earth"></i>

</div>

<div class="service-text">

<h3 class="h4">Web Design</h3>

<p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium.

Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.

Sunt suscipit voluptas ipsa in tempora esse soluta sint.

</p>

</div>

</div>

<div class="col-block service-item" data-aos="fade-up">

<div class="service-icon service-icon--product-strategy">

<i class="icon-cube"></i>

</div>

<div class="service-text">

<h3 class="h4">Product Strategy</h3>

<p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium.

Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.

Sunt suscipit voluptas ipsa in tempora esse soluta sint.

</p>

</div>

</div>

<div class="col-block service-item" data-aos="fade-up">

<div class="service-icon service-icon--ui-design">

<i class="icon-window"></i>

</div>

<div class="service-text">

<h3 class="h4">UI/UX Design</h3>

<p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium.

Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.

Sunt suscipit voluptas ipsa in tempora esse soluta sint.

</p>

</div>

</div>

<div class="col-block service-item" data-aos="fade-up">

<div class="service-icon service-icon--mobile-dev">

<i class="icon-lego-block"></i>

</div>

<div class="service-text">

<h3 class="h4">Mobile Development</h3>

<p>Nemo cupiditate ab quibusdam quaerat impedit magni. Earum suscipit ipsum laudantium.

Quo delectus est. Maiores voluptas ab sit natus veritatis ut. Debitis nulla cumque veritatis.

Sunt suscipit voluptas ipsa in tempora esse soluta sint.

</p>

</div>

</div>

</div> <!-- end services-list -->

</section> <!-- end s-services -->

Twitterとかのリンク

code:html

<li>

<a href="#0"><i class="fab fa-facebook"></i></a>

</li>

↓

文章の途中でリンクする

<a href="リンク先">単語や、語句</a>