Prgate道場コース中級編にて 微妙にレイアウトが答えと異なってしまいます
何がおかしいのかわかりません facebookボタンのpaddingを調整したりしましたが、上手くいきませんでした
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <!-- ここでFont Awesomeを読み込んでください --> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 9</head> 10<body> 11 <!-- ここにコードを書いていきましょう --> 12 <div class="top-wrapper"> 13 14 <div class="top"> 15 <h1>LEARN TO CODE.</h1> 16 <h1>LEARN TO BE CREATIVE.</h1> 17 <p>Progateはオンラインプログラミング学習サービスです。</p> 18 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 19 </div> 20 21 <a href="#" class="signup btn">新規登録はこちら</a> 22 <p class="top-p ">or</p> 23 <a href="#" class="facebook btn"><span class="fa fa-facebook"></span>Facebookで登録</a> <a href="#" class="twitter btn"><span class="fa fa-twitter"></span>Twitterで登録</a> 24 25 </div> 26 27 28</body> 29</html>
CSS
1/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, div { 5 margin: 0; 6 padding: 0; 7} 8 9body { 10 font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; 11} 12 13li { 14 list-style: none; 15} 16 17a { 18 text-decoration: none; 19} 20 21 22/* ここからCSSを書いていきましょう */ 23.top-wrapper{text-align:center; padding-top:180px; padding-bottom:100px; 24background-image:url(https://prog-8.com/images/html/advanced/top.png); 25background-size:cover; 26} 27.top-wrapper h1{font-size:45px; letter-spacing:5px; color:white; 28opacity:0.7; 29} 30.top-wrapper p{color:white; opacity:0.7; } .top{margin-bottom:30px;} 31.top-p{margin-top:15px; margin-bottom:15px;} 32.signup{background-color:#239b76; color:white; opacity:0.8;} 33.facebook{background-color:#3b5998; color:white; opacity:0.8; margin-right:10px;} 34.twitter{background-color:#55acee; color:white; opacity:0.8;} 35.btn{padding:8px 24px; border-radius:4px;} 36.btn:hover{opacity:1;} .top-wrapper span{margin-right:5px;} 37 38 39
回答1件
あなたの回答
tips
プレビュー