diff --git a/FE_0430/PARK_JI_HYOUN/index.html b/FE_0430/PARK_JI_HYOUN/index.html new file mode 100644 index 0000000..4168805 --- /dev/null +++ b/FE_0430/PARK_JI_HYOUN/index.html @@ -0,0 +1,68 @@ + + + + + + + + + + + Frontend Mentor | Results summary component + + + + + +
+
+
+

Your Result

+
+
76
+
of 100
+
+ + +

Great

+

You scored higher than 65% of
the people who have taken
these tests.

+
+
+

Summary

+
    +
  • + Reaction Icon +   Reaction + 80   /   100 +
    • +
  • + Memory Icon +   Memory + 92   /   100 +
    • +
  • + Verbal Icon +   Verbal + 61   /   100 +
    • +
  • + Visual Icon +   Visual + 72   /   100 +
    • +
+ + + +
+
+
+ Challenge by Frontend Mentor. + Coded by 박지현. +
+
+ + diff --git a/FE_0430/PARK_JI_HYOUN/style.css b/FE_0430/PARK_JI_HYOUN/style.css new file mode 100644 index 0000000..258535e --- /dev/null +++ b/FE_0430/PARK_JI_HYOUN/style.css @@ -0,0 +1,176 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #f4f4f9; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 200vh; + font-family: 'Hanken Grotesk', sans-serif; + border-radius: 20px; + width: 45%; + +} + +.container { + width: 90%; + max-width: 800px; +} + +.card { + display: flex; + background: white; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + overflow: hidden; +} + +.score { + white-space: nowrap; + line-height: 2.5; + margin-bottom: 0; + padding: 0; + font-weight: 800; + margin-left: auto; + } + +.out-of { + font-size: 14px; + opacity: 0.7; + line-height: 0; + padding: 0; +} + +.result, .summary { + padding: 20px; + color: #333; + flex: 1; +} + +.result { + background-image: linear-gradient(to bottom, hsl(252, 100%, 67%) 0%, hsl(241, 81%, 54%) 100%); + color: white; + text-align: center; + border-radius: 20px; +} + + +.result h3 { + font-family: 'Hanken Grotesk', sans-serif; + margin: 0; + color:white; + opacity: 0.7; +} + +.summary h3 {font-family: 'Hanken Grotesk', sans-serif; + margin: 0; + color: hsl(224, 30%, 27%); +} + +.result .score-circle { + font-size: 55px; + width: 150px; + height: 150px; + line-height: 100px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; + background: linear-gradient(180deg, hsla(256, 72%, 46%, 1) 0%, hsla(241, 72%, 46%, 0) 100%); + border-radius: 50%; + display: block; + +} + +.result .status { + font-size: 24px; + font-weight: bold; + font-family: 'Hanken Grotesk', sans-serif; +} + +.result .detail { + font-family: 'Hanken Grotesk', sans-serif; + font-size: 18px; + margin-top: 5px; + opacity: 0.7; +} + +.summary ul { + font-family: 'Hanken Grotesk', sans-serif; + list-style: none; + padding: 0; + margin-left: auto; +} + +.summary ul li { + display: flex; + font-family: 'Hanken Grotesk', sans-serif; + align-items: center; + margin-bottom: 10px; + justify-content: space-between; + padding: 10px 20px; + background-color: #f3f4fe; + border-radius: 10px; + font-size: 18px; + margin-left: auto; + font-weight : 800; +} + +.reaction strong { + color: hsl(0, 100%, 67%); + margin-right: auto; + } +.memory strong { + color: hsl(39, 100%, 56%); + margin-right: auto; +} +.verbal strong { + color: hsl(166, 100%, 37%); + margin-right: auto; +} +.visual strong { + color: hsl(234, 85%, 45%); + margin-right: auto; +} + +.part1 { color: hsl(0, 0%, 20%); } +.slash, .part2 { color: hsl(0, 0%, 80%); } + +button { + font-family: 'Hanken Grotesk', sans-serif; + display: block; + width: calc(100% - 0px); + padding: 0px; + margin-top: 20px; + background-color: hsl(224, 30%, 27%); + color: white; + border: none; + border-radius: 20px; + font-size: 16px; + cursor: pointer; + height: 50px; +} + +button:hover { + background-color: #4949d6; +} + + +.summary ul li.reaction { + background-color: hsl(0, 100%, 67%,0.1); + +} + +.summary ul li.memory { + background-color: hsl(39, 100%, 56%,0.1); +} + +.summary ul li.verbal { + background-color: hsl(166, 100%, 37%,0.1); +} + +.summary ul li.visual { + background-color: hsl(234, 85%, 45%,0.1); +}