Skip to content

박지현_0430 HTML CSS 과제 #14

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

Open
parkjihyoun wants to merge 2 commits into
base: main
Choose a base branch
from
Open

박지현_0430 HTML CSS 과제 #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
963f1ca
박지현_0430 HTML CSS 과제
parkjihyoun May 3, 2024
a65ded2
박지현_0430 HTML CSS 과제
parkjihyoun May 3, 2024
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
68 changes: 68 additions & 0 deletions FE_0430/PARK_JI_HYOUN/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<link rel="stylesheet" href="./style.css">
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap" rel="stylesheet">

<title>Frontend Mentor | Results summary component</title>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="result">
<h3>Your Result</h3>
<div class="score-circle">
<div class="score">76</div>
<div class="out-of">of 100</div>
</div>


<p class="status">Great</p>
<p class="detail">You scored higher than 65% of<br>the people who have taken<br>these tests.</p>
</div>
<div class="summary">
<h3>Summary</h3>
<ul>
<li class="reaction">
<img src="./assets/images/icon-reaction.svg" alt="Reaction Icon">
<strong> &nbsp Reaction</strong>
<span class="part1">80 &nbsp</span><span class="slash"> / </span><span class="part2">&nbsp 100</span>
</li>
<li class="memory">
<img src="./assets/images/icon-memory.svg" alt="Memory Icon">
<strong> &nbsp Memory</strong>
<span class="part1">92 &nbsp</span><span class="slash"> / </span><span class="part2">&nbsp 100</span>
</li>
<li class="verbal">
<img src="./assets/images/icon-verbal.svg" alt="Verbal Icon">
<strong> &nbsp Verbal</strong>
<span class="part1">61 &nbsp</span><span class="slash"> / </span><span class="part2">&nbsp 100</span>
</li>
<li class="visual">
<img src="./assets/images/icon-visual.svg" alt="Visual Icon">
<strong> &nbsp Visual</strong>
<span class="part1">72 &nbsp</span><span class="slash"> / </span><span class="part2">&nbsp 100</span>
</li>
</ul>


<button>Continue</button>
</div>
</div>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.your-website.com">박지현</a>.
</div>
</div>
</body>
</html>
176 changes: 176 additions & 0 deletions FE_0430/PARK_JI_HYOUN/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}