멋진 프로필 카드 만들기

10729 단어
안녕 얘들아
오늘은 이 멋진 프로필 카드를 만든 방법을 보여드리겠습니다. 시작하겠습니다..



작업 공간 만들기




   cd /Desktop
   mkdir profile_card
   cd profile_card
   touch index.html
   touch style.css


cd/Desktop: 디렉토리를 데스크탑으로 변경하는 데 사용됩니다 🖥️

mkdir profile_card: 이 명령은 ptofile_card라는 폴더를 만드는 데 사용됩니다.

cd profile_card: 이 명령은 profile_card 폴더 내부를 탐색하는 데 사용됩니다.

touch index.html: profile_card 폴더 안에 index.html 파일을 생성합니다.

touch style.css: profile_card 폴더 안에 style.css 파일을 생성합니다.

프로필 카드 만들기




<!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">

    <title>Profile page</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="profile-block">

        <div class="cover-img">
            <img src="c.png" alt="cover-photo">
        </div>

        <div class="profile-image-box">
            <img src="a.jpg" alt="profile picture">
        </div>
        <span>Ayebidun Ezekiel</span>
        <p>Full_stack Developer</p>

        <div class="more">
            <button type="button" >Portfolio</button>
        </div>
    </div>
</body>
</html>


프로필 카드 스타일링




*{
    width: 100%;
    margin: 0;
    padding: 0;
}


.profile-block{
    top: 20%;
    left: 15%;
    width: 250px;
    position: absolute;
    border-radius: 5px;
    box-shadow: 0px 0px 4px 0px #5c75b1;
}

.cover-img{
    width: 100%;
    height: 150px;
}

.cover-img img{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.profile-image-box {
    top: 80px;
    left: 65px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    border: solid 7px #4d6cb2;
    box-shadow: 0px 0px 4px 0px #5c75b1;
}


.profile-image-box img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.profile-block span{
    font-size: 25px;
    font-weight: bold;
    margin-top: 50px;
    position: absolute;
    text-align: center;
    font-family: 'franklin gothic medium', 'arial narrow', arial, sans-serif;
}

.profile-block p{
    margin-top: 80px;
    text-align: center;
    font-weight: lighter;
}

.more{
    text-align: center;
}

.more button{
    width: 150px;
    height: 30px;
    border: none;
    margin-top: 40px;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 50px;
    background-color: #5c75b7;
}%
순풍 버튼
Bitrise의 Xcode Test for iOS에서 xcpretty-json-formatter 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage