How to use svgs in a code

any one with tips or ideas on how i can worth with svgs in my challenge?

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="card">
        <div class="card-container">
    <section class="result">
        <h2 class="title">Your result</h2>
        <div class="circle">
            <h1>76</h1>
            <p>0f 100</p>
        </div>
        <b>Great</b>
        <p class="info"> You scored higher than 65% of the people who have taken these tests.</p>
    </section>
    <section class="summary">
        <h3 class="title">Summary</h3>
        <div class="rows">
            <div class="row">
                <div class="badge">
                    <div class="icon-conatiner">
                        <span class="eicon-1"></span>
                       </div>
                        <img src=".assets/images/icon-reaction.svg" alt="reaction">
                    <b>Reaction</b>
                </div>
                <p><b>80</b>/100</p>
            </div>
            <div class="row">
                <div class="badge">
                    <div class="icon-conatiner">
                        <span class="eicon-2"></span>
                       </div>
                       <img src=".assets/images/icon-memory.svg" alt="memory">
                    <b>memory</b>
                </div>
                <p><b>92</b>/100</p>
            </div>
            <div class="row">
                <div class="badge">
                    <div class="icon-conatiner">
                        <span class="eicon-3"></span>
                       </div>
                       <img src=".assets/images/icon-verbal.svg" alt="verbal" class="verbal">
                    <b>verbal</b>
                </div>
                <p><b>61</b>/100</p>
            </div>
            <div class="row">
                <div class="badge">
                   <div class="icon-conatiner">
                    <span class="eicon-4"></span>
                   </div>
                   <img src=".assets/images/icon-visual.svg" alt="visual">
                    <b>visual</b>
                </div>
                <p><b>72</b>/100</p>
            </div>
        </div>
        <button class="btn">Continue</button>
    </section>
</div>
</div>
</body>
</html>
:root{
  --light-red: hsl(0, 100%, 67%);
  --orangey-yellow: hsl(39, 100%, 56%);
  --green-teal: hsl(166, 100%, 37%);
  --cobalt-blue: hsl(234, 85%, 45%);
  --light-slate-blue: hsl(252, 100%, 67%);
  --light-royal-blue: hsl(241, 81%, 54%);
  --violet-blue: hsla(256, 72%, 46%, 1);
  --persian-blue: hsla(241, 72%, 46%, 0);
  --white: hsl(0, 0% 100%);
  --pale-blue: hsl(221, 100%, 96%);
  --light-lavender: hsl(241, 100%, 89%);
  --dark-grey-blue: hsl(224, 30%, 27%);
}
* {
  Box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family:'Roboto', sans-serif;
}
body{
    background-color: var(--pale-blue);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card{
    box-shadow: rgba(0, 0, 0, .24) 0px 3px 8px;
    width: 650px;
    border-radius: 2rem;
    background-color: var(--white);
}
.card-container{
    display: flex;
    justify-content: space-between;
}
.result{
    width: 50%;
    padding: 1.5rem 2rem;
    border-radius: 2rem;
    background: linear-gradient(to bottom, var(--light-slate-blue), var(--light-royal-blue));
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.result .title{
    color: var(--light-lavender);
    margin-bottom: 1rem;
}
 .result .circle{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(to bottom, var(--violet-blue), var(--persian-blue));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.circle h1{
    color: var(--white);
    font-size: 4rem;
}
.circle p{
    color: var(--light-lavender);
}
.result b{
    color: var(--white);
    font-size: 1.5rem;
    margin-top: 1rem;
}
.result .info{
    color: var(--light-lavender);
    width: 200px;
}
.summary{
   width: 50%;
   padding: 1.5rem 2rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.summary .title{
    color: black;
    font-weight: 800;
}
.rows{
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.row{
    display: flex;
    border-radius: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 1rem .5rem;
}
.row:nth-child(1){
    background-color: hsla(0, 100%, 67%, .2)
}
.row:nth-child(1) .badge b{
    color: var(--light-red);
}
.row:nth-child(2){
    background-color: hsl(39, 100%, 56%, .2)
}
.row:nth-child(2) .badge b{
    color: var(--orangey-yellow);
}
.row:nth-child(3){
    background-color: hsl(166, 100%, 37%, .2);
}
.row:nth-child(3) .badge b{
    color: var(--green-teal);
}
.row:nth-child(4){
    background-color: hsl(234, 85%, 45%, .2);
}
.row:nth-child(4) .badge b{
    color: var(--violet-blue);
}
.badge{
    display: flex;
    align-items: center;
    gap: .5rem;
}
.row p{
    color: gray
}
.row p b{
    color: var(--dark-grey-blue)
}
.btn{
    margin-top: auto;
    padding: 1rem;
    border: none;
    border-radius: 2rem;
    background: var(--dark-grey-blue);
    cursor: pointer;
    font-size: 1rem;
    color: white;
}
.btn:hover{
    background: linear-gradient(to bottom, var(--light-slate-blue), var(--light-royal-blue));
}
.icon-container{
    padding: 10px;
    float: left;
}
[class*="eicon-"]{
    display: block;
}

[class*="eicon-"]:before{
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-background-size: contain;
}
verbal{
    size: 100;
}

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

You are trying to load images from a folder called .assets, with a period at the start of the folder name. Is this correct?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.