プログラミング勉強日記 21日目
今日の学習時間：３時間半
ただいまの総学習時間：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>第一期生：２０１７年１１月６日〜２０１７年１１月２５日 ※募集を締め切りました</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"> | |
| <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;
}
