Make the color of the page as below using pure css-CodePudding

I am new to CSS and I want to make the color as of the right of the page that is given in the half. I have tried many things but nothing helps. It would be good if someone would help me.[![enter image description here] I want to make it like it's there in the orange. And also how to make the icons and text align to each other as a list below

CodePudding user response：

You will need to mess with SVG paths and clip-path to create this in pure CSS.
You can use this helpful tool.

As for aligning rows, you can use display:flex;.
Poor Example:

.page * {
  margin: 0;
}

.page {
  border: solid 1px #ccc;
  background: #fcfcfc;
  position: relative;
  min-height: 400px;
  max-width: 800px;
}

.page::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background: #f939;
  clip-path: path('M0 0C35 96 106 177 195 210 315 249 362 290 433 361 567 491 493 597 635 800V0Z');
}

.page::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background: #f93;
  clip-path: path('M0 0C35 56 159 197 253 211c126 28 145 77 194 157C532 506 493 597 635 800V0Z');
}

.content {
  max-width: 500px;
  padding: 2rem;
  position:relative;
  z-index:1;
}

.flex-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.content h2 {
  color: orange;
  margin-left: 5rem;
  margin-bottom: 1rem;
}

.content p {
  color: #333;
}

.flex-item {
  display: flex;
  gap: 5px;
}

<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/41170d31b4.js" crossorigin="anonymous"></script>

<div >
  <div >
    <h2 ><i ></i>Welcome</h2>
    <div >
      <p ><i ></i>Welcome to our Digital Account Opening platform.</p>
      <p ><i ></i>Welcome to our Digital Account Opening platform.</p>
      <p ><i ></i>Welcome to our Digital Account Opening platform.</p>
    </div>
  </div>
</div>

If you find this answer helpful, please do not forget to upvote.

CodePudding user response：

You can Pick Color By Using ColorZilla Extension in Chrome. Color which you are asking is #FF7C00

Moving to the Other Part of Question

You can align them, using Flexbox

<div className="flex-container">
    <Icon />
    <Text />
</div>

.flex-container {
  display : flex
}

Read more about flexbox at : Css-Tricks