diff --git a/src/index.html b/src/index.html index edea5558..0c50bc31 100644 --- a/src/index.html +++ b/src/index.html @@ -3,8 +3,51 @@ - + + + + +
+
+

Learn to code by
watching others

+

Wee how experienced developers solve problems in real-time. +
Watching scripted tutorials is great, but understanding how +
developers think is invaluable.

+
+ +
+
+

Try it free 7 days then $20/mo. thereafter

+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

By clicking the button. you are agreeing to our Terms and Services

+ +
+
+
+ diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..02e762b8 --- /dev/null +++ b/src/index.js @@ -0,0 +1,20 @@ +let Name = ""; //let Name; +let LastName = ""; +let Email = ""; +let Password = ""; + +function userInfo() { + Name = document.getElementById("Name").value; + LastName = document.getElementById("LastName").value; + Email = document.getElementById("Email").value; + Password = document.getElementById("Password").value; +} + +let btn = document.getElementById("btn"); +btn.addEventListener('click', function(){ + userInfo(); // 함수 실행시켜줘야 함. + console.log(`Name: ${Name}`); + console.log(`Last Name: ${LastName}`); + console.log(`Email: ${Email}`); + console.log(`Password: ${Password}`); +}); diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..4b2af002 --- /dev/null +++ b/src/style.css @@ -0,0 +1,90 @@ +* { + margin: 0; + padding: 0; + font-family: "Poppins", sans-serif; +} + +body { + background-image: url('../images/bg-intro-desktop.png'); + background-color: hsl(0, 100%, 74%) ; + font-size: 700; +} + +#container { + /* 가운데 정렬 */ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +#Left h1 { + color: white; + font-weight: 700; + font-size: 45px; +} + +#Left p { + margin-top: 20px; + color: white; +} + +#info { + background-color:hsl(248, 32%, 49%) ; + border-radius: 5px; + color: white; + height: 55px; + display: flex; + justify-content: center; + align-items: center; + font-size: 15px; + box-shadow: 0 7px 1px hsla(0, 1%, 25%, 0.386); +} + +#Right { + margin-left: 70px; + width: 35%; +} + +#RightContainer { + background-color: white; + border-radius: 5px; + margin-top: 20px; + height: 450px; + display: flex; + flex-direction: column; + justify-content: center; + justify-items: center; + box-shadow: 0 7px 1px hsla(0, 1%, 25%, 0.386); +} + +.User { + border-radius: 5px; + margin-left: 7%; + margin-bottom: 20px; +} + +input { + width: 93%; + height: 55px; + border-radius: 5px; + border-color: hsl(246, 25%, 77%); + border-style: solid; + border-width: 1px; + font-weight: 700; +} + +#btn { + background-color: hsl(154, 59%, 51%); + color: white; + font-weight: 500; + font-size: 15px; + cursor: pointer; +} + +#RightContainer p { + font-size: 11px; + font-weight: 600; + color: hsl(246, 25%, 77%); + text-align: center; +} \ No newline at end of file