조수연 / Find_your_own_personal_color

Go to a project
Toggle navigation Toggle navigation pinning
이수빈
992beee5 1 parent a6513b9b

button 수정

Expand all
Inline Side-by-side
Showing 7 changed files with 89 additions and 33 deletions
This diff is collapsed. Click to expand it.
......@@ -3,6 +3,8 @@ body
background-image : url('./main.png');
background-repeat : no-repeat;
background-size : cover;
align-items: center;
text-align: center;
}
#home
{
......@@ -23,29 +25,40 @@ body
}
#soo_btn2
{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
font-family:"button";
position: relative;
top: 80px;
left: 550px;
text-align: center;
border: none;
border-radius: 45px;
width: 140px;
height: 45px;
color:rgb(255, 255, 255);
justify-content: center;
align-items: center;
text-align: center;
font-family: 'button';
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 80;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-size: 20px;
background-color: rgba(255, 255, 255, 0);
}
#btn_group button
{
border: 1px;
/* border: 1px;
color:rgb(255, 255, 255);
padding: 30px;
align-items: center;
text-align: center;
font-size: 40px;
background-color: rgba(255,255,255,0.5);
background-color: rgba(255,255,255,0.5);*/
}
#btn_group button:hover
{
background-color: rgb(167, 255, 246);
background-color: hsl(253, 100%, 16%);
box-shadow: 0px 15px 20px #2f016466;
color: #fff;
transform: translateY(-7px);
}
\ No newline at end of file
......
import React from 'react';
import './Home.css';
import './Home.css?v=1.0';
const Home = ( { history } ) =>
......@@ -7,13 +7,13 @@ const Home = ( { history } ) =>
return (
<>
<div id='root'>
<div id>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
</head>
<div className='home_display'>
<center id='home'>
<div className='animated infinite pulse'>findyourcolor</div>
<div className='animated fadeInDown'>findyourcolor</div>
</center>
<div id="btn_group">
<button id="soo_btn2" onClick={ () => {history.push("/test")}}>test</button>
......
......@@ -20,15 +20,53 @@
}
#result
{
border: 0%;
border: none;
border-radius: 45px;
width: 140px;
height: 45px;
color:rgb(0, 0, 0);
justify-content: center;
align-items: center;
text-align: center;
font-family: "button";
font-size: 80%;
background-color: hsl(182, 100%, 88%);
font-family: 'result', sans-serif;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 1000;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-size: 20px;
background-color: rgba(255, 255, 255, 0);
}
#next
{
border: none;
border-radius: 45px;
width: 140px;
height: 45px;
color:rgb(0, 0, 0);
justify-content: center;
align-items: center;
text-align: center;
font-family: 'result', sans-serif;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 1000;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
cursor: pointer;
outline: none;
font-size: 20px;
background-color: rgba(255, 255, 255, 0);
}
#result:hover
{
background-color: hsl(253, 100%, 16%);
box-shadow: 0px 15px 20px #2f016466;
color: #fff;
transform: translateY(-7px);
}
#question-count
{
font-size: 50px;
......@@ -62,6 +100,11 @@
font-family: "Q";
src: url("po.ttf");
}
@font-face
{
font-family: "result";
src: url("YummyCupcakes.ttf");
}
#btn_answer
{
border: 1px;
......
......@@ -126,21 +126,21 @@ const Test = ( { history } ) =>
return (
<div id='test'>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
</head>
{showScore ? (
<span className='score-section'>
<button id="result" onClick={() => handlePersonalScore(score_c,score_w)}>result</button>
<button className="animated infinite pulse" id="result" onClick={() => handlePersonalScore(score_c,score_w)}>result</button>
{num === 1 ?
(<div className = "season">
{score === "cool" ? (<button onClick={ () => {history.push("/test2")}}>next</button>)
: (<button onClick={ () => {history.push("/test3")}}>next</button>)}
{score === "cool" ? (<button id='next' onClick={ () => {history.push("/test2")}}>next</button>)
: (<button id='next' onClick={ () => {history.push("/test3")}}>next</button>)}
</div>)
: (<div>click result!</div>)}
</span>
) : (
<>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"></link>
</head>
<div className='question-section'>
<div id='question-count'>
<span>Question {currentQuestion + 1}</span>/{questions.length}
......
......@@ -85,11 +85,11 @@ const handlePersonalScore_cool = (score_c_s,score_c_w) =>{ //함수2_여쿨, 겨
<div id='test'>
{showScore_c ? (
<span className='score-section'>
<button onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button>
<button id="result" onClick={() => handlePersonalScore_cool(score_c_s,score_c_w)}>result</button>
{num === 1 ?
(<div className = "season">
{score === "summer cool" ? (<button onClick={ () => {history.push("/summer")}}>next</button>)
: (<button onClick={ () => {history.push("/winter")}}>next</button>)}
{score === "summer cool" ? (<button id='next' onClick={ () => {history.push("/summer")}}>next</button>)
: (<button id='next' onClick={ () => {history.push("/winter")}}>next</button>)}
</div>)
: (<div>click me!</div>)}
</span>
......
......@@ -86,13 +86,13 @@ const handlePersonalScore_warm = (score_w_s,score_w_a) =>{ //함수2_봄, 가을
<div id='test'>
{showScore_w ? (
<span className='score-section'>
<button onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
<button id="result" onClick={() => handlePersonalScore_warm(score_w_s,score_w_a)}>result</button>
{num === 1 ?
(<div className = "season">
{score === "spring warm" ? (<button onClick={ () => {history.push("/spring")}}>next</button>)
: (<button onClick={ () => {history.push("/autumn")}}>next</button>)}
{score === "spring warm" ? (<button id='next' onClick={ () => {history.push("/spring")}}>next</button>)
: (<button id='next' onClick={ () => {history.push("/autumn")}}>next</button>)}
</div>)
: (<div>click me!</div>)}
: (<div className="animated infinite pulse">click me!</div>)}
</span>
) : (
<>
......