Hey there, I’m trying to stop duplicate my background image, I also tried to put “background-image: url(”") no-repeat;
When I try “no-repeat” my all image is going away. Here is my code’s
It didn’t work, how can I share all my code from visual studio core? Can I just past it here?
I’m actually using it with insert image, but the image is too big and I can’t move the text’s to other side.
That’s what I’m trying;
That’s what I have;
<div class="something">
<img src="./images/collaboration.svg" width="35%;" float="rigth;">
<h1>npm Orgs is powerful collaboration - for free</h1>
<ul>
<li>Encourage code discovery and re-use within teams</li>
<li>Publish and control acces to your own namespace</li>
<li>Manage public and private code with the same workflow</li>
</ul>
<a href="#">Sign up for Orgs</a>
<br> or, <a href="#">Learn more about Orgs</a>
</div>
.something {
text-align: center;
color: black;
padding-bottom: 100px;
background-color: rgb(49, 68, 88);
}
that’s actually all the css for this part of code, I mean the pictures I post it. If you need the all code I can do that
try it this way:
<div class="something">
<img src="./images/collaboration.svg" width="35%;" float="rigth;">
<div class="info">
<h1>npm Orgs is powerful collaboration - for free</h1>
<ul>
<li>Encourage code discovery and re-use within teams</li>
<li>Publish and control acces to your own namespace</li>
<li>Manage public and private code with the same workflow</li>
</ul>
<a href="#">Sign up for Orgs</a>
<br> or, <a href="#">Learn more about Orgs</a>
</div>
</div>
<style>
.something {
display: flex;
background-color: rgb(49, 68, 88);
}
</style>
1 Like
that didn’t actually changed but @sorinr “display: flex;”
did this;
so I’m in the right track I guess now:D
add in style:
.info {
display: flex;
flex-direction: column;
}
thats why i have wrapped the info stuff under a div that can be styled himself as you wish.
and on mobile to have the svg above info just add a media query like:
@media (max-width: 576px) {
.something {
flex-direction: column;
}
}
and thats it.
do you have any idea how can I fix the button?.
I need to see the css for <a href="#">Learn more about Orgs</a>
#turuncu {
background-color:red;
border-radius: 30px;
}
.gemi {
color: white;
}
#kenar {
color: white;
}
div class="something">
<img src="./images/collaboration.svg" width="35%;">
<div class="gemi">
<h1>npm Orgs is powerful collaboration - for free</h1>
<ul>
<li>Encourage code discovery and re-use within teams</li><br>
<li>Publish and control acces to your own namespace</li><br>
<li>Manage public and private code with the same workflow</li>
</ul>
</div>
<button id="turuncu">Sign up for Orgs</button>
<div id="kenar"><br> or, Learn more about Orgs</div>
</div>
I actually changed the and put the button with divs
I think its because you have
outside <div class="gemi">. try to move them right after </ul>
div class="something">
<img src="./images/collaboration.svg" width="35%;">
<div class="gemi">
<h1>npm Orgs is powerful collaboration - for free</h1>
<ul>
<li>Encourage code discovery and re-use within teams</li><br>
<li>Publish and control acces to your own namespace</li><br>
<li>Manage public and private code with the same workflow</li>
</ul>
</div>
</div>
<button id="turuncu">Sign up for Orgs</button>
<div id="kenar"><br> or, Learn more about Orgs</div>
i was meaning like this:
<div class="something">
<img src="./images/collaboration.svg" width="35%;">
<div class="gemi">
<h1>npm Orgs is powerful collaboration - for free</h1>
<ul>
<li>Encourage code discovery and re-use within teams</li><br>
<li>Publish and control acces to your own namespace</li><br>
<li>Manage public and private code with the same workflow</li>
</ul>
<button id="turuncu">Sign up for Orgs</button>
<div id="kenar"><br> or, Learn more about Orgs</div>>
</div>
</div>
1 Like
Thanks dude! That worked awesome
now I gotta move the pic and text little bit middle:D
I got it, I gave more width and it worked, thanks buddy. Are you Romanian?
To align pic and text just take a look at flexbox->justify-content and align-items properties. yes i’m romanian.