プログラミング勉強日記 27日目
今日の学習時間:4時間
ただいまの総学習時間:126時間
約20日ぶりに勉強再開
とりあえず、1ヶ月での案件こなす計画は失敗。
最初はLP作成が1番簡単ということで学習を進めていたが、先のことを考えてと単純な面白さからRuby on railsでのwebアプリケーションの作成をできるようにする。
今日はテックアカデミーの申し込みを完了して、9月25日〜10月22日までの1ヶ月コースで受講して案件の獲得を目指す。
早めに結果を求めると途中から焦りも出てくるので自分のペースでじっくりと穴なく学習を進め、案件をこなす際に細部までこだわって、依頼する側の要件にしっかりと答えられるように土台部分をしっかり作って行く。
プログラミング勉強日記 25日目
今日の学習時間:6時間半
ただいまの総学習時間:117時間
だんだんと容量がつかめてきて、進具合が早くなってきた。
インターン前にisaraのサイトは完成させたい。
今日書いたもの
見本
自分が書いたもの
プログラミング勉強日記 23日目
今日の学習時間:3時間
ただいまの総学習時間:108時間半
エラーがわからず、
float:left;
widthの指定
だけの場所で2時間近く迷った。
ただ、夏休みが終わるまでは独学で継続。
見本
自分で書いたもの
追加コード
HTML
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>iSara</title> | |
<link rel="stylesheet" type="text/css" href="file:///Users/ryoheiono/Desktop/stylesheet.css[iSara]" /> | |
</head> | |
<body> | |
<header> | |
<div class="header-container"> | |
<div class="header-title"> | |
<h2>iSara</h2> | |
</div> | |
<div class="header-text"> | |
<p>バンコクのノマドエンジニア育成講座</p> | |
</div> | |
</div> | |
<a href="" class="ask">お問い合わせ/資料請求はこちら</a> | |
</header> | |
<div class="top-wrapper"> | |
<div class="top-text1"> | |
<h2>プログラミングで</h2> | |
<h2>人生の安定を手に入れよう</h2> | |
</div> | |
<div class="top-text3"> | |
<h1>iSara</h1> | |
</div> | |
<div class="top-text2"> | |
<h3>バンコクのノマドエンジニア育成講座</h3> | |
<h3>iSara[イサラ]</h3> | |
</div> | |
</div> | |
<div class="ask-wrapper"> | |
<div class="ask-container"> | |
<div class="ask-container-top"> | |
<h3 class="ask-top-text">まずは20日間で、</h3> | |
<h3 class="ask-top-text">月10万稼げるスキルを手に入れよう。</h3> | |
<h3 class="※">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</h3> | |
</div> | |
<span class="big-ask">お問い合わせ/資料請求はこちら</span> | |
<div class="ask-container-bottom"> | |
<h3>第一期生:2017年11月6日〜2017年11月25日 ※募集を締め切りました</h3> | |
<h3>第二期生:2018年1月13日〜2018年2月1日 ※募集を締め切りました</h3> | |
<h3>第三期生:募集を締め切りました</h3> | |
<h3>第四期生:資料請求受付中です(※日程は未定です)</h3> | |
</div> | |
</div> | |
</div> | |
<div class="enginer-wrapper"> | |
<div class="enginer-title"> | |
<h1><span class="kakko">「</span> エンジニアとして本当の自由を手に入れるためには? <span class="kakko">」</span></h1> | |
</div> | |
<div class="enginer-text1"> | |
<p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</p> | |
<p>しかしそこでの学習の先は、提携して決められた就職先に就職すること。</p> | |
</div> | |
<div class="enginer-text2"> | |
<p>これで本当にいいのですか?</p> | |
<p>日本人エンジニアはアメリカと比べて格段に給料が低い。</p> | |
<p>その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。</p> | |
</div> | |
<div class="enginer-text3"> | |
<p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p> | |
<p>そこで必要なのが<span class="enginer-underline">「稼ぐ力 </span>です。</p> | |
</div> | |
<div class="about"> | |
<p>about</p> | |
</div> | |
</div> | |
<div class="about-isara"> | |
<div class="about-isara-text"> | |
<h3>ノマドエンジニア育成講座iSaraとは</h3> | |
<p>「稼ぐこと」にフォーカスしたエンジニア育成講座です。</p> | |
</div> | |
<div class="make-money-enginer"> | |
<p>稼げるエンジニアに必要な5つのスキルとは?</p> | |
<div class="make-money-enginer-items"> | |
<div class="make-money-enginer-item"> | |
<img > | |
<p>基礎的な<br>プログラミングスキル</p> | |
</div> | |
<div class="make-money-enginer-item"> | |
<img src=""> | |
<p>案件獲得に必要な<br>営業力</p> | |
</div> | |
<div class="make-money-enginer-item"> | |
<img src=""> | |
<p>見積もり作成から<br>納品までの知識</p> | |
</div> | |
<div class="make-money-enginer-item"> | |
<img src=""> | |
<p>自分の付加価値を<br>高めるスキル</p> | |
</div> | |
<div class="make-money-enginer-item"> | |
<img src=""> | |
<p>フリーランス同士の<br>横の繋がり</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="step-wrapper"> | |
<h2>iSaraで「基本的なプログラミングスキル」は教えません</h2> | |
<h4>基礎的なプログラミングスキルは無料で学べる時代。</h4> | |
<h4>iSaraでは、基礎知識学習は<span>事前課題</span>と<span>チャットサポート</span>のみ。</h4> | |
<div class="step-items"> | |
<div class="step-item"> | |
<h5>STEP.1</h5> | |
<p>【バンコク渡航前1ヶ月】</p> | |
<p>事前学習で基礎知識を学ぶ</p> | |
</div> | |
<div class="step-item"> | |
<h5>STEP.2</h5> | |
<p>【バンコク到着後】</p> | |
<p>実践的に稼ぐことに特化した学習</p> | |
</div> | |
<div class="step-item"> | |
<h5>STEP.3</h5> | |
<p>【バンコク帰国後】</p> | |
<p>講座実施後の案件獲得サポート</p> | |
<h6>※講座費用218,000円以上の金額が稼げるまで<br>「永久サポート延長」します</h6> | |
</div> | |
</div> | |
</div> | |
<div class="except"> | |
<div class="except-text"> | |
<p>スキルアップしてもフリーランスエンジニアとして食べていくことは難しい。フリーランスには<span>プログラミングスキル以外</span>が大切。</p> | |
</div> | |
</div> | |
<div class="learning"> | |
<h1>iSara<span>[イサラ]</span>で学べること。</h1> | |
<p class="learning-text1">iSaraの学習では、エンジニアとして「稼ぐ」ために必要な能力を身につけます。</p> | |
<div class="learning-icons"> | |
<div class="learning-icon"> | |
<img src="" alt=""> | |
</div> | |
<div class="learning-icon"> | |
<img src="" alt=""> | |
</div> | |
<div class="learning-icon"> | |
<img src="" alt=""> | |
</div> | |
<div class="learning-icon"> | |
<img src="" alt=""> | |
</div> | |
</div> | |
<p class="learning-text2">これらを教えるのがiSaraです。</p> | |
</div> | |
<div class="different-wrapper"> | |
<h1 class="dk-l">「</h1><p>「他のプログラミングスクールとここが違う!</p> | |
<p>iSaraの3つのメリット</p><h1 class="dk-r">」</h1> | |
</div> | |
<div class="different-points"> | |
<div class="different-point"> | |
<img src="" alt=""> | |
<h3>現役のフリーランスから学べる</h3> | |
<p>他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます。</p> | |
</div> | |
<div class="different-point"> | |
<img src="" alt=""> | |
<h3>実践を通じて学べる</h3> | |
<p>フリーランスにとって最短の学習方法は「実践」。iSaraでは実案件を通して学びます。現役フリーランサーの案件サポートに加え、クラウドソーシングを活用。初心者の自分じゃ無理と思うかもですが、現役フリーランスがサポートしますので大丈夫。</p> | |
</div> | |
<div class="different-point"> | |
<img src="" alt=""> | |
<h3>授業料が実質0円</h3> | |
<p>講座費用218,000円以上の金額が稼げるまで「永久サポート延長」があります。</p> | |
</div> | |
<div class="support"> | |
<h2>さらに!帰国後もサポート付き</h2> | |
<h3>リモートワーカーのチームを作ることで受注率、受注単価が大幅に向上します。</h3> | |
<p>iSaraは講座が終わって終了ではありません。<br>参加メンバーのチャットグループを作り、帰国後も継続的に案件参加できるようになります。<br>また、チームで働くことで継続的に稼ぎやすい仕組みづくりも構築しております。</p> | |
</div> | |
<div class="require"> | |
<p>事前課題ができない人はお断りしております。iSaraでは、無料で学べるプログラミング基礎知識は教えません。事前課題一覧はメールで送りつつ、 | |
チャットサポートのみ。従って、本気で取り組まないと結果は出ません。</p> | |
</div> | |
</div> | |
</body> | |
</html> | |
.top-wrapper{
background-image: url("http://livedoor.blogimg.jp/stubbins/imgs/1/7/17393770.jpg");
background-size: cover;
text-align: center;
height:550px;
padding-bottom:70px;
}
.top-text1{
padding-top:190px;
}
.top-text2 h2{
padding-left:10px;
}
.top-text3 h1{
font-size:50px;
}
header{
background-color: white;
height:70px;
z-index:10;
width:100%;
position: fixed;
top:0;
}
.header-title{
float:left;
padding-left:20px;
}
.header-text{
float:left;
font-weight:bold;
padding:10px 40px;
}
.header-text p{
font-size:15px;
}
.ask{
display:inline-block;
background-color: #FF6666;
padding:10px 20px;
float:right;
margin-top:10px;
margin-right:40px;
color:white;
border-radius:30px;
font-size:12px;
letter-spacing: 5px;
opacity:0.8;
}
.ask:hover{
opacity:1;
cursor:pointer;
}
.ask-wrapper{
background-color: #FFA500;
height:580px;
margin-top:0;
color:white;
text-align:center;
}
.ask-container-top{
padding-top:20px;
}
.ask-top-text{
letter-spacing:4px;
}
.※ {
font-size:17px;
color:red;
background-color:white;
padding:1px;
display:inline-block;
border-radius:4px;
margin-top:0;
margin-bottom:70px;
}
.big-ask{
font-size:27px;
background-color:rgba(255,102,102,0.8);
padding:30px 220px;
border-radius:50px;
cursor:pointer;
}
.big-ask:hover{
background-color:rgba(255,102,102,1);
}
.ask-container-bottom{
margin-top:70px;
}
.enginer-wrapper{
background-image:url("http://img.kb-cdn.com/imgviewer/NVpIM2ptOHhYRzVmUk5rM1NrNlFxYVV6enV4aGk2UFRJMmxPckdDUUVNYmFwSnNsZzlFU2RvNXlQWXhsS1I2dS9OeUpGMnNBd1BTYWNyR3k3SGg4dmY1OHo1V2YyVWpqd01RNXJlZEFMbFU4bzE2bGQ4MWFyUUt2aWRScVpWMUw5K0dJZGdZcHdxQWNrYnVad1QyVW9qT0JwaFBTbGZSOVFsSlNkZEFSSGlQNmdQRnZwWWZTRWhnWSt2M2ZzdkpiTFlSMmVZMmF5RXh6REtoWDdnU3piYmRxendVMWtYOEQxZFF2Qmo0WWVCYz0=?square=0");
background-size: cover;
height: 620px;
padding-top:10px;
text-align:center;
}
.kakko{
font-size:100px;
font-weight:normal;
color:#FFD700;
}
.enginer-text{
padding-bottom:10px;
font-size:30px;
}
.enginer-underline{
background:linear-gradient(transparent 10%,#FFD700);
font-size:px;
}
.about{
border-radius:100px;
background-color:#FFA500;
display:inline-block;
padding:12px 18px;
color:white;
margin-top:90px;
}
.about-isara{
height:550px;
background-color: #FAEBD7;
text-align: center;
padding-top:10px;
}
.about-isara-text{
font-size:25px;
padding-top: 45px;
}
.about-isara-text p{
font-size:20px;
font-weight:bold;
padding-top: 35px;
}
.make-money-enginer{
border: 3px solid #FFD700;
margin-left:120px;
margin-right:120px;
background-color: white;
padding-bottom: 150px;
}
.make-money-enginer-items{
margin:0 auto;
width:70%;
margin-top: 10px;
}
.make-money-enginer p{
font-weight: bold;
font-size:20px;
padding-top: 20px;
}
.make-money-enginer-item{
float: left;
width: 20%;
}
.make-money-enginer-item p{
font-size:13px;
float:left;
font-weight: normal;
}
.step-wrapper{
height: 500px;
text-align: center;
padding-top:40px;
background-image: url("http://higoan.jp/gift/wp-content/uploads/2018/03/4ac11b8aad4d9f6758672a5fcc451de8.jpeg");
background-size: cover;
color: white;
}
.step-wrapper h4{
font-size:20px;
}
.step-wrapper span{
color:#FFD700;
}
.step-items{
text-align: center;
width:80%;
margin:auto;
}
.step-item{
float:left;
border: 3px solid white;
padding:14px 25px;
margin-right: 60px;
background-color: white;
border-radius:7px;
}
.step-item h5{
font-size:15px;
display:inline-block;
background-color: #FFD700;
padding:3px 60px;
}
.step-item p{
color:black;
font-weight:bold;
}
.step-item h6{
color:#DC143C;
background-color: #FFD5EC;
display:inline;
font-size:10px;
border-radius:7px;
}
.except{
background-color: #4169e1;
padding-top:10px;
height:120px;
text-align: center;
}
.except p{
color:#EEEEEE;
font-size:21px;
font-weight:bold;
}
.except span{
color:#FFD700;
}
.except-text{
width:750px;
padding-left:300px;
}
.learning{
text-align: center;
height: 450px;
padding-top:20px;
}
.learning-text1{
font-size: 20px;
}
.learning-icons{
margin-left: 120px;
}
.learning-icon{
background-color: #FFA500;
border-radius: 100px;
padding:100px;
float:left;
margin-right:80px;
}
.learning-text2{
display:block;
padding-top: 20px;
float:left;
padding-left: 520px;
font-weight: bold;
}
.
ぷろぐらみんぐ勉強日記 22日目
今日の勉強時間:2時間半
ただいまの総勉強時間:105時間半
一昨日、昨日とサボり。
phpよりホームページ作成の方が楽しいので、進める。
見本
自分で書いたもの
追加したコード
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iSara</title>
<link rel="stylesheet" type="text/css" href="file:///Users/ryoheiono/Desktop/stylesheet.css[iSara]" />
</head>
<body>
<header>
<div class="header-container">
<div class="header-title">
<h2>iSara</h2>
</div>
<div class="header-text">
<p>バンコクのノマドエンジニア育成講座</p>
</div>
</div>
<a href="" class="ask">お問い合わせ/資料請求はこちら</a>
</header>
<div class="top-wrapper">
<div class="top-text1">
<h2>プログラミングで</h2>
<h2>人生の安定を手に入れよう</h2>
</div>
<div class="top-text3">
<h1>iSara</h1>
</div>
<div class="top-text2">
<h3>バンコクのノマドエンジニア育成講座</h3>
<h3>iSara[イサラ]</h3>
</div>
</div>
<div class="ask-wrapper">
<div class="ask-container">
<div class="ask-container-top">
<h3 class="ask-top-text">まずは20日間で、</h3>
<h3 class="ask-top-text">月10万稼げるスキルを手に入れよう。</h3>
<h3 class="※">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</h3>
</div>
<span class="big-ask">お問い合わせ/資料請求はこちら</span>
<div class="ask-container-bottom">
<h3>第一期生:2017年11月6日〜2017年11月25日 ※募集を締め切りました</h3>
<h3>第二期生:2018年1月13日〜2018年2月1日 ※募集を締め切りました</h3>
<h3>第三期生:募集を締め切りました</h3>
<h3>第四期生:資料請求受付中です(※日程は未定です)</h3>
</div>
</div>
</div>
<div class="enginer-wrapper">
<div class="enginer-title">
<h1><span class="kakko">「</span> エンジニアとして本当の自由を手に入れるためには? <span class="kakko">」</span></h1>
</div>
<div class="enginer-text1">
<p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</p>
<p>しかしそこでの学習の先は、提携して決められた就職先に就職すること。</p>
</div>
<div class="enginer-text2">
<p>これで本当にいいのですか?</p>
<p>日本人エンジニアはアメリカと比べて格段に給料が低い。</p>
<p>その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。</p>
</div>
<div class="enginer-text3">
<p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p>
<p>そこで必要なのが<span class="enginer-underline">「稼ぐ力 </span>です。</p>
</div>
<div class="about">
<p>about</p>
</div>
</div>
<div class="about-isara">
<div class="about-isara-text">
<h3>ノマドエンジニア育成講座iSaraとは</h3>
<p>「稼ぐこと」にフォーカスしたエンジニア育成講座です。</p>
</div>
<div class="make-money-enginer">
<p>稼げるエンジニアに必要な5つのスキルとは?</p>
<div class="make-money-enginer-items">
<div class="make-money-enginer-item">
<img >
<p>基礎的な<br>プログラミングスキル</p>
</div>
<div class="make-money-enginer-item">
<img src="">
<p>案件獲得に必要な<br>営業力</p>
</div>
<div class="make-money-enginer-item">
<img src="">
<p>見積もり作成から<br>納品までの知識</p>
</div>
<div class="make-money-enginer-item">
<img src="">
<p>自分の付加価値を<br>高めるスキル</p>
</div>
<div class="make-money-enginer-item">
<img src="">
<p>フリーランス同士の<br>横の繋がり</p>
</div>
</div>
</div>
</div>
<div class="step-wrapper">
<h2>iSaraで「基本的なプログラミングスキル」は教えません</h2>
<h4>基礎的なプログラミングスキルは無料で学べる時代。</h4>
<h4>iSaraでは、基礎知識学習は<span>事前課題</span>と<span>チャットサポート</span>のみ。</h4>
<div class="step-items">
<div class="step-item">
<h5>STEP.1</h5>
<p>【バンコク渡航前1ヶ月】</p>
<p>事前学習で基礎知識を学ぶ</p>
</div>
<div class="step-item">
<h5>STEP.2</h5>
<p>【バンコク到着後】</p>
<p>実践的に稼ぐことに特化した学習</p>
</div>
<div class="step-item">
<h5>STEP.3</h5>
<p>【バンコク帰国後】</p>
<p>講座実施後の案件獲得サポート</p>
<h6>※講座費用218,000円以上の金額が稼げるまで<br>「永久サポート延長」します</h6>
</div>
</div>
</div>
</body>
</html>
.top-wrapper{
background-image: url("http://livedoor.blogimg.jp/stubbins/imgs/1/7/17393770.jpg");
background-size: cover;
text-align: center;
height:550px;
padding-bottom:70px;
}
.top-text1{
padding-top:190px;
}
.top-text2 h2{
padding-left:10px;
}
.top-text3 h1{
font-size:50px;
}
header{
background-color: white;
height:70px;
z-index:10;
width:100%;
position: fixed;
top:0;
}
.header-title{
float:left;
padding-left:20px;
}
.header-text{
float:left;
font-weight:bold;
padding:10px 40px;
}
.header-text p{
font-size:15px;
}
.ask{
display:inline-block;
background-color: #FF6666;
padding:10px 20px;
float:right;
margin-top:10px;
margin-right:40px;
color:white;
border-radius:30px;
font-size:12px;
letter-spacing: 5px;
opacity:0.8;
}
.ask:hover{
opacity:1;
cursor:pointer;
}
.ask-wrapper{
background-color: #FFA500;
height:580px;
margin-top:0;
color:white;
text-align:center;
}
.ask-container-top{
padding-top:20px;
}
.ask-top-text{
letter-spacing:4px;
}
.※ {
font-size:17px;
color:red;
background-color:white;
padding:1px;
display:inline-block;
border-radius:4px;
margin-top:0;
margin-bottom:70px;
}
.big-ask{
font-size:27px;
background-color:rgba(255,102,102,0.8);
padding:30px 220px;
border-radius:50px;
cursor:pointer;
}
.big-ask:hover{
background-color:rgba(255,102,102,1);
}
.ask-container-bottom{
margin-top:70px;
}
.enginer-wrapper{
background-image:url("http://img.kb-cdn.com/imgviewer/NVpIM2ptOHhYRzVmUk5rM1NrNlFxYVV6enV4aGk2UFRJMmxPckdDUUVNYmFwSnNsZzlFU2RvNXlQWXhsS1I2dS9OeUpGMnNBd1BTYWNyR3k3SGg4dmY1OHo1V2YyVWpqd01RNXJlZEFMbFU4bzE2bGQ4MWFyUUt2aWRScVpWMUw5K0dJZGdZcHdxQWNrYnVad1QyVW9qT0JwaFBTbGZSOVFsSlNkZEFSSGlQNmdQRnZwWWZTRWhnWSt2M2ZzdkpiTFlSMmVZMmF5RXh6REtoWDdnU3piYmRxendVMWtYOEQxZFF2Qmo0WWVCYz0=?square=0");
background-size: cover;
height: 620px;
padding-top:10px;
text-align:center;
}
.kakko{
font-size:100px;
font-weight:normal;
color:#FFD700;
}
.enginer-text{
padding-bottom:10px;
font-size:30px;
}
.enginer-underline{
background:linear-gradient(transparent 10%,#FFD700);
font-size:px;
}
.about{
border-radius:100px;
background-color:#FFA500;
display:inline-block;
padding:12px 18px;
color:white;
margin-top:90px;
}
.about-isara{
height:550px;
background-color: #FAEBD7;
text-align: center;
padding-top:10px;
}
.about-isara-text{
font-size:25px;
padding-top: 45px;
}
.about-isara-text p{
font-size:20px;
font-weight:bold;
padding-top: 35px;
}
.make-money-enginer{
border: 3px solid #FFD700;
margin-left:120px;
margin-right:120px;
background-color: white;
padding-bottom: 150px;
}
.make-money-enginer-items{
margin:0 auto;
width:70%;
margin-top: 10px;
}
.make-money-enginer p{
font-weight: bold;
font-size:20px;
padding-top: 20px;
}
.make-money-enginer-item{
float: left;
width: 20%;
}
.make-money-enginer-item p{
font-size:13px;
float:left;
font-weight: normal;
}
.step-wrapper{
height: 500px;
text-align: center;
padding-top:40px;
background-image: url("http://higoan.jp/gift/wp-content/uploads/2018/03/4ac11b8aad4d9f6758672a5fcc451de8.jpeg");
background-size: cover;
color: white;
}
.step-wrapper h4{
font-size:20px;
}
.step-wrapper span{
color:#FFD700;
}
.step-items{
text-align: center;
width:80%;
margin:auto;
}
.step-item{
float:left;
border: 3px solid white;
padding:14px 25px;
margin-right: 60px;
background-color: white;
border-radius:7px;
}
.step-item h5{
font-size:15px;
display:inline-block;
background-color: #FFD700;
padding:3px 60px;
}
.step-item p{
color:black;
font-weight:bold;
}
.step-item h6{
color:#DC143C;
background-color: #FFD5EC;
display:inline;
font-size:10px;
border-radius:7px;
}
プログラミング勉強日記 21日目
今日の学習時間:3時間半
ただいまの総学習時間:103時間
ホームページの作成練習
見本
自分で作っているやつ
画像編集は技術がないので、それを省いて作ったもの
似ているようで、似ていない。
なんともぎこちないホームページなので、こっから頑張って見本に近づける。
今日書いたコード
HTML
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>iSara</title> | |
<link rel="stylesheet" type="text/css" href="file:///Users/ryoheiono/Desktop/stylesheet.css[iSara]" /> | |
</head> | |
<body> | |
<header> | |
<div class="header-container"> | |
<div class="header-title"> | |
<h2>iSara</h2> | |
</div> | |
<div class="header-text"> | |
<p>バンコクのノマドエンジニア育成講座</p> | |
</div> | |
</div> | |
<a href="" class="ask">お問い合わせ/資料請求はこちら</a> | |
</header> | |
<div class="top-wrapper"> | |
<div class="top-text1"> | |
<h2>プログラミングで</h2> | |
<h2>人生の安定を手に入れよう</h2> | |
</div> | |
<div class="top-text3"> | |
<h1>iSara</h1> | |
</div> | |
<div class="top-text2"> | |
<h3>バンコクのノマドエンジニア育成講座</h3> | |
<h3>iSara[イサラ]</h3> | |
</div> | |
</div> | |
<div class="ask-wrapper"> | |
<div class="ask-container"> | |
<div class="ask-container-top"> | |
<h3 class="ask-top-text">まずは20日間で、</h3> | |
<h3 class="ask-top-text">月10万稼げるスキルを手に入れよう。</h3> | |
<h3 class="※">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</h3> | |
</div> | |
<span class="big-ask">お問い合わせ/資料請求はこちら</span> | |
<div class="ask-container-bottom"> | |
<h3>第一期生:2017年11月6日〜2017年11月25日 ※募集を締め切りました</h3> | |
<h3>第二期生:2018年1月13日〜2018年2月1日 ※募集を締め切りました</h3> | |
<h3>第三期生:募集を締め切りました</h3> | |
<h3>第四期生:資料請求受付中です(※日程は未定です)</h3> | |
</div> | |
</div> | |
</div> | |
<div class="enginer-wrapper"> | |
<div class="enginer-title"> | |
<h1><span class="kakko">「</span> エンジニアとして本当の自由を手に入れるためには? <span class="kakko">」</span></h1> | |
</div> | |
<div class="enginer-text1"> | |
<p>エンジニア需要の高まりに伴い、プログラミングスクールが増えています。</p> | |
<p>しかしそこでの学習の先は、提携して決められた就職先に就職すること。</p> | |
</div> | |
<div class="enginer-text2"> | |
<p>これで本当にいいのですか?</p> | |
<p>日本人エンジニアはアメリカと比べて格段に給料が低い。</p> | |
<p>その理由がここにあり、エンジニアは自分の給料をコントロールすべきなのです。</p> | |
</div> | |
<div class="enginer-text3"> | |
<p>スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。</p> | |
<p>そこで必要なのが<span class="enginer-underline">「稼ぐ力 </span>です。</p> | |
</div> | |
<div class="about"> | |
<p>about</p> | |
</div> | |
</div> | |
<div class="about-isara"> | |
<p><span>「</span>ノマドエンジニア育成講座<br>iSara[イサラ]とは<span>」</span></p> | |
</div> | |
</body> | |
</html> | |
CSS
.top-wrapper{
background-image: url("http://livedoor.blogimg.jp/stubbins/imgs/1/7/17393770.jpg");
background-size: cover;
text-align: center;
height:550px;
padding-bottom:70px;
}
.top-text1{
padding-top:190px;
}
.top-text2 h2{
padding-left:10px;
}
.top-text3 h1{
font-size:50px;
}
header{
background-color: white;
height:70px;
z-index:10;
width:100%;
position: fixed;
top:0;
}
.header-title{
float:left;
padding-left:20px;
}
.header-text{
float:left;
font-weight:bold;
padding:10px 40px;
}
.header-text p{
font-size:15px;
}
.ask{
display:inline-block;
background-color: #FF6666;
padding:10px 20px;
float:right;
margin-top:10px;
margin-right:40px;
color:white;
border-radius:30px;
font-size:12px;
letter-spacing: 5px;
opacity:0.8;
}
.ask:hover{
opacity:1;
cursor:pointer;
}
.ask-wrapper{
background-color: #FFA500;
height:580px;
margin-top:0;
color:white;
text-align:center;
}
.ask-container-top{
padding-top:20px;
}
.ask-top-text{
letter-spacing:4px;
}
.※ {
font-size:17px;
color:red;
background-color:white;
padding:1px;
display:inline-block;
border-radius:4px;
margin-top:0;
margin-bottom:70px;
}
.big-ask{
font-size:27px;
background-color:rgba(255,102,102,0.8);
padding:30px 220px;
border-radius:50px;
cursor:pointer;
}
.big-ask:hover{
background-color:rgba(255,102,102,1);
}
.ask-container-bottom{
margin-top:70px;
}
.enginer-wrapper{
background-image:url("http://img.kb-cdn.com/imgviewer/NVpIM2ptOHhYRzVmUk5rM1NrNlFxYVV6enV4aGk2UFRJMmxPckdDUUVNYmFwSnNsZzlFU2RvNXlQWXhsS1I2dS9OeUpGMnNBd1BTYWNyR3k3SGg4dmY1OHo1V2YyVWpqd01RNXJlZEFMbFU4bzE2bGQ4MWFyUUt2aWRScVpWMUw5K0dJZGdZcHdxQWNrYnVad1QyVW9qT0JwaFBTbGZSOVFsSlNkZEFSSGlQNmdQRnZwWWZTRWhnWSt2M2ZzdkpiTFlSMmVZMmF5RXh6REtoWDdnU3piYmRxendVMWtYOEQxZFF2Qmo0WWVCYz0=?square=0");
background-size: cover;
height: 620px;
padding-top:10px;
text-align:center;
}
.kakko{
font-size:100px;
font-weight:normal;
color:#FFD700;
}
.enginer-text{
padding-bottom:10px;
font-size:30px;
}
.enginer-underline{
background:linear-gradient(transparent 50%,#FFD700);
font-size:px;
}
.about{
border-radius:100px;
background-color:#FFA500;
display:inline-block;
padding:12px 18px;
color:white;
margin-top:90px;
}