-
하기 굵은표시 클래스 .pf-1에다가 border 속성을 주고싶은데
.pf-1{
background-image: url(portfolio-1.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;border:30px solid white
}
적용이 안되는 이유를 몰라 질문드립니다 애니메이션 만들고싶습니다 ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../nomalize.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<link href="../fontawesome/css/all.css" rel="stylesheet">
<title>portfolio</title>
</head>
<body>
<div class="iphone-container">
<div class="iphone-text">
<h2>Landing Page for Apps</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dolorem laboriosam amet fuga tempore praesentium nihil. Corporis veritatis excepturi voluptatibus labore asperiores sed alias unde iste aperiam consectetur, saepe cum.</p>
<button style="height:40px; background-color:gray; color:white;">Show More</button>
</div>
</div><div class="main2-container">
<div class="main-2-text">
<h3>It is the perfect theme for your next Project!</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="main-2-button">
<button style="height:40px; background-color:gray; color:white;">Show Portfolio</button>
</div>
</div><div class="main3-container">
<div>
<span>services</span>
<h2>What We Offer</h2>
</div>
<div class="main3-contents">
<div>
<i class="fa-solid fa-mobile fa-3x"></i>
<h3>Responsive</h3>
<p>Lorem ipsum i love coding</p>
</div>
<div>
<i class="fa-solid fa-flask fa-3x"></i>
<h3>Experiments</h3>
<p>Lorem ipsum i love coding</p>
</div>
<div>
<i class="fa-solid fa-bolt fa-3x"></i>
<h3>Quickness</h3>
<p>Lorem ipsum i love coding</p>
</div>
<div>
<i class="fa-solid fa-earth-asia fa-3x"></i>
<h3>Global Shopping</h3>
<p>Lorem ipsum i love coding</p>
</div>
</div>
</div><div class="main4-container">
<div style="text-align:center;">
<span>Portfolio</span>
<h2>What We Can DO</h2>
</div><div class="portfolio-container">
<div class="pf-1">
<div class="pf-text">
<h2>Stationary</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="pf-2">
<div class="pf-text">
<h2>Stationary</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="pf-3">
<div class="pf-text">
<h2>Stationary</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="pf-4">
<div class="pf-text">
<h2>Stationary</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div><div class="main4-mark">
<div>
<i class="fa-brands fa-google fa-3x"></i>
</div>
<div>
<i class="fa-brands fa-twitter fa-3x"></i>
</div>
<div>
<i class="fa-brands fa-instagram fa-3x"></i>
</div>
</div><div style="text-align:center;">
<i class="fa-solid fa-copyright"></i>
<span>Changmin Lee</span>
</div>
</div>
</body>
</html>.iphone-container{
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
width:100%;
height:400px;
padding:1px;
display:flex;
position:relative;
}.iphone-text{
width:30%;
color:white;
margin-top:50px;
margin-left:50px;
}.iphone-img{
width:200px;
height:300px;
position:absolute;
bottom:0px;
right:10%;
}.main2-container{
width:100%;
height:300px;
text-align:center;
vertical-align:middle;
}.main3-container{
width:100%;
height:300px;
background-color:deepskyblue;
text-align: center;
padding:10px;
}.main3-contents{
display:flex;
justify-content: center;
}.main3-contents>div{
margin:30px;
}.main4-container{
width:80%;
height:600px;
margin:auto;
padding:10px;
}.portfolio-container{
width:80%;
height:800px;
margin:auto;
background-color: antiquewhite;
display:flex;
flex-direction: row;
flex-wrap:wrap;
color:white;
}.pf-1{
background-image: url(portfolio-1.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}.pf-2{
background-image: url(portfolio-2.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}.pf-3{
background-image: url(portfolio-3.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}.pf-4{
background-image: url(portfolio-4.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}.pf-text{
margin-top:80px;
margin-left:20px;
}.main4-mark{
display: flex;
justify-content: center;
}.main4-mark>div{
margin:30px;
}@media screen and (max-width : 576px) {
.iphone-container{
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
width:100%;
min-width:530px;
height:800px;
padding:1px;
display:flex;
flex-direction: column;
text-align: center;
}
.iphone-text{
width:30%;
color:white;
margin-top:50px;
margin-right:auto;
margin-left:auto;
}
.iphone-img{
width:200px;
height:300px;
margin-right:20%;
}
.main2-container{
width:100%;
height:300px;
text-align:center;
vertical-align:middle;
}
.main3-container{
width:100%;
height:900px;
background-color:deepskyblue;
text-align: center;
padding:10px;
}
.main3-contents{
display:flex;
flex-direction: column;
justify-content: center;
}
.main3-contents>div{
margin:30px;
}
.main4-container{
width:100%;
height:400px;
margin:auto;
padding:10px;
}
.portfolio-container{
width:90%;
height:800px;
margin:auto;
display:flex;
flex-direction: row;
flex-wrap:wrap;
color:white;
}
.pf-1{
background-image: url(portfolio-1.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}.pf-2{
background-image: url(portfolio-2.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}
.pf-3{
background-image: url(portfolio-3.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}
.pf-4{
background-image: url(portfolio-4.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:50%;
height:50%;
}
.pf-text{
margin-top:80px;
margin-left:20px;
}
.main4-mark{
display: flex;
justify-content: center;
}
.main4-mark>div{
margin:30px;
}
}
- 답변은 로그인 후 가능합니다.