あなた自身のオンラインアイデンティティマッピングサイトを作ってください

4085 ワード
html css beginners webdev テキストリンク

オンラインIDマッピング


あなた自身のために開発者ウェブサイトを作ることは、特定のタイプの人をとります.私はそれを憎む人のうちの1人です、しかし、私はすべての私の関連のために集中した場所を持つという考えが好きです.それで、私はオンラインアイデンティティマッピングを作りました!
この単純なウェブサイトは正確にそれが錫の上で言うことをします、それはすべてのプロフィール(または、私が共有したいもの)をとって、視覚的に私の名前に彼らをリンクします.私はそれから1つの関連を送ることができて、彼らが眠っている必要があるすべてを持っているということを知っています.
あなたは私のチェックアウトすることができますhere

オンラインアイデンティティマッピングをする方法


私は、すべてを非常に単純にしました.魔法のほとんどはmain.css . それは大きな画面で“カード”スタイルでは、小さなものに垂直に移動します.

設定


始めるためにfork or clone this repo あなたのマシンに.そこからあなたの端末でこれを実行して欲しいものは何でも変更できます.
// replace <whatever> with what you want to call it.
mv about14sheep.github.io <whatever>
// example - rename this project to myproject
mv about14sheep.github.io myproject
今すぐあなたの新しいプロジェクトに残りを行うに行くことができますcd myproject 置換myproject 何でもあなたがそれを名前を選択してください.
さて、すべてのGit履歴を欲しくないので、以下のようにします.
rm -r .git
また、私のcnameファイルを削除したり、独自のドメインを持っている場合は更新します.
rm CNAME
今、あなたはきれいなスレートを持ってgit back (後述)
git init

詳細の追加


それを簡単に保つために、私はテンプレートのHTMLファイルを追加しました.このファイルは、index.html ファイルが、あなたの詳細を挿入するためのスペースがあります.あなたが探しているものは大きいです{ PUT YOUR _____ HERE } どこ_____ はタイトルやイメージパスなどです.また、ブラケットを削除することを忘れないでください{ } !
あなたが立ち往生するならば、あなたはのぞき込むことができますindex.html 比較する!
したら、すべてのあなたの情報を削除している私の削除index.html :
rm index.html
次に、テンプレートファイルをindex.html :
mv template.html index.html
例えば、ウェブサイトのタイトルを変更するには以下のようにします.
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <title>{PUT YOUR TITLE HERE}</title>
</head>
そして、あなたがこれを『ジョンスミスKenターミネータ』に変えたいならば、それは以下のようになります
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./main.css">
    <title>John Smith | Terminator</title> // remove the {brackets}!
</head>

イメージとイメージへの道


あなたのリンクをしたい画像をダウンロードできますimages フォルダ.そこから道が./images/your-image.png . 以下に例を示します:
<img src="./images/stack-overflow.svg" width="48" height="48">

パイプカラーの変更


あなたはHTMLで直接パイプのアクセントの色を変更することができます.あなたが探すならば<p> あなたの名前がある要素は、あなたに会います<span> 要素
<span style="color: gray; border-left: solid; border-color: #F47F24; padding-left: 5px;">{YOUR ONLINE HANDLE HERE}</span>
変更するborder-color 好きなものに

メイクイットユウユー


これは、多くの進行していないシンプルなHTMLファイルです.それを楽しんで、またはそれがある方法を保つ.それはあなた次第!あなたがするならば、私がわかることができるように、戻って来て、コメントの関連を残してください!

オンラインIDマッピング


すべての栄光でこのサイトをホストするために、私は簡単なルートに行きました.私はそれをAに変えたgithub pages site . これはあなたが今どこにいるのかとても簡単になります.
あなたがどんな問題にでも走らせるならば、私にここで知っているようにしてください、そして、我々はそれを理解することができます!
2 D配列にメモリを割り当てる
高朗定数宣言と略宣言方法