Replace icons with images-CodePudding

I use https://boxicons.com/ to display the 3 icones. I share you

Except that, I would like to download the icons to keep them in a folder.

Here is the result with uploaded images:

The code is <meta name="viewport" content="wi$*$dth=device-wi$*$dth, initial-scale=1"> Login <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" /> <link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" /> <link rel="stylesheet" href="style.css"> <body>

&css=body { margin: 0; padding: 0; } img { max-wi$*$dth: 100%; height: auto; } .l-form { position: relative; height: 100vh; overflow: hi$*$dden; } .shape1, .shape2 { position: absolute; wi$*$dth: 200px; height: 200px; border-radius: 50%; } .shape1 { top: -7rem; left: -3.5rem; background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%); } .shape2 { bottom: -6rem; right: -5.5rem; background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%); transform: rotate(180deg); } .form { height: 100vh; display: gri$*$d; justify-content: center; align-items: center; padding: 0 1rem; } .form__content { wi$*$dth: 290px; } .form__img { display: none; } .form__title { font-size: 2rem; font-weight: 500; margin-bottom: 2rem; color: #239CD3; } .form__div { position: relative; display: gri$*$d; gri$*$d-template-columns: 7% 93%; margin-bottom: 1rem; padding: 0.25rem 0; border-bottom: 1px soli$*$d #8590AD; } .form__div.focus { border-bottom: 1px soli$*$d #8590AD; } .form__div.focus .form__icon { color: red; } .form__div.focus .form__label { top: -1.5rem; font-size: 0.875rem; color: red; } .form__div-one { margin-bottom: 3rem; } .form__icon { font-size: 1.5rem; color: #8590AD; transition: 0.3s; } .form__label { display: block; position: absolute; left: 0.75rem; top: 0.25rem; font-size: 0.938rem; transition: 0.3s; } .form__div-input { position: relative; } .form__input { position: absolute; top: 0; left: 0; wi$*$dth: 100%; height: 100%; border: none; outline: none; background: none; padding: 0.5rem 0.75rem; font-size: 1.2rem; color: #8590AD; transition: 0.3s; } .form__button { wi$*$dth: 100%; padding: 1rem; font-size: 0.938rem; outline: none; border: none; margin-bottom: 3rem; background-color: #239CD3; color: #fff; border-radius: 0.5rem; cursor: pointer; transition: 0.3s; } .form__button:hover { box-shadow: 0px 15px 36px rgba(0, 0, 0, 0.15); } .form__login { text-align: center; } .form__login-text { display: block; font-size: 0.938rem; margin-bottom: 1rem; color: #239CD3; } .form__login-icon { display: inline-flex; justify-content: center; align-items: center; wi$*$dth: 30px; height: 30px; margin-right: 1rem; padding: 0.5rem; background-color: #8590AD; color: #fff; font-size: 1.25rem; border-radius: 50%; } .form__login-icon:hover { background-color: #239CD3; } /*===== MEDIA QUERIS =====*/ @media screen and (min-wi$*$dth: 968px) { .shape1 { wi$*$dth: 400px; height: 400px; top: -11rem; left: -6.5rem; } .shape2 { wi$*$dth: 300px; height: 300px; right: -6.5rem; } .form { gri$*$d-template-columns: 1.5fr 1fr; padding: 0 2rem; } .form__content { wi$*$dth: 320px; } .form__img { display: block; wi$*$dth: 700px; justify-self: center; } }&js=// JavaScript document.getElementById('welcome').innerText = " Editors"; " rel="nofollow noreferrer">here

I have two problems:

The white color is gone and it is replaced with black.
There is a horizontal line below the image that has disappeared

Do you know how I could get the same result as in the first illustration?

I just changed this

<span >Our partners</span>

<a href="#" ><i class='bx bx-book-content'></i></a>
<a href="#" ><i class='bx bx-building-house'></i></a>
<a href="#" ><i class='bx bx-wallet-alt'></i></a>

In this

<span >Our partners</span>

<a href="#" ><img src="https://zupimages.net/up/22/33/qad0.png" alt="image"></a>
<a href="#" ><img src="https://zupimages.net/up/22/33/8mhc.png" alt="image"></a>
<a href="#" ><img src="https://zupimages.net/up/22/33/qq74.png" alt="image"></a>

Thanks

body {
  margin: 0;
  padding: 0;
  
  }
  
  img {
  max-width: 100%;
  height: auto;
  }
  
  .l-form {
  position: relative;
  height: 100vh;
  overflow: hidden;
  }
  
  .shape1,
  .shape2 {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  }
  
  .shape1 {
  top: -7rem;
  left: -3.5rem;
  background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
  }
  
  .shape2 {
  bottom: -6rem;
  right: -5.5rem;
  background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
  transform: rotate(180deg);
  }
  
  .form {
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  }
  
  .form__content {
  width: 290px;
  }
  
  .form__img {
  display: none;
  }
  
  .form__title {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: #239CD3;
  }
  
  .form__div {
  position: relative;
  display: grid;
  grid-template-columns: 7% 93%;
  margin-bottom: 1rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid #8590AD;
  }
  .form__div.focus {
  border-bottom: 1px solid #8590AD;
  }
  .form__div.focus .form__icon {
  color: red;
  }
  .form__div.focus .form__label {
  top: -1.5rem;
  font-size: 0.875rem;
  color: red;
  }
  
  .form__div-one {
  margin-bottom: 3rem;
  }
  
  .form__icon {
  font-size: 1.5rem;
  color: #8590AD;
  transition: 0.3s;
  }
  
  .form__label {
  display: block;
  position: absolute;
  left: 0.75rem;
  top: 0.25rem;
  font-size: 0.938rem;
  transition: 0.3s;
  }
  
  .form__div-input {
  position: relative;
  }
  
  .form__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  padding: 0.5rem 0.75rem;
  font-size: 1.2rem;
  color: #8590AD;
  transition: 0.3s;
  }
  
  .form__button {
  width: 100%;
  padding: 1rem;
  font-size: 0.938rem;
  outline: none;
  border: none;
  margin-bottom: 3rem;
  background-color: #239CD3;
  color: #fff;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: 0.3s;
  }
  .form__button:hover {
  box-shadow: 0px 15px 36px rgba(0, 0, 0, 0.15);
  }
  
  .form__login {
  text-align: center;
  }
  
  .form__login-text {
  display: block;
  font-size: 0.938rem;
  margin-bottom: 1rem;
  color: #239CD3;
  }
  
  .form__login-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 1rem;
  padding: 0.5rem;
  background-color: #8590AD;
  color: #fff;
  font-size: 1.25rem;
  border-radius: 50%;
  }
  .form__login-icon:hover {
  background-color: #239CD3;
  }


  /*===== MEDIA QUERIS =====*/
  @media screen and (min-width: 968px) {
  .shape1 {
  width: 400px;
  height: 400px;
  top: -11rem;
  left: -6.5rem;
  }
  .shape2 {
  width: 300px;
  height: 300px;
  right: -6.5rem;
  }
  .form {
  grid-template-columns: 1.5fr 1fr;
  padding: 0 2rem;
  }
  .form__content {
  width: 320px;
  }
  .form__img {
  display: block;
  width: 700px;
  justify-self: center;
  }
  }

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css" rel="stylesheet" />
<link href='https://cdn.jsdelivr.net/npm/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div >
<div ></div>
<div ></div>

