ぷろぐらみんぐ勉強日記 22日目
今日の勉強時間：２時間半
ただいまの総勉強時間：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>第一期生：２０１７年１１月６日〜２０１７年１１月２５日 ※募集を締め切りました</h3>
<h3>第二期生：２０１８年１月１３日〜２０１８年２月１日 ※募集を締め切りました</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;
}
