I did a little research to complete this challenge but it's mainly my work (about 85%). I had to get the code for an email validation script from stack overflow. This is the only thing I do not understand in the code. Do I need to understand regex?
Is it ok to rely on javascript validation?
How do I add the header images so they expand off the sides as the design file shows
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">ash@loremcompany.com</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;
}
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>