Skip to content

Commit

Permalink
Change offer color
Browse files Browse the repository at this point in the history
  • Loading branch information
@jahongiry
jahongiry committed Jan 13, 2024
1 parent 1f4f68e commit cf7f069
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 60 deletions.
91 changes: 45 additions & 46 deletions src/pages/offer/Offer.js
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,71 @@
import React from "react";
import "./offer.css";
import React from 'react';
import './offer.css';

const Offer = () => {
return (
<section className="offer container">
<div className="offer-container">
<section className='offer container'>
<div className='offer-container'>
<h1>E'lon yaratish</h1>
<p>E'lon yaratish mutlaqo bepul</p>
<p>E'lon yaratish mutlaqo bepul!</p>

<form action="#">

<div className="form-group">
<div className="form-input">
<label htmlFor="level">Daraja</label>
<input type="number" name="level" id="level" min={0} />
<form action='#'>
<div className='form-group'>
<div className='form-input'>
<label htmlFor='level'>Daraja</label>
<input type='number' name='level' id='level' min={0} />
</div>
<div className="form-input">
<label htmlFor="royalPass">Royal pass</label>
<input type="text" name="royalPass" id="royalPass" />
<div className='form-input'>
<label htmlFor='royalPass'>Royal pass</label>
<input type='text' name='royalPass' id='royalPass' />
</div>
</div>

<div className="form-group">
<div className="form-input">
<label htmlFor="skin">Skins</label>
<input type="text" name="skin" id="skin" />
<div className='form-group'>
<div className='form-input'>
<label htmlFor='skin'>Skins</label>
<input type='text' name='skin' id='skin' />
</div>
<div className="form-input">
<label htmlFor="achievement">Achievement</label>
<input type="text" name="achievement" id="achievement" />
<div className='form-input'>
<label htmlFor='achievement'>Achievement</label>
<input type='text' name='achievement' id='achievement' />
</div>
</div>
<div className="form-input">

<div className='form-input'>
<span>Ulangan</span>
<div className="connect-input">
<label htmlFor="phone">
<input type="checkbox" name="connected" id="phone" />
<i className="fa-solid fa-phone"></i>
<div className='connect-input'>
<label htmlFor='phone'>
<input type='checkbox' name='connected' id='phone' />
<i className='fa-solid fa-phone'></i>
</label>
<label htmlFor="google">
<input type="checkbox" name="connected" id="google" />
<i className="fa-brands fa-google"></i>
<label htmlFor='google'>
<input type='checkbox' name='connected' id='google' />
<i className='fa-brands fa-google'></i>
</label>
<label htmlFor="apple">
<input type="checkbox" name="connected" id="apple" />
<i className="fa-brands fa-apple"></i>
<label htmlFor='apple'>
<input type='checkbox' name='connected' id='apple' />
<i className='fa-brands fa-apple'></i>
</label>
<label htmlFor="facebook">
<input type="checkbox" name="connected" id="facebook" />
<i className="fa-brands fa-facebook-f"></i>
<label htmlFor='facebook'>
<input type='checkbox' name='connected' id='facebook' />
<i className='fa-brands fa-facebook-f'></i>
</label>
<label htmlFor="gamecenter">
<input type="checkbox" name="connected" id="gamecenter" />
<i className="fa-solid fa-gamepad"></i>
<label htmlFor='gamecenter'>
<input type='checkbox' name='connected' id='gamecenter' />
<i className='fa-solid fa-gamepad'></i>
</label>
</div>
</div>
<div className="form-input">
<label htmlFor="cost">Narxi</label>
<input type="number" name="cost" id="cost" min={0}/>
<div className='form-input'>
<label htmlFor='cost'>Narxi</label>
<input type='number' name='cost' id='cost' min={0} />
</div>
<div className="form-input">
<label htmlFor="message">Message:</label>
<textarea name="message" id="message"></textarea>
<div className='form-input'>
<label htmlFor='message'>Message:</label>
<textarea name='message' id='message'></textarea>
</div>

<button className="form-btn" type="button">
<button className='form-btn' type='button'>
Yaratish
</button>
</form>
Expand Down
28 changes: 14 additions & 14 deletions src/pages/offer/offer.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.offer {
padding-top: 90px;
padding-top: 80px;
padding-bottom: 6vw;
width: 100%;
min-height: 100vh;
height: 100%;
background: url("../../img/background_2.png") no-repeat;
background: url('../../img/background_2.png') no-repeat;
background-position: center;
background-size: cover;

Expand All @@ -20,18 +20,20 @@
display: flex;
flex-direction: column;
align-items: center;
border-top: 2px solid #d6b1d6; /* Light blue top border */
border-right: 2px solid #d969c6; /* Regular blue for the right border */
border-bottom: 2px solid #775fcf; /* Regular blue for the bottom border */
border-left: 2px solid #775fcf; /* Regular blue for the left border */
background-image: linear-gradient(
to right top,
#1a1643,
#2b1d47,
#39254b,
#452d4f,
#503653
to left bottom,
#88347b,
#6f2b75,
#54236e,
#371c65,
#10165c
);
border-radius: 1rem;
/* clip-path: polygon(0% 0%, 34% 0%, 34% 6%, 66% 6%, 66% 0%, 100% 0%, 100% 100%, 0% 100%); */
border: 1px solid #000;
box-shadow: 0 0 10px #000;
}

.offer-container h1 {
Expand Down Expand Up @@ -76,10 +78,8 @@
padding: 0.5rem 1rem;
color: #fff;
font-size: 1.2rem;
border: 2px inset #000;
background: rgb(255, 255, 255, 0.2);
border-radius: 5px;
box-shadow: 0 0 4px #000;
}
.offer-container form .form-input textarea {
outline: none;
Expand Down Expand Up @@ -109,7 +109,7 @@
box-shadow: 0 0 4px #000;
}

.offer-container form input[type="checkbox"]:checked ~ i {
.offer-container form input[type='checkbox']:checked ~ i {
border: 2px outset #000;
background: var(--btn-bg-color);
color: #fff;
Expand Down Expand Up @@ -137,7 +137,7 @@
border-right: 2px solid #d969c6;
border-bottom: 2px solid #775fcf;
border-left: 2px solid #775fcf;
transition: all .5s ease;
transition: all 0.5s ease;
}
.offer-container form .form-btn:hover {
background: var(--btn-bg-color);
Expand Down

0 comments on commit cf7f069

Please sign in to comment.