Hi there π, this is my solution for this challenge. π
Built With:
- Boostrap
- *Tailwind CSS
Any suggestions are welcome!
Thank you. πβοΈ
Hi there π, this is my solution for this challenge. π
Built With:
Any suggestions are welcome!
Thank you. πβοΈ
@filecc good job on completing the challenge!
Some things to consider to improve your solution for the desktop view:
Hope this helps good luck and happy coding :)
Hello everyone!
I used visibility:hidden; and visibility:visible; to show the image on mobile and hide on desktop. Is there a better way of doing this?
And any feedback is welcome.
THANK YOU!
Good work @SachithKarunathilake!
regarding your question above, the way you did works as there is many ways to achieve the same result when it comes to coding.
things to consider...
display: none;
.example-element {
display: none;
}
visibility: hidden;
.example-element {
visibility: hidden;
}
hope this helps! good luck and happy coding :)
I want your suggestions what can be improved and in general what you like or you don't like :)
Nice work @RicoRIck12!
To fix the accessibility warning you can add a h1 under the main tag like the example below in your HTML:
<body>
<main>
<h1>Example Header</h1>
</main>
</body>
Then in your CSS you can either completely hide the element or make only visible for screen readers (will still be hidden) To completely hide it you can:
h1 {
display: none;
}
for the screen readers you should add a class to the h1 in your HTML like:
<h1 class="sr-only">Example Header</h1>
Then in your CSS:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
hope this helps! good luck and happy coding :)
Hey everyone, I completed this challenge. Any recommendations on improvement are welcome!
Great work @Atharva-0710!
from looking at your design and code I can see that it's not responsive, so if you would like to improve on the work you have done then you can make it responsive using CSS media queries.
you can checkout the link below to have a better understanding of it if you like.
Media Queries / Responsive Design Examples
also regarding the accessibility errors you can change the h3 to h2 and the font size and other properties in your css.
hope you find this useful! good luck & happy coding :)
please give a comment for my exercise , thank u
Good work @putracode354!
here are few things you can do to make your design and code better.
to fix the error with the divs you need to remove the href="#" from your code in your HTML. look at the examples below:
<div href="#" class="example example1">
example 1 - hrefs are not used in divs
</div>
<div class="example example2">
example 2 - how it should be
</div>
<div id="exampleid" class="example example3">
example 3 - you can have a id and a class in the div
</div>
you can add a border radius to round the corners of the main card in your CSS. look at the example below:
.main-card-example {
border-radius: 15px;
}
you can also add a background color for this project in your CSS. look at example below:
body {
background-color: hsl(0, 0%, 95%);
}
hope this helps, good luck and happy coding :)
Javascript to adapt the elements to the size of the page, making it responsive, and using different functions to calculate the chosen plans and to go through the phases of the form.
Good try @MayckL2!
here's something that will make your forms look much better.
HTML example:
<div class="insert-name">
<label>Name</label>
<input type="text" placeholder="e.g Stephen King" required />
<label>Email Address</label>
<input type="text" placeholder="e.g [email protected]" required />
<label>Phone Number</label>
<input type="text" placeholder="e.g +1 234567890" required />
</div>
by adding the placeholder in the input tag you'll be able to display any text and when an user goes to type they don't need to get rid of the old text before being able to input info.
then you can go into your css style file and target the placeholder and customise it to your liking.
CSS Styles example:
.insert-name input::placeholder {
font-weight: bold;
color: #000000;
opacity: 0.5;
}
so you select the div and then you select the input tag in that div and then :placeholder in the above example you'll be able to style the placeholder, for example you'll be able to change the text color, font-size, weight and the main thing is the opacity which you can do 0.5 and or 50% to achieve the look and functionality in the design you built above.
hope this helps! good luck and happy coding :)
about the border radium, can't make it like a perfect circle even set in 50%
Also, regarding the circle not working properly here are a few ways to fix the issue:
you can try from some of the examples below:
code that's required in html
div class="insert-name"></div>
or
<span class="insert-name"></span>
then in your css styles file use the following properties:
.insert-name {
width: 150px;
height: 150px;
background: linear-gradient(180deg, hsla(256, 72%, 46%, 1), hsla(241, 72%, 46%, 0));
border-radius: 50%;
display: inline-block;
you can adjust some of the properties to your needs of course like the width, height and colors etc...
let me know if this helped good luck and have fun :)
about the border radium, can't make it like a perfect circle even set in 50%
Good work TianYeCal!
I have a suggestion that might help you.
in your styles css file you can add the hover effect on the continue button, just below your button styles add the following code:
.btn-continue:hover {
background-image: linear-gradient(#7857ff, #2e2be9);
cursor: pointer;
}
hope this helps and have fun coding :)
Hi there π, Iβm Melvin and this is my solution for this challenge. π
π οΈ Built With:
Any suggestions on how I can improve and reduce unnecessary code are welcome!
Thank you. πβοΈ
nice work! you almost have the design pixel perfect and if you did it just by eyeing then that's very impressive. keep up the good work ;)