라라리라

2023.08.13 / 미니 프로젝트 - 코딩25일차 본문

코딩/2023 HTML & CSS

2023.08.13 / 미니 프로젝트 - 코딩25일차

헤실 2023. 8. 13. 21:07

로그인.html

 

<!DOCTYPE html>
<html lang="ko">
  <head>
        <title>로그인</title>
        <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 rel="stylesheet" href="css/styles.css">
        <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
        <title>Document</title>
        <style>
   
   


 .content {
        margin: auto;
        border: 1.5px;
        width: 100px;
        font-family: dotum,sans-serif;
        font-size: 12px;
        width: 460px;
        border-color: darkgray;
        border-spacing: 10px;
       
    }

    .image {
        text-align: center;
        border: 2px;
        border-style: solid;
        border-color: rgb(199, 199, 199);
        width: 50px;
        height: 50px;
    }

    .content-box {
        width: 400px;
        border: 2px;
        border-style: solid;
        border-color: rgb(199, 199, 199);
        height: 50px;



    }

    label.submit {
            text-align: center;
            padding: 15px 200px;
            background-color: rgb(31, 65, 160);
            color: aliceblue;
            border-radius: 10px;
            cursor: pointer;

        }
     
        label.login {
            text-align: center;
            padding: 15px 200px;
            background-color: rgb(255, 255, 255);
            color: rgb(0, 0, 0);
            border-radius: 10px;
            border-color: rgb(72, 98, 99);
            border-style: solid;
            border-width: 1px;
            cursor: pointer;

        }

        </style>

  </head>

    <body>
        <div class="toptable" style="text-align: center;">
           
            <a href="메인.html"><img src="logo_coupang_w350.PNG" width="220px" height="52px"> </a>
               
           
   
        </div>
    <br><br>
       
    <table class="content">
        <tr>
            <td>
                <div class ="image">
                    <label for="email"><img src="email.png" style="width: 25px; margin: 25%;" ></label>
                </div>
                </td>
               
               
            <td>
               
                <input class="content-box"type="email" id="email" placeholder="아이디(이메일)" required>
            </td>
        </tr>
   
        <tr>
            <td>
                <div class ="image">
                    <label for="password"><img src="padlock.png" style="width: 25px; margin: 25%;"></label>
                </div>
            </td>
            <td>
               
                <input class="content-box"type="password" id="password" placeholder="비밀번호" required>
               
            </td>
        </tr>
        </table>
   
    <div class="자동로그인" style="text-align: center;">
        <input type="checkbox">자동로그인
        <a href="https://login.coupang.com/login/accountInfoFind.pang" style="font-size: medium; margin-left: 11%;">아이디·비밀번호 찾기></a>
    </div>
<br><br>
    <div class = submit style="text-align: center;">
        <label class ="submit" for="submit-button">
            로그인
        </label>
        <input type="submit" id="submit-button" value="submit" style="display:none">
        <br><br>
        <hr style="width: 450px; border-color:rgb(184, 203, 240); border-style: solid;">
    <br>

    <div class = submit style="text-align: center;">
        <label class ="login" for="login">
            회원가입
        </label>
        <input type="button" id="login" value="submit" style="display:none" onClick="location.href='회원가입.html'">
        <br><br>


          <div class="links" style="text-align: center;">
                 
                   <br>
                   <div class ="law-cor" style="font-size: smaller; color: lightslategray; text-align: center;">
                    법인 고객이신가요?
                </br>
                      사업자 회원으로 전용 특가 혜택을 누려보세요.
                </br>
                </div>    
                   <h4> <a href="https://pages.coupang.com/p/92079" style="font-size: medium; text-align: center;">쿠팡비즈 간편가입</a></h4>
               
                </br>
                </br>
                ©Coupang Corp. All rights reserved.
                    </div>
        </div>


       

  </body>
</html>

   


   
   

 

 

회원가입.html

 

<!DOCTYPE html>
<html lang="ko">
<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>회원가입</title>
    <style>

    .toptable {
        text-align: center;

    }
   

    .header {
        margin-left: 35%;
        font-size: medium;
        font-weight: bold;

    }

    .content {
        margin-left: 35%;
        border: 1.5px;
        width: 100px;
        font-family: dotum,sans-serif;
        font-size: 12px;
        width: 460px;
        border-color: darkgray;
        border-spacing: 10px;
       
    }

    .image {
        text-align: center;
        border: 2px;
        border-style: solid;
        border-color: rgb(199, 199, 199);
        width: 50px;
        height: 50px;
    }

    .content-box {
        width: 400px;
        border: 2px;
        border-style: solid;
        border-color: rgb(199, 199, 199);
        height: 50px;



    }

    .agree-table {
        margin-left: 36%;
        border: 2px;
        border-style: solid;
        border-color: rgb(199, 199, 199);
        padding: 30px;
    }

    label.submit {
            text-align: center;
            padding: 30px 80px;
            background-color: rgb(36, 43, 145);
            color: aliceblue;
            border-radius: 10px;
            cursor: pointer;

        }
     

    </style>