<div >
<img src="https://zupimages.net/up/22/33/al0n.png" alt="image"  style="width: 70%">


<form  >
<h1 >Login</h1>

<div >
<div >
<i class='bx bx-user-circle'></i>
</div>

<div >
<label for="user" ></label>
<input type="text"  name="user" [(ngModel)]="loginForm.user" placeholder='Username'>
</div>
</div>


<input type="submit"  value='Login'>

<div >

<span >Our partners</span>

<!-- 
<a href="#" ><i class='bx bx-book-content'></i></a>
<a href="#" ><i class='bx bx-building-house'></i></a>
<a href="#" ><i class='bx bx-wallet-alt'></i></a>
-->

<a href="#" ><img src="https://zupimages.net/up/22/33/qad0.png" alt="image"></a>
<a href="#" ><img src="https://zupimages.net/up/22/33/8mhc.png" alt="image"></a>
<a href="#" ><img src="https://zupimages.net/up/22/33/qq74.png" alt="image"></a>
  

</div>
</form>
</div>

</div>
</body>
</html>

CodePudding user response：

It seems the image you are using has black foreground. You can use .form__login-icon img { filter: invert(1); } to make the foreground white. For the horizontal line use box-shadow: 0 2px #000;. Otherwise use an SVG image and apply the fill color of your choice.

CodePudding user response：

the problem is with the images. those images have black background though they are in PNG format. You can use online tools, Adobe illustrator or photoshop to remove the background from those images. Or you can use images in SVG format