お世話になります。
iSaraというプログラミングスクールのサイトの模写をしている初心者コーダーです。
画面キャプチャの通り、黄色い背景(class名:second-section)とその下の文字(class名:third-section)が重なっていて、下の文字が読めなくなっている状態です。
どのようにすればsecond-sectionとthird-sectionが重ならなくなりますか?
HTML
1<div class="second-section"> 2 <p class="one">まずは20日間で、<br>月10万円稼げるスキルを手にいれよう。</p> 3 <p class="two">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</p> 4 <a href="" class="three">お問い合わせ&資料請求はこちら</a> 5 <p class="four">第4期生:2018年12月3日 ~ 2018年12月22日 *締め切りました</p> 6 <p class="five">第5期生:2019年4月8日 ~ 2019年4月27日 *締め切りました</p> 7 <p class="six">第6期生:資料請求受付中です</p> 8 <div class="SNS_button"> 9 <div class="twitter-button"> 10 <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false"> 11 Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 12 </div> 13 <div class="facebook-button"> 14 <div id="fb-root"></div> 15 <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script> 16 <div class="fb-like" data-href="https://isara.life/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> 17 </div> 18 </div> 19 </div> 20 21 <div class="third-section"> 22 <p class="title">エンジニアとして本当の自由を手に入れるためには?</p> 23 <p class="one">エンジニア需要の高まりに伴い、プログラミングスクールが増えています。<br> 24 しかしそこでの学習の先は、 提携して決められた就職先に就職すること。</p> 25 <p class="2">これで本当にいいのですか?<br> 26 日本人エンジニアはアメリカと較べて給料が格段に低い。<br> 27 その理由がここにあり、 エンジニアは自分の給料をコントロールすべきなのです。</p> 28 <p class="3">スキルを身につけたエンジニアは、人生をコントロールすることでより自由に。<br> 29 そこで必要なのが 「稼ぐ力」です。</p> 30 </div>
CSS
1.second-section { 2 position: relative; 3 text-align: center; 4 top: 200px; 5 background-color: #EBB94D; 6 padding: 35px; 7} 8 9.second-section .one, 10.second-section .four, 11.second-section .five, 12.second-section .six { 13 color: white; 14} 15 16.second-section p { 17 margin: 0 auto; 18 font-size: 20px; 19 font-weight: bold; 20 text-align: center; 21} 22 23.second-section .three { 24 display: inline-block; 25 font-size: 30px; 26 font-weight: bold; 27 text-decoration: none; 28 margin: 50px auto; 29 background-color: #D84940; 30 padding: 35px 290px; 31 border-radius: 55px; 32 color: white; 33} 34 35.second-section .two { 36 background-color: white; 37 color: #D84940; 38 width: 41%; 39 border-radius: 6px; 40 margin-top: 20px; 41} 42 43.second-section .one { 44 line-height: 35px; 45} 46 47.second-section .four, 48.second-section .five, 49.second-section .six { 50 letter-spacing: 3px; 51 font-size: 20px; 52 line-height: 60px; 53} 54 55.second-section .twitter-button, 56.second-section .twitter-button { 57 float: left; 58 margin-right: 5px; 59} 60 61.third-section { 62 height: 590px; 63} 64 65.third-section .title { 66 font-size: 20px; 67}
画面キャプチャが正しく投稿できていません。
質問を編集してキャプチャ画像を表示するようにしてください。
画面キャプチャを修正しました。
回答2件
あなたの回答
tips
プレビュー