Isometric3DGridとBootstropの相性

   Isometric and 3D Grid

Source code from Codrops

http://tympanus.net/Development/IsometricGrids/IsometricGrids.zip

*リンクをクリックするとダウンロードが始まりますのでご注意ください

How To Use

Isometric and 3D Grids

 

My public portfolio

  Code & Script

Isometic 3D Grid の画像スライド

今回のホームページ制作は、広告会社のポートフォリオが整列されているのをイメージして真似して作ってみました。

マウスホバーすると、動いてくれるスクリプトが楽しいです。

コンテンツ内容も印象に残るかなと思って利用させて頂きました。

コーディングを始める際に意識したいこと

ソースコードはcodropsから無料DLできます。

Computer

SourceCode

Database

バックアップデータ

ヘッダーに入るソースコード

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="IsometricGrids/Bootstrap v5.0">
    <meta name="generator" content="Hugo 0.79.0">
    <title>IsometricGrids / Bootstrap v5.0</title>
    <meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
    <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="../favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/style1.css" />
    <script type="text/javascript" src="js/modernizr.custom.86080.js"></script>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/navbar-fixed/">

    <!-- Isometoric -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <script src="js/modernizr.custom.js"></script>
    

    <!-- Bootstrap core CSS -->
<link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      .bg-dark {
        background-image: url("#")!important;
        height: 100px;
        padding-top: 25px !important;
        padding-left: 200px;
         -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
      }


      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="navbar-top-fixed.css" rel="stylesheet">
  </head>

 

  Bootstrapについて

グローバルメニューは、Bootstrapを使っています。

Bootstrapは、歴史のあるフレームワークですので、一度使い慣れるととても便利なので基本だけでも勉強すると後々すごく役に立ちます。

前回の記事が参考になるかもしれないので、貼っておきます。

WordPressのライバル!?Bootstrapで簡単にホームページを作ってみよう

最後までお読みくださりありがとうございました。

Contact

Yokohama city Kanazawa ward Ookawa 7-3-601

Yukyco’s Design

Liked Liked
No Comments