4 글 보임 - 1 에서 4 까지 (총 4 중에서)
-
글쓴이글
-
2023년 11월 3일 23:13 #102967
이상명참가자안녕하세요 코딩애플님, SNS 포트폴리오 아래와 같이 구현해봤는데... 많은 참견과 지적을 부탁드립니다. 힌트 보지 않고 오직 구글링과 노가다로만 작성해서 지적 당할 부분이 많이 있을 것으로 생각합니다.
미리 감사드립니다 꾸벅
<!doctype html> <html lang="en">
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/portfolio.css" rel="stylesheet"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head>
<body class="sns-portfolio max-width: 70%;"> <div class="container text-center ms-5"> <div class="row"> <div class="col-md-8"> <div class="profile-container d-flex"> <div class="my-profile image mt-3"> < img src="img/취업사진.jpg" class="rounded-circle" height="120px" width="120px"> </div> <div class="my-profile content m-3"> <h4>Sangmyeong Lee</h4> <p>Front-end Designer</p> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt" viewBox="0 0 16 16"> <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z" /> <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /> </svg> <span>Seoul, South Korea</span><br> <button type="button" class="btn btn-info mt-2">Contact</button> </div> </div> </div>
<div class="col-md-3">
<div class="profile-info m-3 d-flex p-0"> <div first row> <p style="padding: auto">Location</p> <p>Age</p> <p>Experience</p> <p>School</p> </div> <div class="second row" style="width: 300px;"> <span style="width: 300px">서울 마포구</span> <span style="width: 300px">92년생</span> <span style="width: 300px">신입</span> <span style="width: 300px">영남대학교 <br>국제통상학과</span> </div> </div>
</div> </div> </div> <!-- 반응형 1행 구분선 -->
<!-- 중간 nav bar -->
<div class="container ms-5"> <div class="row">
<ul class="nav nav-underline"> <li class="nav-item"> Profile <li class="nav-item"> Link <li class="nav-item"> Link <li class="nav-item"> Disabled </div> </div> <!-- 중간 nav bar -->
<!-- 반응형 2행 구분선 -->
<div class="container m-3 ms-5"> <div class="row">
<div class="card mt-3 p-2 col-md-3"> <div class="card-body"> <h5 class="card-title p-0 fw-bold">WORKS</h5> <h6 class="card-subtitle mb-2 text-body-secondary"></h6><BR> <div style="opacity: 0.8;"> <p class="card-text">Landing page design</p> <p class="card-text">Flyer design</p> <p class="card-text">Vue.js To-do app</p> <p class="card-text">Shopping page design</p> </div> </div> </div>
<div class="card p-2 col-md-7 mt-3"> <div class="card-body"> <h5 class="card-title p-0 fw-bold">ABOUT</h5> <h6 class="card-subtitle mb-2 text-body-secondary"></h6><BR> <div style="opacity: 0.8;"> <p class="card-text">I have been in charge of oversea sales at manufacturing company. But, I have decided to change my career path in which everything i do at work or home becomes directly my ability.</p> </div> </div> <hr> </hr> <div class="card-body"> <h5 class="card-title p-0 fw-bold">Skills</h5> <BR> <div class="skills m-1"> <button type="button" class="btn" disabled>HTML5</button> <button type="button" class="btn" disabled>JavaScript</button> <button type="button" class="btn" disabled>CSS3</button> </div> </div> </div>
<div class="card mt-3 p-2 col-md-2" style="text-align: center;"> <div class="card-body"> <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-person-plus-fill" viewBox="0 0 16 16"> <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" /> <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z" /> </svg> <p>Find me at Linked in</p> <button type="button" class="btn btn-primary" disabled>Sign Up</button> <p style="color: skyblue;">Already a member?</p> </div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> </body>
</html>
-
글쓴이글
4 글 보임 - 1 에서 4 까지 (총 4 중에서)
- 답변은 로그인 후 가능합니다.