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 {
padding:180px 0 100px 0;
text-align:center;
color:white;
background-image:url(https://prog-8.com/images/html/advanced/top.png);
background-size:cover;
}
.container {
width:1170px;
margin:0 auto;
}
.container h1{
font-size:45px;
letter-spacing:5px;
}
.container p{
opacity:0.7;
}
.top-wrapper h1 {
opacity:0.7;
font-size:45px;
letter-spacing:5px;
}
.top-wrapper p {
opacity:0.7;
margin-bottom:15px;
}
.signup {
background-color:#239b76;
margin-top:15px;
margin-bottom:15px;
}
.facebook {
background-color:#3b5998;
margin-right:5px;
}
.twitter {
background-color:#55acee;
margin-left:5px;
}
.btn {
padding:8px 24px;
color:white;
display:inline-block;
opacity:0.8;
border-radius:4px;
}
.btn:hover {
opacity:1;
}
header {
background-color:rgba(34, 49, 52, 0.9);
height:65px;
width:100%;
position:fixed;
top:0;
z-index:10;
}
.logo {
margin-top:20px;
margin-bottom:20px;
width:124px;
}
.header-left{
float:left;
}
.header-right {
float:right;
background-color:rgba(255, 255, 255, 0.3);
transition:all 0.5s;
}
.header-right:hover{
background-color:rgba(255, 255, 255, 0.5);
}
.header-right a{
line-height:65px;
padding:0 25px;
color:white;
display:block;
}
/* let`s write here */
.lesson-wrapper {
height:580px;
background-color:#f7f7f7;
text-align:center;
}
.lesson {
width:25%;
float:left;
}
.heading {
color:#5f5d60;
padding-top:80px;
padding-bottom:50px;
}
.heading h2{
font-weight:normal;
}
.lesson-icon {
position:relative;
}
.lesson-icon p {
position:absolute;
top:90px;
width:100%;
color:white;
}
.text-contents {
width:80%;
display:inline-block;
margin-top:15px;
color:#b3aeb5;
font-size:13px;
}
あなたの回答
tips
プレビュー