### ボタンに影をつけたい、書いたことが反映されない
プロゲートを一通り終わり1から模写コーディングしています。
そこで、
①メッセージラッパーの(さっそく開発する)というところに影をつけたいと思いやってみたのですが反映することができません
②hoverでボタンの色も変えようとしていますが変えることもできません
やってみたこと
プロゲートでもう一度見直した
htmlのclassが間違っていないか確認をした
よろしくお願いします
また、プロゲートを終えたら次に何をするべきか教えて欲しいです やっぱり模写コーディングですか??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>progate</title> <link rel="stylesheet" href="progate-css.css"> </head> <body> <header> </header> <div class="top-wrapper"> <div class="container"> <h1>LEARN TO CODE</h1> <h1>LEARN TO BE CREATIVE</h1> <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> </div> <a href="#" class="btn sign-up">新規登録はこちら</a> <p>or</p> <a href="#" class="btn twitter">twitterでログイン</a> <a href="#" class="btn facebook">facebookでログイン</a> </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> <p class="txt-contents">Webページの作成に使用される言語です。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> <p class="txt-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> <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p>PHP</p> </div> <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </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> <a class="btn message" href="#">さっそく開発する</a> </div> </div> <footer> </footer> </body> </html>
html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } body { font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; } li { list-style: none; } a { text-decoration: none; } .top-wrapper { background-image: url("https://prog-8.com/images/html/advanced/top.png"); padding:180px 0px 100px; color:white; text-align: center; background-size:cover; } .container{ width:1170px; margin:auto; padding-bottom:30px; font-size:30px; font-weight:bold; letter-spacing:5px; } .btn { display:inline-block; color:white; border-radius:20px; padding:8px 24px; } .twitter { background-color:#55acee; margin-left:10px; } .facebook{ background-color:#3b5998; } .sign-up{ background-color: #239b76; } .lesson-wrapper { height: 500px; padding-bottom: 80px; background-color: #f7f7f7; text-align: center; } .lesson { float:left; width:25%; } .lesson-icon { position: relative; } .lesson p { position: absolute; top: 90px; width: 100%; color: white; } .txt-contents { width: 80%; display: inline-block; margin-top: 20px; font-size: 12px; color: #b3aeb5; } .clear{ clear:left; } .message-wrapper { background-color:rgba(255, 255, 255, 0.966); text-align:center; border-bottom:1px solid #eee; padding-bottom:150px; } .heading { padding-top: 60px; padding-bottom: 30px; color: #5f5d60; font-size:20px; } .message { background-color: rgb(21, 110, 33); box-shadow: 1px solid #eee; } .container a :hover { background-color: cadetblue; }
回答3件
あなたの回答
tips
プレビュー