Here I am uploading my third project. But here I am facing an issue that I am unable to change the position of "per month" span from bottom. Please kindly help me out and recommend some better coding ways:) N.B : This span ("per month") is present in the 2nd row and 1st column. It is grouped as a class named "rest".
Hi
<span class="amount">$29</span>
<span class="rest">per month</span>
These two element have display: inline by default. So you cann't use margin-top or margin-bottom. Set their display to inline-block using display: inline-block
Then to align them vertically you can use vertical-align property on either of these two elements
Another war is to wrap these two element in a div element. Set following styles on the div element.
display: flex;
align-item: center
The background image did not load in the comparison before/after, however in the demo it is ok.
Hi
Nice work. The white dot on the progress bar is not placed correctly. You can use following styles.
.progress set position: relative. Then on ::after set position: absolute; right: 1px.top: 50%; transform: translateY(-50%);Hey, what's up? It's my first time trying to develop website by myself, hope you enjoy it.
Any suggestions will be very welcome :)
Hi
Good work. But you are using percentage units more than required. As part of web development process, you need to learn when to use absolute units(pixels) and when relative units (%, rem, em).
height, width and right properties using pixelsborder-radius property, use 'pixels'Feedback required
Hi
Good work. My few suggestion are:
Set cursor: pointer on filter tablets to give feedback to the user that these are clickable.
On mobile design, the company logo is not placed correctly. To achieve this: set position: relative on the job card and position: absolute; top: -10px; // should be equal to half the height of log left: 10px // should be equal to left padding on the card on logo
Can anyone give me a hint on how to make this challenge without JS?
You can use hidden checkbox to toggle prices. Follow following code:
<label class="switch" for="price-switch"> // add **for attribute** to link it with checkbox
<input type="checkbox" id="price-switch"> // Remove this checkbox
<span class="slider round"></span>
</label>
Place the checkbox as a sibling of <div class="cards-section">.
<input type="checkbox" id="price-switch">
<div class="cards-section">
Then add following styles:
<section class="card">
<h3 class="card-title">Basic</h3>
<div class="card-price"> <span class="price-monthly">19.99</span></div>
<div class="card-price"> <span class="price-annually">199.99</span></div>
// similarly for other cards
<h3 class="card-title">Professional</h3>
<div class="card-price"><span class="price-monthly">49.99</span></div>
<div class="card-price"><span class="price-annually">49.99</span></div>
// All monthly prices have same css class `price-monthly` and all annual plans have same css class
Hide one of the price category initially:
.price-monthly{
display: none;
}
when checkbox is checked toggle display property:
#price-switch:checked ~ .cards-section .price-monthly{
display: block;
}
#price-switch:checked ~ .cards-section .price-annually{
display: none;
}
i wasn't able to make the top-border-color to have a lineat-gradient color
Hi
To set a linear-gradient on the top border, you can use background property.
background: var(--gradient-instagram);
background-size: 100% .4rem;
background-repeat: no-repeat;
Its a noob work but pls let me know If i can change something in code or any mistake.
Great attempt.
:hover psuedo class to add those styles.transform: translateX() property. The text should be aligned left on large screen sizes.This is the first time I make a web page using the Mobile First method and I'm really proud of the final design and the progress I've had improving my level in HTML, CSS, and a little bit in JS.
Hi
Good work. The border on the instagram card does not match the design. One the solutions is to use background property.
background: var(--gradient-instagram);
background-size: 100% .4rem;
background-repeat: no-repeat;
Any feedback is welcome. Especially regarding JS
Hi
Your CSS and JS code have lot of repeated code.
.errors-and-icons-1, .errors-and-icons-2,.errors-and-icons-3,.errors-and-icons-4{
visibility: hidden;
display: flex;
justify-content: end;
}
.error1,.error2,.error3,.error4 {
color: red;
font-size: 10px;
}
You do not need to create 4 different classes. Create a single .error and .errors-and-icons class. And use them for each input element.
To place the error icon correctly:
You need to change your html code. wrap input element, error icon and error message in a div element. set position: relative on div. and use position: absolute; top: 50%; transform: translateY(-50%); right: 2px; on error icon. This place the error icon on the right edge of input element.
**In JS code **. This code is repeated:
if (nameInput.validity.valid) {
nameError.textContent = "";
nameInput.className = "border";
const divEl = document.querySelector(".errors-and-icons-1");
divEl.style.visibility = "hidden";
}
You can wrap it into a function like this:
function removeError(inputElem, errorElem){
if (inputElem.validity.valid) {
errorElem.textContent = "";
inputElem.className = "border";
const divEl = document.querySelector(".errors-and-icons-1");
divEl.style.visibility = "hidden";
}
}
Similarly you can wrap following code into a function:
if (nameInput.value.trim() === "") {
nameError.textContent = "First Name cannot be empty!";
nameInput.className = "border-invalid";
const divEl = document.querySelector(".errors-and-icons-1");
divEl.style.visibility = "visible";
}
Would like feedback for the arrow on the tooltip, backgrounds for svg icons. Also would like some advice on the spacing of the content for the first column. Any other feedback is also welcome, thank you
For SVG icons, wrap them into a div container individually. Then set width and height so that all icons are of same size. then use following to center icons
.svg-container{
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
I struggled with a good way of centring the grid on the page without pushing the attribution off the end
Hi
You have set grid-template-rows: 100vh; which is causing footer to be pushed below.
Replace this line and your problem will be solved.
Feedback welcome
Good work. My few suggestions are:
font-family, font-size and font-weight. Set cursor: pointer.:hover styles and cursor:pointer.#features section: text should be aligned left on larger screen. Image should be moved left. You can use either position: relative; left: -30px or transform: translateX(-30px)