</head>
<body>
    <div class="toptable">
       
        <a href="메인.html"><img src="logo_coupang_w350.PNG" width="220px" height="52px"> </a>
           
       

    </div>
<br><br>
    <div class="header">
        회원정보를 입력해주세요
    </div>

 <br>
   <table class="content">
    <tr>
        <td>
            <div class ="image">
                <label for="email"><img src="email.png" style="width: 25px; margin: 25%;" ></label>
            </div>
            </td>
           
           
        <td>
           
            <input class="content-box"type="email" id="email" placeholder="아이디(이메일)" required>
        </td>
    </tr>

    <tr>
        <td>
            <div class ="image">
                <label for="password"><img src="padlock.png" style="width: 25px; margin: 25%;"></label>
            </div>
        </td>
        <td>
           
            <input class="content-box"type="password" id="password" placeholder="비밀번호" required>
           
        </td>
    </tr>

    <tr>
        <td>
            <div class ="image">
                <label for="password-check"><img src="lock.png" style="width: 25px; margin: 25%;"></label>
            </div>
        </td>
        <td>
           
            <input class="content-box" type="password" id="password-check" placeholder="비밀번호 확인" required>
           
        </td>
    </tr>

    <tr>
        <td>
            <div class ="image">
                <label for="name"><img src="profile.png" style="width: 25px; margin: 25%;"></label>
            </div>
        </td>
        <td>
           
            <input class="content-box"type="text" id="name" placeholder="이름" required>
           
        </td>
    </tr>

    <tr>
        <td>
            <div class ="image">
                <label for="number"><img src="smartphone-call.png" style="width: 25px; margin: 25%;"></label>
            </div>
        </td>
        <td>
           
            <input class="content-box"type="number" id="number" placeholder="휴대폰 번호" required>
           
        </td>
    </tr>
   </table>
<br><br>

<div class ="agree" style="font-size: larger; font-weight: bolder; margin-left: 36%;" >
    <input type="checkbox" id="agree-check1">
    <label class ="agree-check1" for="agree-check1"></label>
    <label for="agree-check1" >모두 확인하였으며 동의합니다.</label>
   
    </div>
<div class="agreelong" style="margin-left: 36%; margin-right: 40%; font-size: small;" >전체 동의에는 필수 및 선택 정보에 대한 동의가 포함되어 있으며, 개별적으로 동의를 선택 하실 수 있습니다. 선택 항목에 대한 동의를 거부하시는 경우에도 서비스 이용이 가능합니다.</div>
<br>
<table class ="agree-table">
    <tr>
        <td>
            <div class="agree-dottom">
            <input type="checkbox" id="agree-check2">
            <label for="agree-check2">[필수] 만 14세 이상입니다</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">
            <input type="checkbox" id="agree-check3">
            <label for="agree-check3">[필수] 쿠팡 이용약관 동의</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">
            <input type="checkbox" id="agree-check4">
            <label for="agree-check4">[필수] 전자금융거래 이용약관 동의</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">
            <input type="checkbox" id="agree-check5">
            <label for="agree-check5"> [필수] 개인정보 수집 및 이용 동의</label>
           </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">
            <input type="checkbox" id="agree-check6">
            <label for="agree-check6">[선택] 마케팅 목적의 개인정보 수집 및 이용 동의</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">
            <input type="checkbox" id="agree-check6">
            <label for="agree-check6"> [선택] 광고성 정보 수신 동의</label>
           </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="agree-check7">
            <label for="agree-check7">[선택] 이메일 수신 동의</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="agree-check8">
            <label for="agree-check8">[선택] SMS, SNS 수신 동의</label>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="agree-dottom">&nbsp;&nbsp;&nbsp;
            <input type="checkbox" id="agree-check9">
            <label for="agree-check9">[선택] 앱 푸시 수신 동의</label>
            </div>
        </td>
    </tr>
</table>
<br>
<br>
<br>
<div class = submit style="text-align: center;">
    <label class ="submit" for="submit-button">
        동의하고 계속하기
    </label>
    <input type="submit" id="submit-button" value="submit" style="display:none">
