2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
1. 아래와 같이 구현 해봤는데.. 코드가 많이 조잡한 것 같습니다..(개념이 100% 머릿속에 박힌게 아니다 보니 이것저것 사용해서 맞춘 것이 많습니다.) 많은 조언 부탁드립니다. 2 . 하기 작업 다하고 footer에 아이콘 세 개 마지막으로 넣으려고..맨 하단 div박스를 만드는데 자꾸 마지막 그림(오른쪽 하단)부에 div 박스가 붙는데 왜 그런걸까요? ㅅ상위에 감싸고 있는 div도 아닌데 자꾸 저기로 들어가는데...이유를 모르겠습니다 (footer만 하면 어느정도 다했는건데 찝찝하네요..피드백 부탁드립니다.)
html
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/portfolio.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title>Portfolio 1</title>
</head>
<body> <div class="port1-container1"> <div class="port1-container1-text"> <h1>Landing Page for Apps</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p> <p>Voluptatum, rem, distinctio! Dolores doloremque.</p> <button class="port1-btn1">Show More</button> <div class="container1-img"> < img src="img/iphone.png" class="iphone"> </div> </div> </div>
<div class="port1-container2"> <h2 style="font-weight: bold;">It is the perfect theme for your next Project!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <button class="port1-btn1">Show Portfolio</button> </div>
<div class="port1-container3"> <div class="port1-service"> <p>services</p> <h2>What We Offer</h2> </div>
<div class="port1-icon"> <div> <i class="fa-solid fa-mobile-screen-button"></i> <h4>Responsive</h4> <p>lorem ipsum i love coding</p> </div> <div> <i class="fa-solid fa-flask"></i> <h4>Responsive</h4> <p>lorem ipsum i love coding</p> </div> <div> <i class="fa-solid fa-jet-fighter"></i> <h4>Responsive</h4> <p>lorem ipsum i love coding</p> </div> <div> <i class="fa-solid fa-globe"></i> <h4>Responsive</h4> <p>lorem ipsum i love coding</p> </div>
</div> </div> <div class="port1-container4"> <p style="font-size: 15px; margin-bottom: 0; color: orange;">Portfolio</p> <h2 style="margin-top: 0;">What we can DO</h2> </div> <div class="port1-boxes"> <div class="portfolio-item1"> <div class="white-box"></div> <div class="portfolio-text1"> <p style="font-weight: bold;">Stationary</p> <p>A yellow pencil with envelopes on a clean, blue backdrop!</p> </div> </div> <div class="portfolio-item2"> <div class="portfolio-text1"> <p style="font-weight: bold;">Stationary</p> <p>A yellow pencil with envelopes on a clean, blue backdrop!</p> </div> </div> </div> <div class="port1-boxes2"> <div class="portfolio-item3"> <div class="portfolio-text1"> <p style="font-weight: bold;">Stationary</p> <p>A yellow pencil with envelopes on a clean, blue backdrop!</p> </div> </div> <div class="portfolio-item4"> <div class="portfolio-text1"> <p style="font-weight: bold;">Stationary</p> <p>A yellow pencil with envelopes on a clean, blue backdrop!</p> </div> </div>
</body>
</html> css
.body { height: 100%; width: 100%; }div { box-sizing: border-box; }.port1-container1 { margin: 5px; height: 500px; background-color: blue; position: relative; }.port1-container1-text { padding: 40px; margin: auto; color: white; }.port1-container1-text p { line-height: 5px; }.port1-btn1 { background-color: black; color: white; padding: 12px; margin-top: 10px; border-radius: 8px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }.iphone { float: right; margin-top: -103px; width: 353px; }.port1-container2 { height: 250px; background-color: whitesmoke; margin: 5px; text-align: center; }.port1-container3 { margin: 5px; height: 80%; background-color: blue; }.port1-service { text-align: center; padding-top: 20px; line-height: 5px; color: white; }.port1-icon { display: flex; margin-top: 100px; justify-content: center; text-align: center; justify-content: space-evenly; margin-left: 20px; margin-right: 20px; line-height: 15px; color: white; }.port1-icon i { color: slategray; background-color: white; width: 100px; height: 100px; border-radius: 70px; font-size: 35px; text-align: center; padding-top: 30px; box-sizing: border-box; }.port1-container4 { margin: 5px; height: 100px; background-color: white; padding-top: 25px; text-align: center; }.port1-boxes { background-color: blue; max-width: 1200px; margin: auto; display: flex; }.portfolio-item1 { width: 50%; height: 350px; background-size: cover; background-image: url(/img/portfolio-1.jpg); position: relative; } .portfolio-item2 { width: 50%; height: 350px; background-size: cover; background-image: url(/img/portfolio-2.jpg); }.portfolio-item3 { width: 50%; height: 350px; background-size: cover; background-image: url(/img/portfolio-3.jpg); }.portfolio-item4 { width: 50%; height: 350px; background-size: cover; background-image: url(/img/portfolio-4.jpg); }.portfolio-text1 { color: white; padding-top: 200px; padding-left: 30px; }.port1-boxes2 { background-color: blue; max-width: 1200px; margin: auto; display: flex; }.white-box { position: absolute; width: 100%; height: 100%; border: 0px solid white; z-index : 2; transition: all 1s; }.white-box:hover { border : 30px solid white; }@media screen and (max-width: 992px) { .iphone { width: 260px; display: block; float: none; margin: auto; margin-top: -2px; } .port1-container1-text { text-align: center; } .port1-icon { display: flex; flex-direction: column; } .port1-icon div { width: 100%; } }
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.