김묭의 자기개발

친구 홈페이지 만들어 보기 본문

코딩/내가 만든 코딩

친구 홈페이지 만들어 보기

포령 2022. 12. 14. 11:52

싸이월드에서 영감을 받아 친구의 일촌신청 페이지를 만들어보았다.

아직 부족한 것이 많지만 이것저것 찾아보며 열심히 만들었다.

수업에서 배운것 외에 하이퍼링크를 추가하였고, 글씨체를 두껍게 바꾸었다.

처음에 문제가 있었는데 내가 만든 html파일이 핸드폰에서 열리지 않는 것이었다.

이는 파일을 공유사이트에 올려 서버에 등록함으로써 문제를 해결하였다.

 

https://6399386e4c878d68b75d1c0c--charming-mermaid-6ea0cf.netlify.app/

 

ε♡з성겡이의 해피하우스ε♡з

김묭 (포항, 25세) ( ͡°⁄ ⁄ ͜⁄ ⁄ʖ⁄ ⁄ ͡°) 도토리 남는거 있니ㅠ

6399386e4c878d68b75d1c0c--charming-mermaid-6ea0cf.netlify.app

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>ε♡з성겡이의 해피하우스ε♡з</title>
    <style>

        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .성겡이님의미니홈피 {
            background-color: pink;
            color: black;
            height: 400px;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-position: center;
            background-size: cover;
        }
        .mybutton {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
           
            margin: 30px;
        }
        .mybutton>button{
            margin: 10px;
        }

    </style>
</head>

<body>
    <div class="성겡이님의미니홈피">
        <h1> <b>˛ε♡з¸성겡님의 룸에 오신걸 환영합니다˛ε♡з¸</b></h1>
        <div class="mybutton">
            <button type="button">일촌 신청하기</button>
            <button><a href="https://www.instagram.com/sun9.an.9/"> instagram </a></button>
        </div>
    </div>
    <div class="신청서 작성">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">사용 할 닉네임</label>
        </div>
        <div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">관계도</label>
            <select class="form-select" id="inputGroupSelect01">
                <option selected>--성겡님과의 관계--</option>
                <option value="1">⭐프렌도⭐</option>
                <option value="2">⭐풰뮐리⭐</option>
                <option value="3">⭐보이쁘렌도⭐</option>
            </select>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
            <label for="floatingPassword">비밀번호</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-outline-dark"><a href="http://127.0.0.1:5500/frontend/%EC%84%B1%EA%B2%A1%EC%9D%B4%ED%8E%98%EC%9D%B4%EC%A7%80.html"> 신청하기 </a></button>
            <button type="button" class="btn btn-outline-dark">취소</button>
        </div>
        <div class="일촌 사진">
            <div class="row row-cols-1 row-cols-md-4 g-4">
                <div class="col">
                    <div class="card h-100">
                        " class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">김야림</h5>
                            <p class="card-text">(서울, 26세)</p>
                            <p>٩(๑>∀<๑)۶</p>
                                    <p class="mycoment">들렀다 가요~^ㅇ^</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        " class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">만두민지</h5>
                            <p class="card-text">(천안, 25세)</p>
                            <p>๑⊙_⊙๑</p>
                            <p class="mycoment">사진 퍼가요~(･ิω･ิ)</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        " class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">김묭</h5>
                            <p class="card-text">(포항, 25세)</p>
                            <p>( ͡°⁄ ⁄ ͜⁄ ⁄ʖ⁄ ⁄ ͡°)</p>
                            <p class="mycoment">도토리 남는거 있니ㅠ</p>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card h-100">
                        " class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">⭐보이쁘렌도⭐</h5>
                            <p class="card-text">(?, ??세)</p>
                            <p>༺ʚ♥ɞ༻</p>
                            <p class="mycoment">구인중</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
저작자표시

'코딩 > 내가 만든 코딩' 카테고리의 다른 글

스파르타코딩클럽 15일 메이킹 챌린지 14기 후기  (0) 2023.01.26
스파르타코딩클럽 메이킹 챌린지 1일차 개발일지  (0) 2022.12.29
여행 페이지  (0) 2022.12.23
제비뽑기 게임  (0) 2022.12.15
'코딩/내가 만든 코딩' Related Articles more