Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[202102562 정현민] 4주차 미션을 제출합니다 #8

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

[202102562 정현민] 4주차 미션을 제출합니다 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 127 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
body{
background-color: hsl(0, 100%, 74%);
font-family: "Poppins", sans-serif;
font-size:16px;
}

.container{
position:absolute;
display:flex;
width:80%;
height:80%;
left:10%;
top:10%;

}

.container__left{
position:relative;
width:40%;
height:50%;
top:30%;
margin-left:100px;
color:white;
}

.container__left__title{
font-weight:700;
font-size:48px;
}

.container__left__subtitle{
margin-top:30px;
}


.container__right{
margin-top:5%;
width:40%;
}

.container__right__title{
display:flex;
justify-content: center;
height:8%;
line-height:60.47px;
background-color:hsl(248, 32%, 49%);
border-radius:5px;
color:white;
}

.container__right__title__front{
font-weight: 600;
}

.container__right__title__back{
font-weight: 300;
}

.container__right__login{
margin-top:5%;
height:70%;
background-color: white;
border-radius: 5px;
display:flex;
flex-direction: column;
align-items: center;
}

.login__firstname{
margin-top:5%;
border:1px solid black;
border-radius: 5px;
width:90%;
height:10%;
}

.login__Lastname{
margin-top:3%;
border:1px solid black;
border-radius: 5px;
width:90%;
height:10%;
}

.login__EmailAddress{
margin-top:3%;
border:1px solid black;
border-radius: 5px;
width:90%;
height:10%;
}

.login__Password{
margin-top:3%;
border:1px solid black;
border-radius: 5px;
width:90%;
height:10%;
}

.login__button{
margin-top:3%;
border:1px solid hsl(154, 59%, 51%);
background-color: hsl(154, 59%, 51%);
border-radius: 5px;
width:90%;
height:10%;
font-weight: 600;
font-size:15px;
color:white;
}

.login__explain{
display:flex;
font-weight: 600;
margin-top: 20px;
}

.login__explain__front{
color:#a0a0a0;
opacity: 0.3;
}

.login__explain__back{
color:red;
}

36 changes: 36 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href = "index.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
<body background="images/bg-intro-desktop.png">
<section class="container">
<section class="container__left">
<div class="container__left__title">Learn to code by<br>watching others</div>
<div class="container__left__subtitle">See how experienced developers solve problems in real-time.<br>
Watching scripted tutorials is great, but understanding how<br>
developers think is invaluable.
</div>
</section>

<section class="container__right">
<div class="container__right__title"><div class="container__right__title__front">Try it free 7 days</div> <div class="container__right__title__back">&nbsp;then S20/mo. thereafter</div></div>
<section class="container__right__login">
<input type="text1" placeholder="First name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'First name'" class="login__firstname">
<input type="text1" placeholder="Last name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Last name'" class="login__Lastname">
<input type="text1" placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Email Address'" class="login__EmailAddress">
<input type="text1" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'" class="login__Password">
<button class="login__button">CLAIM YOUR FREE TRIAL</button>
<div class="login__explain"><div class="login__explain__front">By clicking button, you are agreeing to our</div><div class="login__explain__back">&nbsp;Terms and Services</div></div>
</section>
</section>
</section>

<script src="index.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
let first_name = document.querySelector(".login__firstname");
let last_name = document.querySelector(".login__Lastname");
let email_address = document.querySelector(".login__EmailAddress");
let password = document.querySelector(".login__Password");

const button = document.querySelector(".login__button");

const print = () => {
console.log("성 : " + first_name.value);
console.log("이름 : " + last_name.value);
console.log("이메일 주소 : " + email_address.value);
console.log("비밀번호 : " + password.value);
}

button.addEventListener('click',print);
10 changes: 0 additions & 10 deletions src/index.html
View file
Open in desktop

This file was deleted.