@awwsalahSubmitted about 1 year ago
Hi, I'm Awwsalah, your go-to JavaScript Jedi and pixel Picasso. Math's my playground, design's my canvas. My code? Comedy gold for browsers, turning coffee into captivating websites. When not coding, I'm cracking math puzzles or weaving design magic.
I’m currently learning...Right now, I'm tackling AI and Machine Learning, like a wizard learning to control digital dragons. It’s a wild ride through code that might just bend reality as we know it. Weekends? Those are for mastering Quantum UX Design, where design meets quantum physics, and my coffee intake meets new highs.
Latest comments
- @awwsalahPosted about 1 year ago
Hello there
Thank you for the valuable advice, I truly appreciate it. I'm always eager to improve and learn new things. Your guidance has enlightened me about the Settings Sync feature, which I wasn't aware of before. Rest assured, next time you come across any of my code, you'll see that I've implemented your suggestions.
If you happen to notice anything else or have some spare time to review any of my other projects, I would be absolutely thrilled. Your insights and feedback are incredibly valuable to me. Thank you once again for your help!
0 - @SR2090Submitted about 1 year ago@awwsalahPosted about 1 year ago
this was my forth time i made this project but it was worth it
0 - @KacabSubmitted about 1 year ago@awwsalahPosted about 1 year ago
Hello kacabibrahim
first try to name you html file index.html and your main css to style.css . in your html code first before you write your html open the image design and plan what kind of tag it needs,
Practice to use, Semantic HTML elements
like
<nav>, <aside>, <main>, <header>, and <footer>are important for accessibility. They give screen readers contextual information about the different parts of a page. It gives assistive technology a better understanding of the different parts of a page
so in this challenge use <main> and add class="container" or "card" this explaination i will use container
<main class="container"> <article class="card"> <div class="card-title"> <img src="images/avatar-jessica.jpeg" alt="" /> <div> <h4>Jessica Randall</h4> <h5>London, United Kingdom</h5> </div> <p>"Front-end developer and avid reader."</p> </div> <div class="card-btns"> <button>GitHub</button> <button>Frontend Mentor</button> <button>LinkedIn</button> <button>Twitter</button> <button>Instagram</button> </div> </article> </main>in the css code we can use this
:root{
--background-color: hsl(0, 0%, 8%); --forground-color: hsl(0, 0%, 12%); --btn-color: hsl(0, 0%, 20%); --secondary-color: hsl(75, 94%, 57%); --text-color:hsl(0, 0%, 100%);}
body{
background-color: var(--background-color); color: var(--text-color); font-family: "Inter", sans-serif; width: 100%; height: 100dvh; justify-content: center; display: flex; flex-direction: column; align-items: center;}
.container{
width: 300px; height: 450px; text-align: center; margin-bottom: 60px;}
.card{
display: flex; flex-direction: column; gap: 1rem; padding: 20px; background-color: var(--forground-color); border-radius: 15px;}
.card-title{
display: flex; flex-direction: column; align-items: center; gap: 1rem; font-weight: 700;}
.card-btns{
display: flex; flex-direction: column; gap: 1rem;}
button{
height: 40px; width: auto; background-color: var(--btn-color); border: none; border-radius: 6px; color: var(--text-color); font-weight: 600; transition: 1s; /* this slow the hover animations into 1 second */}
button:hover{ /* :hover it can change the behaviour of the button when u hover over it */
background-color: var(--secondary-color); color: var(--btn-color); cursor: pointer; /* this change when you hover on the button, this code change the cursor*/}
sorry i cant explain every detail but if u have any question in certain area of the code let me know.
Marked as helpful1 - @CoderExplore365Submitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
I am mostly proud of completing this project because I know that it is a step in the right direction. Which means I am learning to progress more once I understand how to do these type of projects one step at a time.
What challenges did you encounter, and how did you overcome them?I rarely encountered any of these challenges because I am basically learning how to fix things by myself.
What specific areas of your project would you like help with?The specific areas I wanted to work on is the container positioning because I wanted to know how to put the container in the center to make it clean as possible.
@awwsalahPosted about 1 year agoHello there you did great but you can improve your css code try to remove the center class no need,
and add your css body{
width: 100%; /* this will define your body with */ height: 100dvh; /* this for the device height so it will help to center your card */ justify-content: center; display: flex; flex-direction: column; align-items: center;and no need for this class = .image-class for detail you can check my code or other people code it will help you improve. if u need help let me know
0 - @Matt971xSubmitted about 1 year ago@awwsalahPosted about 1 year ago
sorry please, try to refresh your Page i fixed the text
0 - @Matt971xSubmitted about 1 year ago@awwsalahPosted about 1 year ago
hello Matthieu
try to flex in your html <main> tag create two div classes one for the buttons and another for the image and the title.
after that in the css call the main class and add this code
{
display: flex; flex-direction: column; gap: 1rem;}
and change the <a> tag to <button> and add the fix buttons into a div class u can call what ever u prefer, after u create the buttons use this code in the css
button{
height: 40px; width: auto; background-color: var(--btn-color); /* u can add the color here */ border: none; border-radius: 6px; color: var(--text-color); font-weight: 600; transition: 1s; /* this is for the hover animation it make it slower */}
button:hover{
background-color: var(--secondary-color); /* the green color here */ color: var(--btn-color); /* u can add the white color here */ cursor: pointer;}
let me know if u need further help, two weeks ago i didn't know much about CSS so practicing is the key
0
