テキストの位置を直したいです
<p class="txt-contents">の位置がおかしくなってしまいます。 自分ではもう一度 classなどを見直しました ```ここに言語を入力 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>progate</title> <link rel="stylesheet" href="progate-css.css"> </head></html> ``` ```ここに言語を入力 html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; }<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> </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>
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;
}
.heading {
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
}
.txt-contents {
width: 80%;
display: inline-block;
margin-top: 20px;
font-size: 12px;
color: #b3aeb5;
}
.message-wrapper {
border-bottom: 1px solid #eee;
padding-bottom: 80px;
text-align: center;
}
.message {
padding: 15px 40px;
background-color: #5dca88;
/* box-shadowをつけてください */
box-shadow: 0 7px #1a7940;
}
![イメージ説明](406a95d1d5702a588f3b368548157c23.jpeg) ![![イメージ説明](24f3af0bfe4948c3344deed4d63302c1.jpeg)](f6a782fb709e6ed6c90611be48e5d8bb.jpeg)
回答2件
あなたの回答
tips
プレビュー