슬기로운 AI생활 - 집요한 PM 에릭

띵동코딩 5주차 웹 사이트 카피코딩 - 개발일지 본문

코딩공부

띵동코딩 5주차 웹 사이트 카피코딩 - 개발일지

집요한 기획자 에릭 2022. 7. 4. 23:09

웹 사이트 카피 코딩

 

코딩 공부 기록용.

 

Prac1.html : 띵동코딩 홈페이지 만들기

 

<!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>띵동코딩 - 클론코딩</title>
    <style>
        * {
            font-family: "Pretendard",serif;
        }
        * {

        }

        .gnb {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;            

            width:1100px;
            margin:auto;

            height:60px;

        }

        .main{

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

            padding-top: 60px;
        }

        .main > h3{
            font-size: 20px;
            font-weight: 500;
            line-height: 1.5;
            text-align: center;
            color: #415b6d;

            margin-bottom: 10px;
        }

        .main > h1{
            font-size: 46px;
            font-weight: 800;
            line-height: 1.4;
            text-align: center;
            color: #26343d;
        }

        .main > img{
            width: 1300px;
        }

        hr{
            border-top: none;
            border-bottom: 0.5px solid lightgray;
        }

        .cta{
            background-color: white;

            width: 100vw;
            height: 80px;

            border-radius: 8px;

            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            position: fixed;
            bottom: 10px;
            left: calc(50% -600px);  

            box-shadow: 0px 0px 10px 0px lightgray;

            -webkit-box-align: center;


        }

        .cta > p{
            font-size: 20px;
            margin-left: 120px;

            font-weight: 500px;
        }

        .cta >p >span{
            color:#ff773c;
        }

        .cta > button{
            width: 300px;
            height: 60px;
            margin-right: 120px;
            background-color: #ff773c;

            border: none;
            border-radius: 8px;

            color: white;
            font-size: 16px;
            font-weight: bold;

            cursor:pointer;
        }

    </style>
</head>
<body>
    <div class="gnb">
        <span>로그인</span>
    </div>
    <hr/>
    <div class="main">
        <h3>매주 월요일, 내 강의실에 찾아오는<br/>
            온라인 코딩 학습지</h3>
        <h1>띵동코딩이 도착했어요!</h1>
    </div>
    <div class="cta">
        <p><span>첫 달 만 원</span> 혜택 특별 연장,선착순 100명 한정!</p>
        <button>만 원으로 시작하기</button>
    </div>
</body>
</html>
 
 
Prac2.html : 띵동코딩 로그인 페이지 만들기
 
 
<!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>띵동코딩 - 로그인</title>
    <style>
        * {
            font-family: "Pretendard",serif;
        }
        *{
        }
        .wrap{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;    
           
            width: 300px;
            margin: 70px auto auto auto;
            padding: 80px 50px 50px 50px;
            border: 1px solid lightgray;
            border-radius: 8px;
        }
        .wrap > img{
            width: 90px;
            height: 46px;
            margin-bottom: 30px;
            margin-right: auto;
        }
        .script{
            margin-right: auto;
            font-size: 24px;
            color: rgb(38, 52, 61);
            line-height: 1.5;
        }
        .button{
            width: 320px;
            height: 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            justify-content: center;
            margin-top: 50px;
            border-radius: 8px;
            border: none;
            background-color: rgb(255, 226, 55);
            cursor: pointer;
            color: rgb(28, 29, 30);
        }
        .email{
            width: 101px;
            display: block;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            font-family: Pretendard;
            color: rgb(38, 52, 61);
            cursor: pointer;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <p class="script">
            매주 월요일, <br/>내 강의실에 찾아오는<br/>코딩 학습지
        </p>
        <button class="button">
            카카오로 1초만에 시작하기
        </button>
        <span class="email">
            이메일로 시작하기</span>
    </div>
</body>
</html>
 
 

한 걸음 더 : 이메일 박스 만들기

 

<!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>띵동코딩 - 로그인</title>
    <style>
        * {
            font-family: "Pretendard",serif;
        }
        *{

        }

        .wrap{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;    
           
            width: 300px;
            margin: 70px auto auto auto;
            padding: 80px 50px 50px 50px;

            border: 1px solid lightgray;
            border-radius: 8px;
        }

        .wrap > img{
            width: 90px;
            height: 46px;
            margin-bottom: 30px;

            margin-right: auto;
        }

        .script{
            margin-right: auto;
            font-size: 24px;
            color: rgb(38, 52, 61);
            line-height: 1.5;
        }

        .button{
            width: 320px;
            height: 60px;
            display: flex;
            flex-direction: column;

            align-items: center;
            font-size: 16px;
            font-weight: bold;
            justify-content: center;

            margin-top: 50px;
            border-radius: 8px;
            border: none;
            background-color: rgb(255, 226, 55);
            cursor: pointer;
            color: rgb(28, 29, 30);
        }

        .email{
            width: 320px;
            display: block;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            font-family: Pretendard;
            color: rgb(38, 52, 61);
            cursor: pointer;
            margin-top: 10px;
        }

        .inputbox{
            width: 298px;
            height: 20px;
            font-size: 16px;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid rgb(219, 221, 224);
        }

        .emailtitle{
            font-size: 16px;
            font-weight: bold;
            font-family: Pretendard;
            margin-top: 30px;
            color: rgb(80, 82, 84);
            margin-right: auto;
        }

        .next{
            width: 320px;
            height: 50px;
            margin: 10px 0px;
            -webkit-box-flex: 0;
            flex-grow: 0;
            display: flex;
            flex-direction: column;
            -webkit-box-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            font-family: Pretendard;
            color: rgb(255, 255, 255);
            gap: 10px;
            border: none;
            border-radius: 8px;
            background-color: rgb(219, 221, 224);
            cursor: pointer;
            margin-right: auto;
            margin-left: auto;
        }

    </style>
</head>
<body>
    <div class="wrap">
        <p class="script">
            매주 월요일, <br/>내 강의실에 찾아오는<br/>코딩 학습지
        </p>
        <button class="button">
            카카오로 1초만에 시작하기
        </button>
        <p class = "emailtitle">이메일</p>
        <div class="emailbox">
            <input class = "inputbox" type = "text" placeholder="이메일 주소를 입력해주세요">
            <button class = "next">다음</button>
        </div>
        <span class="email">
            이메일이 기억나지 않아요.</span>
       
    </div>
</body>
</html>

'코딩공부' 카테고리의 다른 글

띵동코딩 10주차 개발 일지 : Javascript 복습  (0) 2022.08.08
띵동코딩 9주차 개발 일지 : Javascript 기초  (0) 2022.08.02
띵동코딩 8주차 - 부트스트랩 활용 파타고니아 홈페이지 카피코딩  (0) 2022.07.25
띵동코딩 7주차 - 부트스트랩 활용 인스타그램 카피코딩  (0) 2022.07.18
띵동코딩 6주차 웹 사이트 카피코딩 - 개발일지  (0) 2022.07.11
'코딩공부' Related Articles more