`
/*======================CONTENT========================*/
.content {
padding: 110px 30px;
overflow: hidden;
}
.content__inner {
display: grid;
grid-template-columns: 1fr 2fr;
column-gap: 50px;
margin: 80px 0 0;
color: var(--blue-two);
}
.content__title {
font-size: 59px;
font-weight: 500;
color: var(--blue-two);
text-align: center;
}
.card {
font-size: 23px;
line-height: 1.5;
text-align: left;
padding: 22.5px;
}
.card:first-child {
background-color: var(--white-two);
border-radius: 5px;
}
.card:first-child .card__title {
color: var(--blue-one);
}
.card__subtitle {
font-weight: 300;
}
.content__img {
width: 130%;
border-radius: 5px;
margin: auto 0;
}
/*======================TOOLS========================*/
.tools {
background-color: var(--white-two);
padding: 110px;
border: 1px solid red;
}
.container {
border: 1px solid blue;
}
.tools__inner {
display: grid;
grid-template-columns: 2fr 1fr;
column-gap: 50px;
margin: 80px 0 0;
border: 1px solid green;
}
.tools__img {
width: 100%;
}
.tools__text {
text-align: left;
}
.tools__title {
font-size: 49px;
color: #e56134;
margin: 0 0 16px;
}
.tools__subtitle {
font-weight: 300;
font-size: 23px;
line-height: 1.5;
margin: 0 0 32px;
}
.tools__logos {
margin: 10px 0 0;
}
`
`============CONTENT SECTION===============
<section >
<div >
<div >Content management <br> for the whole team</div>
<div >
<div >`enter code here`
<div >
<div >Collaborate</div>
<div >Invite your client or team to create and edit content. Set them as Admin, Publisher, or Writer.
</div>
</div>
<div >
<div >Preview before you publish</div>
<div >Preview changes before they go live. Then publish with one click whenever you’re ready.
</div>
</div>
<div >
<div >Smart text editor</div>
<div >Choose between a visual editor or just plain Markdown. Drag and drop images or even entire text files.
</div>
</div>
<div >
<div >Powerful content</div>
<div >Customize your site with document collections, advanced metadata, and custom permalinks.
</div>
</div>
</div>
<img src="img/content__pic1.jpg" alt="" >
</div>
</div>
</section>
============TOOLS SECTION===============
<section >
<div >
<div >Develop with tools you <br> already love</div>
<div >
<img src="img/tools_pic1.jpg" alt="tools1" >
<div >
<div >Built on open source</div>
<div >Siteleaf is compatible with Jekyll, the static site generator for over half a million websites running on GitHub Pages.
</div>
<div >
Benefit from a large open source community. Use any existing Jekyll theme, or write your own using Liquid, Sass, and CoffeeScript. Develop locally and even offline.
</div>
<img src="img/tools__logos.svg" alt="logos" >
</div>
</div>
</div>
</section>
As you can see the Content section(Screenshot below) is as Tools section(Screenshot below) but in reverse, how can I place Tools image as in Content section ? I need the overflow of tools__img1.jpg from left side not from right! How can I do that?
CodePudding user response:
Put this css below into your component's css. The img element in the container align right and overflow from left.
// index.html
<div >
<img src="your-image.png"/>
</div>
// index.css
.img-container {
display: flex;
justify-content: end;
}