I'm coding a Frontend Mentor project and have a question. I have no idea what i can do because I'd like to code navigation that change their height when i clicked on it. I tried set transform:scaleX(0) and next when i clicked it's roll down. But when i did it below my navigation item is free space and why it's dont scale to 0?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Overpass", sans-serif;
font-size: 16px;
}
.nav {
position: absolute;
display: flex;
flex-direction: column;
left: 50%;
top: 15%;
width: 90%;
min-height: 70%;
transform: translateX(-50%);
background-color: hsl(0deg, 0%, 100%);
color: #000;
border-radius: 0.3em;
padding: 1em;
letter-spacing: 2px;
z-index: 5;
text-align: center;
}
.nav__lists {
flex-grow: 1;
}
.nav .first {
transform: scaleX(0);
}
.nav__list {
padding: 0.5em 0;
font-size: 1.2rem;
font-weight: bold;
list-style-type: none;
}
.nav__list-items {
background-color: hsl(240deg, 2%, 79%);
font-size: 0.8em;
line-height: 1.5em;
padding: 1em 0;
}
.nav__list-items h4 {
padding: 0.2em 0;
}
.nav__user {
flex-basis: 30%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
border-top: 1px solid hsl(240deg, 2%, 79%);
padding: 1em 0;
}
.nav__user-btn {
letter-spacing: 2px;
padding: 1em 2.5em;
background: none;
border: none;
font-weight: bold;
font-size: 1rem;
}
.nav__user-btn--red {
background: linear-gradient(hsl(13deg, 100%, 72%), hsl(353deg, 100%, 62%));
border-radius: 1.5em;
color: hsl(0deg, 0%, 100%);
}
.header {
margin-bottom: 4em;
padding: 0 1em;
position: relative;
min-height: 100vh;
z-index: -1;
background: linear-gradient(hsl(13deg, 100%, 72%), hsl(353deg, 100%, 62%));
color: hsl(0deg, 0%, 100%);
text-align: center;
border-radius: 0 0 0 6em;
overflow: hidden;
}
.header__img {
position: absolute;
top: 10%;
left: -70%;
transform: scale(0.8);
transform-origin: top left;
z-index: -1;
}
.header__top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3em 0;
}
.header__top-burger .close {
display: none;
}
.header__top-logo {
height: 100%;
}
.header__title {
padding: 2em 0;
}
.header__btns {
padding-top: 2em;
}
.header__btns-btn {
font-weight: 700;
border: 1px solid hsl(0deg, 0%, 100%);
font-size: 1rem;
padding: 0.8em 1em;
color: #fff;
margin-right: 1em;
border-radius: 1.2em;
}
.header__btns-btn--white {
background-color: hsl(0deg, 0%, 100%);
color: hsl(353deg, 100%, 62%);
}
.header__btns-btn--red {
background: none;
}
.hide-list {
display: none;
}
.nav__roll {
transform: scaleX(100%);
}/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<title>Frontend Mentor | [Blogr]</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Overpass:wght#300;600&family=Ubuntu:wght#400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<nav class="nav">
<div class="nav__lists">
<ul class="nav__list">
<li class="nav__list-title">
Product
<span class="arrow"
><svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="7"
>
<path
fill="none"
stroke="#FF7B86"
stroke-width="2"
d="M1 1l4 4 4-4"
/></svg
></span>
</li>
<li class="nav__list-items first">
<h4 class="nav__list-item">Overview</h4>
<h4 class="nav__list-item">Pricing</h4>
<h4 class="nav__list-item">Marketplace</h4>
<h4 class="nav__list-item">Features</h4>
<h4 class="nav__list-item">Integrations</h4>
</li>
</ul>
<ul class="nav__list">
<li class="nav__list-title">
Company
<span class="arrow"
><svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="7"
>
<path
fill="none"
stroke="#FF7B86"
stroke-width="2"
d="M1 1l4 4 4-4"
/></svg
></span>
</li>
<li class="nav__list-items">
<h4 class="nav__list-item">About</h4>
<h4 class="nav__list-item">Team</h4>
<h4 class="nav__list-item">Blog</h4>
<h4 class="nav__list-item">Careers</h4>
</li>
</ul>
<ul class="nav__list">
<li class="nav__list-title">
Connect
<span class="arrow"
><svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="7"
>
<path
fill="none"
stroke="#FF7B86"
stroke-width="2"
d="M1 1l4 4 4-4"
/></svg
></span>
</li>
<li class="nav__list-items">
<h4 class="nav__list-item">Contact</h4>
<h4 class="nav__list-item">Newsletter</h4>
<h4 class="nav__list-item">LinkedIn</h4>
</li>
</ul>
</div>
<div class="nav__user">
<button class="nav__user-btn">Login</button
><button class="nav__user-btn nav__user-btn--red">
Sign Up
</button>
</div>
</nav>
<header class="header">
<svg
class="header__img"
width="1324"
height="1323"
viewBox="0 0 1324 1323"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
x1=".695%"
y1="0%"
x2="99.305%"
y2="100%"
id="a"
>
<stop stop-color="#FF8F71" offset="0%" />
<stop stop-color="#FF3E55" offset="100%" />
</linearGradient>
</defs>
<path
d="M821.895188,497.739327 L821.895188,825.739327 L493.895188,825.739327 L493.895188,597.739327 C493.895188,542.510852 538.666713,497.739327 593.895188,497.739327 L821.895188,497.739327 Z M276.655938,496.460979 C367.230637,496.460979 440.655938,569.88628 440.655938,660.460979 C440.655938,751.035678 367.230637,824.460979 276.655938,824.460979 C186.081239,824.460979 112.655938,751.035678 112.655938,660.460979 C112.655938,569.88628 186.081239,496.460979 276.655938,496.460979 Z M822.227687,111.489551 L822.227687,439.489551 L594.227687,439.489551 C538.999212,439.489551 494.227687,394.718026 494.227687,339.489551 L494.227687,339.489551 L494.227687,111.489551 L822.227687,111.489551 Z M440.061253,110.58581 L440.061253,338.58581 C440.061253,393.814285 395.289728,438.58581 340.061253,438.58581 L112.061253,438.58581 L112.061253,110.58581 L440.061253,110.58581 Z"
transform="rotate(22 67.652 1066.199)"
fill="url(#a)"
fill-rule="evenodd"
/>
</svg>
<div class="header__top">
<div class="header__top-logo">
<svg
width="101"
height="40"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 30.803V1.486h10.653c1.982 0 3.695.31 5.14.93 1.446.619 2.56 1.5 3.345 2.642.785 1.142 1.177 2.484 1.177 4.026 0 1.404-.303 2.636-.909 3.695a6.48 6.48 0 01-2.56 2.498c1.487.578 2.643 1.494 3.469 2.746.826 1.253 1.239 2.732 1.239 4.439 0 1.707-.44 3.18-1.322 4.418-.88 1.239-2.12 2.202-3.716 2.89-1.596.688-3.482 1.033-5.657 1.033H0zM5.946 6.565v6.73h4.046c1.35 0 2.388-.282 3.118-.846.73-.564 1.094-1.397 1.094-2.498 0-1.101-.365-1.94-1.094-2.519-.73-.578-1.769-.867-3.118-.867H5.946zm0 19.159h4.624c1.542 0 2.732-.33 3.572-.991.84-.66 1.26-1.61 1.26-2.85 0-1.238-.42-2.188-1.26-2.848-.84-.66-2.03-.991-3.572-.991H5.946v7.68zm19.282 5.079V0h5.781v30.803h-5.78zm20.893.619c-1.624 0-3.124-.29-4.5-.867a10.94 10.94 0 01-3.593-2.416 10.96 10.96 0 01-2.374-3.654c-.564-1.404-.846-2.931-.846-4.583 0-1.652.289-3.173.867-4.563a11.354 11.354 0 012.415-3.654 10.96 10.96 0 013.634-2.436c1.39-.578 2.91-.867 4.562-.867 1.625 0 3.125.289 4.501.867a10.94 10.94 0 013.592 2.416 11.01 11.01 0 012.375 3.633c.564 1.39.846 2.911.846 4.563 0 1.651-.289 3.179-.867 4.583a11.297 11.297 0 01-2.416 3.675 10.96 10.96 0 01-3.633 2.436c-1.39.578-2.911.867-4.563.867zm.083-5.203c1.046 0 1.982-.275 2.808-.825.825-.551 1.48-1.301 1.96-2.25.483-.95.723-2.03.723-3.242 0-1.211-.24-2.292-.722-3.241-.482-.95-1.136-1.7-1.961-2.25-.826-.551-1.762-.826-2.808-.826-1.046 0-1.982.275-2.808.825-.826.55-1.48 1.301-1.961 2.25-.482.95-.723 2.03-.723 3.242 0 1.211.241 2.292.723 3.241.482.95 1.135 1.7 1.961 2.25.826.551 1.762.826 2.808.826zm24.155 3.964a9.13 9.13 0 01-3.86-.826 9.492 9.492 0 01-3.118-2.291c-.881-.977-1.57-2.12-2.065-3.427-.495-1.308-.743-2.719-.743-4.233 0-1.569.255-3.02.764-4.356a10.614 10.614 0 012.147-3.489 10.174 10.174 0 013.22-2.333c1.225-.564 2.554-.846 3.985-.846 1.404 0 2.67.282 3.799.846a7.402 7.402 0 012.807 2.457l.124-2.684h5.327v19.2c0 1.68-.269 3.207-.805 4.584-.537 1.376-1.301 2.56-2.292 3.55a10.231 10.231 0 01-3.53 2.292c-1.363.537-2.87.805-4.522.805-1.624 0-3.083-.254-4.376-.764a10.468 10.468 0 01-3.386-2.126 10.035 10.035 0 01-2.271-3.18L67.097 32a5.452 5.452 0 001.92 1.879c.784.454 1.672.681 2.663.681 1.074 0 2.003-.24 2.787-.723.785-.481 1.397-1.156 1.838-2.023.44-.867.66-1.879.66-3.035v-1.775a7.793 7.793 0 01-2.828 2.333c-1.143.564-2.402.846-3.778.846zm1.404-5.12c1.018 0 1.92-.254 2.704-.764a5.556 5.556 0 001.879-2.064c.468-.867.702-1.851.702-2.952 0-1.102-.234-2.086-.702-2.953a5.556 5.556 0 00-1.879-2.064c-.784-.51-1.686-.764-2.704-.764-1.019 0-1.92.255-2.705.764a5.556 5.556 0 00-1.879 2.064c-.468.867-.702 1.851-.702 2.953 0 1.1.234 2.085.702 2.952a5.556 5.556 0 001.88 2.064c.784.51 1.685.764 2.704.764zm15.607 5.74V9h5.327l.206 3.304c.55-1.157 1.294-2.044 2.23-2.664.936-.62 2.037-.929 3.303-.929.386 0 .77.035 1.156.103.386.07.73.159 1.033.269l-.62 5.698a4.361 4.361 0 00-.929-.227 7.495 7.495 0 00-.97-.062c-1.597 0-2.822.489-3.675 1.466-.853.977-1.28 2.36-1.28 4.15v10.694h-5.78z"
fill="#FFF"
fill-rule="nonzero"
/>
</svg>
</div>
<div class="header__top-burger">
<svg
class="burger"
width="32"
height="18"
xmlns="http://www.w3.org/2000/svg"
>
<g fill="#FFF" fill-rule="evenodd">
<path d="M0 0h32v2H0zM0 8h32v2H0zM0 16h32v2H0z" />
</g>
</svg>
<svg
class="close"
width="26"
height="26"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M23.607.98l1.414 1.413L14.414 13l10.607 10.607-1.414 1.414L13 14.414 2.393 25.021.98 23.607 11.586 13 .98 2.393 2.393.98 13 11.586 23.607.98z"
fill="#FFF"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
<h1 class="header__title">A modern publishing platform</h1>
<p class="header__text">
Grow your audience and build your online brand
</p>
<div class="header__btns">
<button class="header__btns-btn header__btns-btn--white">
Start for Free</button
><button class="header__btns-btn header__btns-btn--red">
Learn More
</button>
</div>
</header>
<main class="main">
<section>
<article class="article">
<h2 class="article__title">Designed for the future</h2>
<div class="article__content"></div>
</article>
<article class="article">
<h2 class="article__title">
Introducing an extensible editor
</h2>
<div class="article__content">
Blogr features an exceedingly intuitive interface which
lets you focus on one thing: creating content. The
editor supports management of multiple blogs and allows
easy manipulation of embeds such as images, videos, and
Markdown. Extensibility with plugins and themes provide
easy ways to add functionality or change the looks of a
blog.
</div>
</article>
<article class="article">
<h2 class="article__title">Robust content management</h2>
<div class="article__content">
Flexible content management enables users to easily move
through posts. Increase the usability of your blog by
adding customized categories, sections, format, or flow.
With this functionality, you’re in full control.
</div>
</article>
</section>
<section class="violet">
<article class="article">
<h2 class="article__title">
State of the Art Infrastructure
</h2>
<div class="article__content">
With reliability and speed in mind, worldwide data
centers provide the backbone for ultra-fast
connectivity. This ensures your site will load
instantly, no matter where your readers are, keeping
your site competitive.
</div>
</article>
</section>
<section>
<div class="section__logo"></div>
<article class="article">
<h2 class="article__title">Free, open, simple</h2>
<div class="article__content">
Blogr is a free and open source application backed by a
large community of helpful developers. It supports
features such as code syntax highlighting, RSS feeds,
social media integration, third-party commenting tools,
and works seamlessly with Google Analytics. The
architecture is clean and is relatively easy to learn.
</div>
</article>
<article class="article">
<h2 class="article__title">Powerful tooling</h2>
<div class="article__content">
Batteries included. We built a simple and
straightforward CLI tool that makes customization and
deployment a breeze, but capable of producing even the
most complicated sites.
</div>
</article>
</section>
</main>
<footer class="footer">
<h2 class="footer__title"></h2>
<ul class="footer__list">
<li class="footer__list-title">Product</li>
<li class="footer__list-item">Overview</li>
<li class="footer__list-item">Pricing</li>
<li class="footer__list-item">Marketplace</li>
<li class="footer__list-item">Features</li>
<li class="footer__list-item">Integrations</li>
</ul>
<ul class="footer__list">
<li class="footer__list-title">Company</li>
<li class="footer__list-item">About</li>
<li class="footer__list-item">Team</li>
<li class="footer__list-item">Blog</li>
<li class="footer__list-item">Careers</li>
</ul>
<ul class="footer__list">
<li class="footer__list-title">Connect</li>
<li class="footer__list-item">Contact</li>
<li class="footer__list-item">Newsletter</li>
<li class="footer__list-item">LinkedIn</li>
</ul>
</footer>
</body>
</html>
I know that my code is bad but could you help me what can i do
Related
I have a svg icon and a span element side by side. When the text overflows inside the span element, the svg also comes down along with it. I don't want it to happen.
Here is a of what I'm doing.
As you can see, the arrow icon is proper in Section 1 but in Section 2, it comes down with the text.
Here is the HTML code -
.rightContent {
border: 2px solid green;
height: 100vh;
overflow-y: scroll;
}
.sectionHeading {
background: #f7f9fa;
text-align: left;
font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02rem;
font-size: 1rem;
padding-top: .75rem;
padding-bottom: 1.05rem;
}
.sectionHeading p {
padding: 0;
margin: 0;
}
.sectionHeading svg {
float: right;
}
.sectionHeading small {
font-size: 0.75rem;
font-weight: 500;
}
<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
<!-- Section 1: Introduction -->
<div class="row">
<div class="card">
<div class="sectionHeading">
<span>Section 1: Introduction</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<p></p>
<small>14 / 14 | 1hr 5min</small>
</div>
</div>
</div>
<!-- Section 2: Experience -->
<div class="row">
<div class="card">
<div class="sectionHeading">
<span>Section 2: Experiences In The Corporate World</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
<p></p>
<small>19 / 19 | 2hr 15min</small>
</div>
</div>
</div>
Most of the questions already present deal with aligning icons with text, but as I mentioned earlier, I want to align icons with span element and keep it fixed there, instead of aligning it with text.
Please feel free to share your inputs. I'll be grateful to learn from others since I'm still learning CSS. Thank you.
Please set max-width or width of span tag. As width svg tag is 16px, you can set that max-width of is calc(100% - 16px).
Try it
<style>
.sectionHeading span{
display: inline-block;
max-width: calc(100% - 16px);
}
</style>
In your case the best choice is using positions,using your .sectionHeading or.card as the relative element.
Try it:
.sectionHeading { /* you can also use your div .card */
position: relative;
}
svg { /* here you can also use a class name */
position: absolute;
top: 0;
right: 0;
}
Be in mind that maybe you will need to add a padding to your relative element, otherwise your svg will be leaning the border.
You had a few small problems like an empty p tag which I fixed.
I wrapped small & span tags in a container and Since you're using bootstrap, I added d-flex justify-content-between classes to sectionHeading. This fixed the problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box
}
.rightContent {
border: 2px solid green;
height: 100vh;
overflow-y: scroll;
}
.sectionHeading {
background: #f7f9fa;
text-align: left;
font-family: sf pro display, -apple-system, BlinkMacSystemFont, Roboto, segoe ui, Helvetica, Arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.02rem;
font-size: 1rem;
padding-top: .75rem;
padding-bottom: 1.05rem;
}
.sectionHeading p {
padding: 0;
margin: 0;
}
.sectionHeading svg {
float: right;
}
.sectionHeading small {
font-size: 0.75rem;
font-weight: 500;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="rightContent col col-lg-3 col-md-3 sol-sm-3" style="border: 2px solid green;">
<!-- Section 1: Introduction -->
<div class="row">
<div class="card">
<div class="sectionHeading d-flex justify-content-between">
<div>
<span>Section 1: Introduction</span><br/>
<small>14 / 14 | 1hr 5min</small>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
</div>
</div>
</div>
<!-- Section 2: Experience -->
<div class="row">
<div class="card">
<div class="sectionHeading d-flex justify-content-between">
<div>
<span>Section 2: Experiences In The Corporate World</span><br/>
<small>19 / 19 | 2hr 15min</small>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down" viewBox="0 0 16 16">
<path d="M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z"/>
</svg>
</div>
</div>
</div>
today wanted to set the size of a background on a svg using the background-size property, but it didn't worked because the background wasn't an image, but it was a normal color (#ecf2f8)
here is what i want to do:
here is what i did:
here is my code:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
}
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
Have a nice day!
Try using padding to increase the size of the background around your element:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: 10px;
}
The px value you pick depends on what you want, just play around with different values and see if it gets your desired output.
Example code snippet with padding in CSS:
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: 10px;
}
<html>
<head>
<title>while</title>
</head>
<body>
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
</body>
</html>
Html-css-js snippet of code: Code
You could use padding to resize the background of your icon. You can also resize the SVG icon by using transform: scale(1);
#svg-social {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 100px;
padding: .5em; /* You could also use px */
transform: scale(1.5); /*Resize/scale the SVG*/
}
<p id="main-text">
Ever been in a room and felt like something was missing?<br> Perhaps
it felt slightly bare and uninviting. I’ve got some<br> simple tips
to help you make any room feel complete.</p>
<div id="author">
<img src="/images/avatar-michelle.jpg" alt="Michelle Appleton avatar" id="avatar">
<h5 id="name">Michelle Appleton</h5>
<p id="date">28 Jun 2020</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="13" id="svg-social">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
<div id="socials">
<div id="triangle"></div>
</div>
</div>
I added padding and transform:scale() in the CSS, please do check the snippet if it is your desired output
You need to create a div and add the background to the div, because i don't know why, with the padding property the svg disappears, here is the code:
<div id="svg1">
<svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="15" height="13">
<path fill="#6E8098"
d="M15 6.495L8.766.014V3.88H7.441C3.33 3.88 0 7.039 0 10.936v2.049l.589-.612C2.59 10.294 5.422 9.11 8.39 9.11h.375v3.867L15 6.495z" />
</svg>
</div>
#svg1 {
position: absolute;
right: 50px;
bottom: 45px;
background-color: #ecf2f8;
border-radius: 50px;
padding: 10px;
height: 30px;
width: 30px;
}
#arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* this will center the svg in the div horizontally and vertically */
My problem is when I'm going to level the icons side by side, even though I put the margin and padding I've already turned many sites, in an attempt to solve it I created this bar where the buttons are aligned as well as implemented an animation on top of them, but if I put the icons together in front of this bar, it loses the animation's integrity.
My goal is to join the icons in the upper right corner...... besides twitter/tumblr I still have 3 others...
I appreciate any and all help, I'm a beginner in programming.
/*icones tumblr, insta*/
.icones i {
display: inline-block;
width: 100%;
height: 30px;
padding: 0px 20px;
margin: 0px 5px;
}
ul {
position: absolute;
top:20%;
left: 45%;
transform: translate(-80%, -70%);
margin: 0%;
padding: 20px 0px;
background: rgb(228, 211, 228);
display: flex;
border-radius: 15px;
}
ul li a{
list-style: none;
text-align: center;
display: block;
}
#tumblr {
width: 25px;
padding-left: 700px;
}
#twitter {
width: 45px;
padding-left: 600px;
margin-top: 10px;
margin-bottom: 2em;
}
.container {
display: grid;
grid-template-columns: 4fr 2fr;
grid-template-rows: 100px 50px;
grid-template-columns: auto auto auto auto auto auto;
}
#navbar {
display: flex;
flex-direction: column;
align-items: center;
grid-column: 1 / 5;
}
<nav class="container" style="background-color:#7B68EE; height:60px; width: 100%; text-align: center; border: 3px solid">
<div class="navbar">
<div id="nave">
<p style="text-align:right; color:rgb(248, 233, 185)">
<ul>
<li> Folders</li>
<li> Files</li>
<li> Content</li>
<li> Home</li>
<li> Documents </li>
<li></li>
</ul>
<div class="navbar2">
<a href="#" class="hrv-icon-bounce">
<div id="tumblr">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"
class="svg-inline--fa fa-tumblr fa-w-10" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5
0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5
10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2
3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>
</div>
</a>
<a href="#" class="hrv-icon-bounce">
<div id="twitter">
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" class="svg-inline--fa fa-twitter fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299
49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828
46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 0.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
</div>
</a>
</p>
</div>
</div>
</div>
</nav>
I've tidied and simplified your code and added some CSS styling to make it display how I think you probably want it. I've assumed you want the text menu centred and the social icons pushed to the right. I've added comments to the CSS so hopefully you can follow what I have done.
I've made the two parts of the nav bar into separate unordered lists (ul).
I am using a flex-box layout to position and size those two sections.
I set the text menu to be flex: 1 so it expands to fill most of the space in the nav bar. This pushes the social icons to the right hand end of the bar.
One final piece of advice to you as you begin programming:
Get into the habit of being consistent with your indenting. Keeping your code tidy will help you as you develop your program or website. And it will help anyone else who may need to work on it later.
nav.navbar {
/* Use a flex-box layout to put the menu and icons side by side */
display: flex;
/* Centre the flex children (the ULs) vertically in the flex box */
align-items: center;
background-color:#7B68EE;
height:60px;
width: 100%;
text-align: center;
border: 3px solid;
}
nav.navbar .menu {
/* Removes standard list styling. Hide bullets, remove padding. */
list-style: none;
padding: 0;
/* Make menu expand to fill most of the space in the menubar */
flex: 1;
}
nav.navbar .menu li {
/* Makes menu list items display horizontally rather than vertically */
display: inline;
}
/* Add some spacing between the menu items */
nav.navbar .menu li:not(:first-child) {
padding-left: 1em;
}
nav.navbar .social-icons {
/* Removes standard list styling. Hide bullets, remove padding. */
list-style: none;
padding: 0;
}
nav.navbar .social-icons li {
/* Makes social list items display horizontally rather than vertically */
display: inline;
}
nav.navbar .social-icons svg {
width: 30px;
height: 30px;
}
<nav class="navbar">
<ul class="menu">
<li>Folders</li>
<li>Files</li>
<li>Content</li>
<li>Home</li>
<li>Documents</li>
</ul>
<ul class ="social-icons">
<li>
<a href="#" class="hrv-icon-bounce">
<svg class="tumblr" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="tumblr"role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path fill="currentColor" d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5
0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5
10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2
3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path>
</svg>
</a>
</li>
<li>
<a href="#" class="hrv-icon-bounce">
<svg class="twitter" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img"viewBox="0 0 512 512">
<path fill="currentColor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299
49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969
7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828
46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 0.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path>
</svg>
</a>
</li>
</ul>
</nav>
I use a RestAPI, it's giving me different size SVG. Some images are fit but some images don't fit.
Example: If you look at the border and image, you gonna understand.
The main problem is that; I don't know all pictures sizes, How can ı set this case? (İf it's given 100% height change the card height and ı don't want this.)
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/afg.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
<div className="countries__card card">
<div className="card__flag">
<LazyLoad
height={windowWidth >= 614 ? "210px" : '173px"'}
once
>
<img
width={windowWidth >= 614 ? "320px" : "100%"}
height={windowWidth >= 614 ? "210px" : '100%"'}
src="https://restcountries.eu/data/blr.svg"
alt="flag"
/>
</LazyLoad>
</div>
<div className="card__body">
<div className="card__body-name">
<h5>Lorem</h5>
</div>
<div className="card__body-infos">
<span className="country-capital">Capital: Lorem</span>
<span className="country-currencies">Currency: Lorem</span>
<span className="country-region">Region: Lorem</span>
</div>
</div>
<footer className="card__footer">
Go to detailed information.
</footer>
</div>
.card {
border: 2px solid black;
text-align: center;
margin-bottom: rem(50px);
width: 320px;
overflow: hidden;
animation: showCard 0.7s ease-out forwards;
img {
vertical-align: middle;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
&__body,
&__footer {
background: $skyblue;
}
&__body {
&-name {
color: $text-navy;
padding: rem(10px) 0;
font-size: rem(20px);
font-weight: $font-bold;
font-weight: normal;
border-bottom: 4px solid $text-navy;
}
&-infos {
padding: rem(15px) 0;
display: flex;
justify-content: center;
color: $text-navy;
span {
white-space: nowrap;
font-size: rem(14.3px);
}
span:not(:last-child) {
padding-right: rem(5px);
border-right: 3px solid $text-navy;
}
span:not(:first-child) {
padding-left: rem(5px);
}
}
}
&__footer {
border-top: 3px solid $text-navy;
padding: rem(15px) 0;
background: $text-navy;
cursor: pointer;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
There is no standard for flag dimensions. RestCountries provides flags in their true dimensions.
I created a 29 kB Single File Web Component that does all SVG flags in fixed dimensions (like most SVG flag Repos do).
And can use RestCountries (or any other SVG flag Repo) as alternative source:
https://flagmeister.github.io/
Alas, I did not create all crests, you picked the exact two I failed to complete: Afghanistan and Andorra for your screenshots. Those flags FlagMeister will default to RestCountries unless prevented with the detail setting.
<script src="https://flagmeister.github.io/elements.flagmeister.min.js"></script>
<style>
div {
display:grid;
grid-template-columns:repeat(6,100px);
gap:10px;
}
[nodetail] {
--flagmeisterdetail:99999;
}
</style>
<h3>RestCountries & FlagMeister (forced to no-detail)</h3>
<div>
<flag-af></flag-af>
<flag-af nodetail></flag-af>
<flag-by></flag-by>
<flag-by nodetail></flag-by>
<flag-ad></flag-ad>
<flag-ad nodetail></flag-ad>
</div>
If you can live with making local copies of all the flags. Then, if you add the following attribute to all SVGs, they will stretch to fit your <img> width and height.
preserveAspectRatio="none"
For instance, the Belarus flag becomes:
svg {
width: 300px;
height: 300px;
}
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="900" height="450" viewBox="0 0 1098 549" preserveAspectRatio="none">
<title>Flag of Belarus</title>
<rect fill="#C8313E" width="1098" height="549"/>
<rect y="366" fill="#4AA657" width="1098" height="183"/>
<rect fill="#FFF" width="122" height="549"/>
<g id="h">
<g id="q" fill="#C8313E" fill-rule="evenodd" transform="scale(5.304347826,9)">
<path d="M4,0h3v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1zM5,2h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM5,4h1v1h-1zM0,1h1v1h-1zM0,7h1v1h-1zM11,0h0.6v2h-.6zM11,7h.6v2h-.6zM2,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM2,11h1v1h-1zM8,9h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h1v-1h1zM8,11h1v1h-1zM0,15h1v1h-1zM11,14h.6v2h-.6z"/>
<path d="M0,18h1v-1h1v-1h1v-1h1v-1h1v-1h1v1h1v1h1v1h1v1h1v1h1v1h.6v4h-.6v1h-1v1h-1v1h-1v1h-1v1h-1v2.6h-2v-0.6h-1v-1h-1v-1h-1v-1h-1 v-3h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-3v1h2v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1zM0,22h1v1h-1zM11,25h.6v1h-.6zM9,27h1v1h1v1h.6v1.6h-.6v-.6h-1v-1h-1zM7,30h1v.6h-1z"/>
</g>
<use xlink:href="#q" transform="translate(122,0) scale(-1,1)"/>
</g>
<use xlink:href="#h" transform="translate(0,549) scale(1,-1)"/>
</svg>
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 2 years ago.
I have a problem with HTML/CSS. I'm trying to finish a challenge but i can't keep SVGs images in my div.
I will post screenshots of the attempted result then what i got.enter image description here
And here my code : `
html {
font-family: 'Poppins', sans-serif;
font-weight: 200;
background: hsl(0, 0%, 98%);
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
header {
width: 40%;
text-align: center;
}
header h1 {
font-weight: 200;
}
header strong {
font-weight: bold;
}
main {
height: 80vh;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.card {
position: static;
display: flex;
flex-direction: column;
background: white;
border-radius: 9px;
box-shadow: 8px 1px 20px grey;
padding-left: 40px;
padding-right: 40px;
margin: 20px;
}
.card:nth-child(1) {
border-top: 5px solid hsl(180, 62%, 55%);
position: relative;
top: 50%;
}
.card:nth-child(2) {
border-top: 5px solid hsl(0, 78%, 62%);
}
.card:nth-child(3){
border-top: 5px solid hsl(212, 86%, 64%);
position: relative;
top: 50%;
}
.card:nth-child(4) {
border-top: 5px solid hsl(34, 97%, 64%);
grid-column: 2;
}
.card svg {
position: absolute;
bottom: 10%;
right: 10%;
}
#media screen and (max-width:360px) {
html {
font-size: 12px;
}
header {
width: 100%;
margin-bottom: 10%;
}
main {
height: auto;
display: block;
}
.card {
height: 200px;
}
}
<!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="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,200;0,400;0,600;1,200;1,400;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Four card feature section</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
</head>
<body>
<header>
<h1>
Reliable, efficient delivery<br/>
<strong>Powered by Technology</strong>
</h1>
Our Artificial Intelligence powered tools use millions of project data points
to ensure that your project is successful
</header>
<main>
<div class="card">
<h2>Supervisor</h2>
Monitors activity to identify project roadblocks
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#676E74" d="M56.842 7.158c-9.526-9.563-24.902-9.525-34.428 0-8.025 8.026-9.45 20.44-3.525 30.003l-2.513 2.55-1.356 6.144 4.214 4.214 5.093-2.408 2.512-2.55a24.254 24.254 0 0030.003-3.525c9.563-9.526 9.525-24.902 0-34.428z"/><path fill="#474F54" d="M24.327 47.661l2.512-2.55a24.254 24.254 0 0030.003-3.525c9.563-9.526 9.525-24.902 0-34.428l-40.26 40.26 2.652 2.651 5.093-2.408z"/><path fill="#64E1DC" d="M54.213 9.787a20.56 20.56 0 00-14.585-6.041C28.236 3.746 19 12.98 19 24.372a20.564 20.564 0 006.041 14.586 20.564 20.564 0 0014.586 6.04c11.392 0 20.626-9.234 20.626-20.626a20.56 20.56 0 00-6.041-14.585z"/><path fill="#00C8C8" d="M60.254 24.372a20.56 20.56 0 00-6.041-14.585l-29.17 29.17A20.564 20.564 0 0039.627 45c11.392 0 20.626-9.235 20.626-20.627z"/><path fill="#EFEFF4" d="M56.239 23.41c-.184-.307-2.98-4.914-7.281-8.368-2.63-2.113-5.822-3.796-9.33-3.796-9.242 0-16.314 11.669-16.61 12.165l-.576.961.575.961c.184.309 2.98 4.916 7.28 8.37 2.631 2.112 5.823 3.795 9.33 3.795 9.243 0 16.315-11.668 16.612-12.165l.574-.96-.574-.962z"/><path fill="#DADAE5" d="M56.239 25.333l.574-.96-.574-.962c-.184-.308-2.98-4.915-7.281-8.369l-18.66 18.66c2.63 2.113 5.822 3.796 9.33 3.796 9.242 0 16.314-11.668 16.61-12.165z"/><path fill="#64E1DC" d="M43.604 20.396a5.607 5.607 0 00-3.976-1.65 5.632 5.632 0 00-5.626 5.626c0 1.551.631 2.958 1.65 3.976a5.609 5.609 0 003.976 1.65 5.632 5.632 0 005.625-5.626c0-1.55-.63-2.957-1.649-3.976z"/><path fill="#00C8C8" d="M45.253 24.372c0-1.55-.63-2.957-1.649-3.976l-7.952 7.952a5.608 5.608 0 003.976 1.65 5.632 5.632 0 005.625-5.626z"/><path fill="#676E74" d="M40.954 23.046a1.876 1.876 0 10-1.326 3.2 1.876 1.876 0 001.326-3.2z"/><path fill="#474F54" d="M41.503 24.372c0-.517-.21-.986-.55-1.326l-2.65 2.652a1.876 1.876 0 003.2-1.326z"/><path fill="#575C60" d="M20.333 43.667l-3.957-3.957L0 56.049l3.975 3.976L7.951 64l16.376-16.339z"/><path fill="#333637" d="M24.327 47.661l-3.994-3.994L3.975 60.025 7.951 64z"/></g></svg>
</div>
<div class="card">
<h2>Team Builder</h2>
Scans our talent network to create the optimal team for your project
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#EFEFF4" d="M64 14.454v41.788H0V14.454l3.75-3.787h56.5z"/><path fill="#DADAE5" d="M64 14.454v41.788H32V10.667h28.25z"/><path fill="#474F54" d="M0 0h64v15.515H0z"/><path fill="#32393F" d="M32 0h32v15.515H32z"/><g fill="#FF637B"><path d="M7.758 5.818h3.685v3.879H7.758zM15.128 5.818h3.685v3.879h-3.685zM22.497 5.818h3.685v3.879h-3.685z"/></g><path fill="#FF637B" d="M45.576 42.245V64H34.355v-3.71h-3.74V64H19.394V42.245l11.37-9.275h3.105z"/><path fill="#DADAE5" d="M11.636 22.303h41.697v3.879H11.636z"/><path fill="#C9C9D3" d="M32 22.303h20.364v3.879H32z"/><path fill="#E63950" d="M45.576 42.245V64H33.939v-3.71H32V32.97h1.435z"/><path fill="#EFEFF4" d="M30.061 45.576h3.878v3.879h-3.878z"/><path fill="#DADAE5" d="M32 45.576h1.939v3.879H32z"/><path fill="#676E74" d="M50.424 45.779l-2.452 2.706-15.487-13.526-15.488 13.526-2.452-2.706 17.94-15.718z"/><path fill="#474F54" d="M32 30.061l18.424 15.718-2.518 2.706L32 34.959z"/></g></svg>
</div>
<div class="card">
<h2>Calculator</h2>
Uses data from past projects to provide better delivery estimates
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#474F54" d="M64 0v41.25l-3.75 3.875H3.75L0 41.25V0z"/><path fill="#32393F" d="M64 0v41.25l-3.75 3.875H32V0z"/><path fill="#DADAE5" d="M22.625 50.875h18.75v11.25h-18.75z"/><path fill="#C9C9D3" d="M32 50.875h9.375v11.25H32z"/><path fill="#EFEFF4" d="M0 41.25h64v11.5H0z"/><path fill="#DADAE5" d="M32 41.25h32v11.5H32z"/><path fill="#EFEFF4" d="M15.125 60.25h33.75V64h-33.75z"/><path fill="#DADAE5" d="M32 60.25h16.875V64H32z"/><path fill="#549EF2" d="M20.75 7.5c-7.236 0-13.125 5.889-13.125 13.125S13.514 33.75 20.75 33.75s13.125-5.889 13.125-13.125S27.986 7.5 20.75 7.5zm0 18.75a5.631 5.631 0 01-5.625-5.625A5.631 5.631 0 0120.75 15a5.631 5.631 0 015.625 5.625 5.631 5.631 0 01-5.625 5.625z"/><g fill="#377FD2"><path d="M45.125 7.5H56.5v3.75H45.125zM37.625 7.5h3.75v3.75h-3.75zM45.125 22.5H56.5v3.75H45.125zM37.625 22.5h3.75v3.75h-3.75zM37.625 15H56.5v3.75H37.625zM37.625 30H56.5v3.75H37.625z"/></g></g></svg>
</div>
<div class="card">
<h2>Karma</h2>
Regularly evaluates our talent to ensure quality
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><g fill="none"><path fill="#676E74" d="M26.375 52.625h11.25V64h-11.25z"/><path fill="#333637" d="M32 52.625h5.625V64H32z"/><path fill="#4C545A" d="M22.625 47h18.75v9.375h-18.75z"/><path fill="#52585C" d="M32 47h9.375v9.375H32z"/><path fill="#FFDA2D" d="M45.012 36.725c-2.325 1.913-3.637 4.612-3.637 7.425V47h-18.75v-2.85c0-2.85-1.238-5.512-3.3-7.125-5.062-3.938-7.95-9.862-7.95-16.275a20.585 20.585 0 017.613-16.013C22.7 1.737 27.238 0 32 0c1.462 0 2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663 1.275 7.5-1.425 14.85-7.313 19.612z"/><path fill="#FDBF00" d="M45.012 36.725c-2.325 1.913-3.637 4.612-3.637 7.425V47H32V0c1.462 0 2.962.15 4.425.45 8.1 1.688 14.475 8.45 15.9 16.663 1.275 7.5-1.425 14.85-7.313 19.612z"/><path fill="#676E74" d="M18.875 45.125h26.25v3.75h-26.25z"/><path fill="#FF9100" d="M39.956 10.143l2.651 2.651-3.979 3.978-2.651-2.651z"/><path fill="#FDBF00" d="M25.372 24.727l2.651 2.651-3.979 3.979-2.651-2.651zM30.125 28.25h3.75v5.625h-3.75z"/><path fill="#FF9100" d="M38.628 24.727l3.979 3.979-2.651 2.651-3.979-3.979zM39.5 18.875h5.625v3.75H39.5z"/><path fill="#FDBF00" d="M24.044 10.143l3.979 3.979-2.651 2.65-3.979-3.978zM18.875 18.875H24.5v3.75h-5.625zM30.125 7.625h3.75v5.625h-3.75z"/><g fill="#FFDA2D"><path d="M0 18.875h7.625v3.75H0zM6.585 14.81l-5.75-3.75 2.08-3.12 5.75 3.75zM2.915 33.56l-2.08-3.12 5.75-3.75 2.08 3.12z"/></g><path fill="#FDBF00" d="M56.375 18.875H64v3.75h-7.625zM61.085 33.56l-5.75-3.75 2.08-3.12 5.75 3.75zM57.415 14.81l-2.08-3.12 5.75-3.75 2.08 3.12z"/><path fill="#FF9100" d="M32 7.625h1.875v5.625H32zM32 28.25h1.875v5.625H32z"/><path fill="#333637" d="M32 45.125h13.125v3.75H32z"/><path fill="#FDBF00" d="M32 11.375c-5.175 0-9.375 4.2-9.375 9.375s4.2 9.375 9.375 9.375 9.375-4.2 9.375-9.375-4.2-9.375-9.375-9.375z"/><path fill="#FF9100" d="M32 30.125v-18.75c5.175 0 9.375 4.2 9.375 9.375s-4.2 9.375-9.375 9.375z"/><path fill="#FFDA2D" d="M30.125 18.875h3.75v3.75h-3.75z"/><path fill="#FDBF00" d="M32 18.875h1.875v3.75H32z"/></g></svg>
</div>
</main>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Romain Desson.
</p>
</footer>
</body>
</html>
`
It looks like SVGs from card 2 and 4 are not recognized as a part of the card because they are placed at the position I want but as a child of the main and not the div.
Thanks in advance.
Try changing position:static to position: relative in .card class
.card {
position: relative;
display: flex;
flex-direction: column;
background: white;
border-radius: 9px;
box-shadow: 8px 1px 20px grey;
padding-left: 40px;
padding-right: 40px;
margin: 20px;
}