https://github.com/matsutaku/portfoliosample

徳大知情M1後期輪講　Webフロントエンド作成入門　演習用サンプルコード
https://github.com/matsutaku/portfoliosample

Last synced: 7 months ago
JSON representation

徳大知情M1後期輪講　Webフロントエンド作成入門　演習用サンプルコード

• Host: GitHub
• URL: https://github.com/matsutaku/portfoliosample
• Owner: MatsuTaku
• Created: 2018-10-17T12:05:58.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-20T11:05:15.000Z (almost 7 years ago)
• Last Synced: 2025-03-14T19:56:04.156Z (7 months ago)
• Language: HTML
• Size: 1.24 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# PortfolioSample

徳大知情M1後期輪講　Webフロントエンド作成入門　演習用サンプルコード

## Preparation

  1. Download this project from '**Clone or download▼**'. And decompress it.

  2. Show 'sample/index.html' and 'practice/index.html' at _**Firefox**_.

  3. Open downloaded directory with _**Visual studio code**_.

  4. 'practice/*' are your work files.

## Totrial

### 1. Adapt the layout to some classes with follows:

  - .port-title

    - Set font size to 40px

    - Set text alignment to center

    - Set letter spacing to 8px

    - Set margin top and bottom to 40px

  - .port-description

    - Set text alignment to center

    - Set letter spacing to 4px

![](.readme-img/readme-1.png)

### 2. Adapt class name "_card_" and so on to content box.

This process using bootstrap's component **card**.

![](.readme-img/readme-2.png)

### 3. Copy box classed "_port-content_" and under that.

  You should change class name from "_port-item1_" to "port-[item name]"

![](.readme-img/readme-4.png)

### 4. Change content color to color of your choice.

#### For example

  - .port-item1

    - Set background color to rgb(65, 215, 230);

  - .port-[second item name]

    - Set background color to rgb(162, 120, 190);

  - .port-content-title

    - Set text color to white

![](.readme-img/readme-5.png)

### 5. Prepare footer design.

  - Set class name "_btn_" to object '**a**'

  - Set button design to follows:

    - Set class name "_btn-primary_" to button 'Twitter'

    - Set class name "_btn-secondary_" to button 'GitHub'

![](.readme-img/readme-6.png)

  - Layout buttons using bootstrap's **coutainer-row-column**.

  - Set class name "_justify-content-around_" to row box.

  - footer

    - Set padding top and bottom to 20px

![](.readme-img/readme-7.png)

### 6. Create yourself!