<br><br><br>
<div class ="law-cor" style="font-size: smaller; color: lightslategray;">
    법인 고객이신가요?
</br>
      사업자 회원으로 전용 특가 혜택을 누려보세요.
</br>
</div>    
   <h4> <a href="https://pages.coupang.com/p/92079">쿠팡비즈 간편가입</a></h4>

</br>
</br>
©Coupang Corp. All rights reserved.
    </div>
</body>
</html>

 

 

고객문의.html

 

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>고객센터 문의하기</title>
    <style>
       

        .request {
            margin-left: 10%;
        }
        .hr1 {
            background-color: rgba(173, 173, 173, 0.692);
            height: 1px;
            border: 0;
        }

        .hr2 {
            border: solid 1px;
            width: 80%;
            text-align: center;
           
        }

        .문의내용{
            margin-left: 10%;
            float: left;
            margin-right: 20px;
            font-size: 30px;
        }
        .문의적는곳 {
            margin-left: 40px;
            float: left;
            resize: none;
        }

        .상품 {
            margin-left: 10%;
            float: left;
            margin-right: 20px;
            font-size: 30px;
        }

        .상품입력 {
            margin-left: 80px;
            float: left;
            width: 100px;
            height: 10px;
        }

        .전화번호 {
            margin-left: 10%;
            float: left;
            margin-right: 20px;
            font-size: 30px;
        }

        .전화번호입력 {
            margin-left: 10px;
            float: left;
            width: 100px;
            height: 10px;
        }

        .input-file-button {
            margin-left: 380px;
            padding: 6px 25px;
            background-color: dimgrey;
            border-radius: 10px;
            color: aliceblue;


        }

        .hr3{
            border: solid 1px;
            width: 80%;
            text-align: center;
        }

        label.submit {
            text-align: center;
            padding: 30px 50px;
            background-color: brown;
            color: aliceblue;
            border-radius: 10px;
            cursor: pointer;

        }

       

    </style>
</head>
<body>

    <p class="header"><a href="메인.html" ><img src="logo-coupang.x2.20201201.png" width="150px"></a></p>
    <hr class = "hr1">

    <h2 div class ="request">1:1 문의하기</h2>

    <hr class ="hr2" >
    <br>
    <br>

    <div class ="문의내용">문의 내용</div>
    <div class = "문의박스">
        <textarea class="문의적는곳" maxlength="3050px"  rows="30" cols="130" placeholder="문의 내용을 자세하게 작성해주세요.
       
10월 18일부터 산업안전보건법에 고객응대 근로자 보호 조치가 시행됩니다(시행 년도 2018년).
고객 응대 근로자에게 폭언, 욕설 등을 하지 말아주세요." required></textarea>
    </div><div style="clear:both"></div>
<br>

<label class="input-file-button" for="input-file">
    파일 첨부하기
  </label>
  <input type="file" id="input-file" style="display:none">
 
<br>

<br>
<br>
    <div class ="상품">
        <label for="nameDirector">상품명</label>
    </div>
    <div class ="상품입력">
        <input type="text" name="director" placeholder="상품명을 입력해주세요" maxlength="11" style="width: 200px;height: 30px;font-size: 15px;" required>
    </div><div style="clear:both"></div>
    <br>
    <div class ="전화번호">
        <label for="nameDirector">휴대폰 번호</label>
    </div>
    <div class ="전화번호입력">
        <div class="write_entercs write_tel">
            <input type="text" name="number" required placeholder="전화번호를 입력해주세요" maxlength="11" style="width: 200px;height: 30px;font-size: 15px;" >
        </div>
    </div>

    <br>
    <br>
    <br>
    <br>

    <hr class ="hr3" >
    <br>
    <br>
   
    <div class = submit style="text-align: center;">
    <label class ="submit" for="submit-button">
        문의 접수
    </label>
    <input type="submit" id="submit-button" value="submit" style="display:none">
    </div>




   
</body>
</html>

 

 

 

 

저작자표시

'코딩 > 2023 HTML & CSS' 카테고리의 다른 글

2023.08.12 / 미니 프로젝트 - 코딩24일차  (0) 2023.08.13
2023.08.11 / CSS4 - 코딩 23 일차  (0) 2023.08.11
2023.08.10 / CSS3 - 코딩 22 일차  (0) 2023.08.10
2023.08.09 / CSS2 - 코딩 21 일차  (0) 2023.08.09
2023.07.21 / HTML 4- 코딩 2 일차  (0) 2023.07.21
'코딩/2023 HTML & CSS' Related Articles more