Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@haruki-hiraiwa
haruki-hiraiwa authored Mar 5, 2024
1 parent 605a884 commit 882022e
Showing 1 changed file with 103 additions and 70 deletions.
173 changes: 103 additions & 70 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,116 @@
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<header>
<div class="container">
<div class="header-left">
<img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
</div>
<span class="fa fa-bars menu-icon"></span>
<div class="header-right">
<a href="#">レッスン</a>
<a href="#">新規登録</a>
<a href="#" class="login">ログイン</a>
</div>
</div>
</header>
<div class="top-wrapper">
<div class="container">
<h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
<p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
<div class="btn-wrapper">
<a href="#" class="btn signup">新規登録はこちら</a>
<p>or</p>
<a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
<a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
</div>
</div>
</div>
<div class="lesson-wrapper">
<div class="container">
<div class="heading">
<h2>Learn Where to Get Started!</h2>
</div>
<div class="lessons">
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/html.png">
<p>HTML & CSS</p>
<div class="footer__sitemap">
<div class="footer__sitemap--inner acod__nav js-acod__nav">
<div class="acod__switchNav">
<p>金・貴金属買取</p>
</div>
<div class="acod__contentsNav">
<ul class="acod__contentsNav--link">
<li class="item"><a href="https://www.otakaraya.jp/gold/">金買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/souba/">金相場</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/ingot/">インゴット買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/souba/ingot/">インゴット相場</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/24kin/">24金買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/souba/24kin/">24金相場</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/18kin/">18金買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/souba/18kin/">18金相場</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/accessory/">金のアクセサリー買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/gold/kinka-ginka/">金貨買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/kikinzoku/">貴金属買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/platinum/">プラチナ買取</a></li>
</ul>
</div>
</div>
<div class="footer__sitemap--inner acod__nav js-acod__nav">
<div class="acod__switchNav">
<p>ダイヤ・宝石買取</p>
</div>
<div class="acod__contentsNav">
<ul class="acod__contentsNav--link">
<li class="item"><a href="https://www.otakaraya.jp/daiya/">ダイヤ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/ring/">リング・結婚指輪買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/emerald/">エメラルド買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/sapphire/">サファイア買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/ruby/">ルビー買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/jade/">ヒスイ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/opal/">オパール買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/topaz/">トパーズ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/tanzanite/">タンザナイト買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/amethyst/">アメジスト買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/paraiba-tourmaline/">パライバトルマリン買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/cats-eye/">キャッツアイ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/alexandrite/">アレキサンドライト買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/garnet/">ガーネット買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/daiya/aquamarine/">アクアマリン買取</a></li>
</ul>
</div>
<p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/jQuery.png">
<p>jQuery</p>
<div class="footer__sitemap--inner acod__nav js-acod__nav">
<div class="acod__switchNav">
<p>ブランド時計買取</p>
</div>
<div class="acod__contentsNav">
<ul class="acod__contentsNav--link">
<li class="item"><a href="/brand-tokei/">時計買取</a></li>
<li class="item"><a href="/brand-tokei/rolex/">ロレックス買取</a></li>
<li class="item"><a href="/brand-tokei/rolex/daytona/">ロレックス デイトナ買取</a></li>
<li class="item"><a href="/brand-tokei/rolex/submariner/">ロレックス サブマリーナー買取</a></li>
<li class="item"><a href="/brand-tokei/rolex/gmtmaster/">ロレックス GMTマスター買取</a></li>
<li class="item"><a href="/brand-tokei/rolex/explorer1/">ロレックス エクスプローラー買取</a></li>
<li class="item"><a href="/brand-tokei/rolex/datejust/">ロレックス デイトジャスト買取</a></li>
<li class="item"><a href="/brand-tokei/patekphilippe/">パテック フィリップ買取</a></li>
<li class="item"><a href="/brand-tokei/patekphilippe/nautilus/">パテック フィリップノーチラス買取</a></li>
<li class="item"><a href="/brand-tokei/audemarspiguet/">オーデマ ピゲ買取</a></li>
<li class="item"><a href="/brand-tokei/audemarspiguet/royal-oak/">オーデマ ピゲ ロイヤルオーク買取</a></li>
<li class="item"><a href="/brand-tokei/vacheronconstantin/">ヴァシュロン・コンスタンタン買取</a></li>
<li class="item"><a href="/brand-tokei/lange-soehne/">A.ランゲ&ゾーネ買取</a></li>
<li class="item"><a href="/brand-tokei/breguet/">ブレゲ買取</a></li>
<li class="item"><a href="/brand-tokei/omega/">オメガ買取</a></li>
<li class="item"><a href="/brand-tokei/hublot/">ウブロ買取</a></li>
<li class="item"><a href="/brand-tokei/iwc/">IWC買取</a></li>
<li class="item"><a href="/brand-tokei/cartier/">カルティエ買取</a></li>
<li class="item"><a href="/brand-tokei/franckmuller/">フランク ミュラー買取</a></li>
<li class="item"><a href="/brand-tokei/richardmille/">リシャール・ミル買取</a></li>
</ul>
</div>
<p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/ruby.png">
<p>Ruby</p>
<div class="footer__sitemap--inner acod__nav js-acod__nav">
<div class="acod__switchNav">
<p>ブランド品買取</p>
</div>
<div class="acod__contentsNav">
<ul class="acod__contentsNav--link">
<li class="item"><a href="https://www.otakaraya.jp/brand/">ブランド買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/louis-vuitton/">ルイ・ヴィトン買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/hermes/">エルメス買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/hermes/birkin/">エルメス バーキン買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/hermes/kelly/">エルメス ケリー買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/chanel/">シャネル買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/chanel/matelasse/">シャネル マトラッセ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/dior/">ディオール買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/celine/">セリーヌ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/fendi/">フェンディ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/gucci/">グッチ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/prada/">プラダ買取</a></li>
</ul>
</div>
<p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
</div>
<div class="lesson">
<div class="lesson-icon">
<img src="https://prog-8.com/images/html/advanced/php.png">
<p>PHP</p>
<div class="footer__sitemap--inner acod__nav js-acod__nav">
<div class="acod__switchNav">
<p>ブランドジュエリー買取</p>
</div>
<div class="acod__contentsNav">
<ul class="acod__contentsNav--link">
<li class="item"><a href="https://www.otakaraya.jp/brand/harrywinston/">ハリーウィンストン買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/tiffany/">ティファニー買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/chaumet/">ショーメ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/chopard/">ショパール買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/piaget/">ピアジェ買取</a></li>
<li class="item"><a href="https://www.otakaraya.jp/brand/boucheron/">ブシュロン買取</a></li>
</ul>
</div>
<p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="message-wrapper">
<div class="container">
<div class="heading">
<h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
<h3>Let's learn to code, learn to be creative!</h3>
</div>
<span class="btn message">さっそく開発する</span>
</div>
</div>
<footer>
<div class="container">
<img src="https://prog-8.com/images/html/advanced/footer_logo.png">
<p>Learn to Code, Learn to be Creative.</p>
</div>
</footer>
</body>
</html>

0 comments on commit 882022e

Please sign in to comment.