Hey, it turned out pretty well, but there is scope for improvement. 😁
What challenges did you encounter, and how did you overcome them?A minor bug, but got over it as well.✌🏻
What specific areas of your project would you like help with?N/A
Nice solution. Can the email address be made to show in the success message?
<p>A confirmation email has been sent to <span class="submitted">[email protected]</span>. Please open it and click the button inside to confirm your subscription.
</p>
const submittedEmail = document.querySelector(".submitted");
if (validateEmail(email.value)){
submittedEmail.innerText = email.value;
toggleCards();
email.value = "";
signUpForm.classList.remove("error")
i am so proud to work on my first little javascript project.
What challenges did you encounter, and how did you overcome them?designing pop up share box was more challenging. but after out how to actual working on it css property, but i still have to work in more.
What specific areas of your project would you like help with?any feedback will be appreciated.
Looks good. Nice work. Maybe add a conditional statement so the share box can be closed. Something like
share.addEventListener('click', () => {
popup.style.display =
popup.style.display === 'block' ? 'flex': 'block';
});
I am proud I was able to remember most of what I had learn in the classes so when I was stuck on a problem I had an idea of how to solve it.
Next time I will try to make my web page responsive.
What challenges did you encounter, and how did you overcome them?The hardest part was changing the style of the lists and have two different styles. The community helped by providing explanations.
What specific areas of your project would you like help with?I would like an easy explanation of how to make a web page responsive. I still don't quite get it.
Your solution looks good but does not display well on smaller screens. Try not to use width and heights on containers and let them expand to fit. Try taking the width and height rules off the gross_boite class and adding max-width:900px Take the width rule off the jolie-boite class On the img rule add width:100% and take off the margin rules
body{
background-color: hsl(30, 54%, 90%);
font-family: Outfit;
font-weight: 400;
font-size: small;
color:hsl(30, 10%, 34%);
margin: 50px;
font-size: 16px;
}
.grosse-boite{
background-color:hsl(0, 0%, 100%);
max-width: 900px;
/* width: 720px; */
/* height: 1525px; */
border-radius: 25px 25px 25px 25px;
margin: auto;
}
img{
width: 100%;
border-radius: 15px 15px 15px 15px;
/* margin-top: 45px; */
/* margin-left: 45px; */
/* margin-right: 45px; */
}
h1{
font-family: Young serif;
font-weight: 400;
margin-left: 45px;
margin-right: 45px;
color: hsl(24, 5%, 18%);
}
p{
font-family:Outfit;
font-weight: 400;
font-size: small;
margin-left: 45px;
margin-right: 45px;
}
.jolie-boite{
background-color: hsl(330, 100%, 98%);
/* width: 630px; */
height: 140px;
padding-top: 0.005%;
border-radius: 5px 5px 5px 5px;
margin-left: 45px;
margin-right: 45px;
}
h3{
color:hsl(332, 51%, 32%);
margin: 20px;
height: 10px;
border: 5px;
margin-left: 45px;
margin-right: 45px;
font-weight: 600;
}
ul{ list-style: none;}
li:before{
display: inline-block;
width: 2em;
margin-left: -1em;
margin-bottom: 0.5em;
}
li.prep-list:before{
content: "•";
color:hsl(332, 51%, 32%);
font-size: 16px;
}
li.ing-list:before{
content: "\25AA";
color: hsl(14, 45%, 36%);
margin-left: 15px;
font-size: 16px;
}
h2{
font-family: Young Serif;
color: hsl(14, 45%, 36%);
margin-left: 45px;
margin-right: 45px;
font-weight: 400;
}
ol{
list-style:none;
counter-reset: li;
margin-left: 65px;
margin-right: 65px;
}
ol li::before{
font-weight: 600;
font-size: 16px;
display: inline-block;
margin-left: -2.5em;
margin-right: 0.5em;
content: counter(li)". ";
color:hsl(14, 45%, 36%);
display:block;
margin-bottom: -25px;
line-height: 2rem;
font-size: 16px;
}
li {counter-increment : li}
table{
border-collapse: collapse;
width: 100%;
margin-left: 45px;
margin-right: 45px;
margin-bottom: 50px;
}
tr{
border-bottom: 1px
solid hsl(30, 18%, 87%);
}
tr.last-child{
border-bottom: 0;
}
th{
font-weight: 500;
text-align: left;
color:hsl(30, 10%, 34%);
padding-left:20px;
}
td{
font-weight: 600;
color: hsl(14, 45%, 36%);
padding:10px
}
.last-td{
border-bottom:none
}
hr{
border: 0.5pt solid hsl(30, 18%, 87%);
margin-left: 20px;
margin-right: 20px;
}
Had a problem with the footer for smaller screen sizes, doing it with flexbox did not work. Any suggestions on how to do that and how to overall improve the code is more than welcome. Thanks in advance and happy coding!
Looks good. I am quite new to this but I concentrated on the mobile smaller screen size on the footer first and did it with flexbox. Then changed the layout with media queries using flexbox Meet landing page solution
The cards do not stack on top on one another in mobile view. I found it easier to build it mobile first with 5 boxes stacked . Then do a media query with a min-width to change to grid view at larger screen size, setting columns and rows for each box in that media query
@media(min-width:1030px){
main {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
gap: 20px;
max-width: 1100px; /* Adjust the gap size as needed */
}
.card{
width: auto;
margin-bottom: 0 ;
}
.box1 {
grid-column-start: 1;
grid-column-end: 3;
background-position: right 50px top;
}
.box3 {
grid-row-start: 2;
}
.box4{
grid-row-start: 2;
grid-column-start: 2;
grid-column-end: 4;
}
.box5{
grid-row-start: 1;
grid-row-end: 3;
}
im glad i figured out how to use grid css property
What challenges did you encounter, and how did you overcome them?everything basically
What specific areas of your project would you like help with?readme is quiet boring to complete... i should focus on it more
Check that the layout looks good on a range of screen sizes. At 850px wide there are two boxes stacked on top of each other. This was my approach using flexbox
main{
display: flex;
gap:1.5rem;
align-items: center;
}
<main>
<div class="col1">
<div class="card box1">
<h3>Supervisor</h3>
<p>Monitors activity to identify project roadblocks</p>
<img src="./images/icon-supervisor.svg" alt="supervisor">
</div>
</div>
<div class="col2">
<div class="card box2">
<h3>Team Builder</h3>
<p>Scans our talent network to create the optimal
team for your project</p>
<img src="./images/icon-team-builder.svg" alt="team builder">
</div>
<div class="card box3">
<h3>Karma</h3>
<p>Regularly evaluates our talent to ensure quality</p>
<img src="./images/icon-karma.svg" alt="karma">
</div>
</div>
<div class="col3">
<div class="card box4">
<h3>Calculator</h3>
<p>Uses data from past projects to provide better delivery estimates </p>
<img src="./images/icon-calculator.svg" alt="">
</div>
</div>
</main>
I think this is my best one yet in terms of the responsiveness!
What challenges did you encounter, and how did you overcome them?the challenges was just getting to grips with @media queries and figuring that out to make things as responsive as possible! some more practice in that department is deffo needed.
What specific areas of your project would you like help with?@media queries @media queries @media queries @media queries @media queries
This looks good and the media queries are working fine. I have just completed this in a similar style. I think you should be able to invite the required fonts in three lines of code from Google Fonts
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;1,9..144,700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
Try and make a separate css file and link to it from the html file. Also put content between the <li> tags. Like this
<ul>
<li>2-3 large eggs</li>
<li>Salt, to taste</li>
<li>Pepper, to taste</li>
<li>1 tablespoon of butter or oil</li>
<li>Optional fillings: cheese, diced vegetables, cooked meats, herbs
</li>
</ul>
<ol>
<li><strong>Beat the eggs</strong>: In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.</li>
<li><strong>Heat the pan</strong>: Place a non-stick frying pan over medium heat and add butter or oil.</li>
<li><strong>Cook the omelette</strong>: Once the butter is melted and bubbling, pour in the eggs. Tilt the pan to ensure the eggs evenly coat the surface.</li>
<li><strong>Add fillings (optional)</strong>: When the eggs begin to set at the edges but are still slightly runny in the middle, sprinkle your chosen fillings over one half of the omelette.</li>
<li><strong>Fold and serve</strong> : As the omelette continues to cook, carefully lift one edge and fold it over the fillings. Let it cook for another minute, then slide it onto a plate.</li>
<li><strong>Enjoy</strong>: Serve hot, with additional salt and pepper if needed.</li>
</ol>
I was able to complete the challenge without help from anyone. Next time I will try using the CSS clamp function to make a responsive design. I stumbled upon a submit challenge where the user used it and it seemed really cool.
What challenges did you encounter, and how did you overcome them?None, It was quite easy.
What specific areas of your project would you like help with?The projects are still easy now maybe when they get a little too complicated.
Looks great. Maybe centre it in the page with Flex. That's what I did.
@media(min-width: 768px){
body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 0;
}
}
