Skip to content

chore: exercise 1 for Tamar matza #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tamarmatza-commits wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore: exercise 1 for Tamar matza #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 59 additions & 33 deletions newsletter-sign-up-with-success-message-main/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,44 +9,70 @@
<title>Frontend Mentor | Newsletter sign-up form with success message</title>

<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div class="center-rect">
<div class="inner-rect">
<div class="leftside">
<div class="row1">
<h1 class="head">
stay updated!
</h1>
</div>
<div class="row2">
<p1 class="befortext">
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don’t recommend using p1 labels. It’s better to use standard p tags instead.

Join 60,000+ product managers receiving monthly updates on:
</p1>
</div>
<div class="row3">
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cosider to work with list (li) for more semantic code. i will recommend you to read about it

<div class="check1">
<img src="assets\images\icon-list.svg" >
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

missing alt artibutes in the img lable

</div>
<div class="text1">
product discovery and building what matters
</div>
</div>
<div class="row4">
<div class="check2">
<img src="assets\images\icon-list.svg" >
</div>
<div class="text2">
measuring to ensure updates are a success
</div>
</div>
<div class="row5">
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider to dont work with numbers inside the class name e.g "row1,row2,text2" if you want to style each one diffrent give them a diffrent names and if you want to edit all the text so just call the class = "text" and in the style file you can edit them all as one

<div class="check3">
<img src="assets\images\icon-list.svg" alt="">
</div>
<div class="text3">
and much more!
</div>
</div>
<div class="row6">

<div class="text3">
<p class="emailtext">
email adress</p>
<form class="email-form">
<input type="email" name="email" placeholder="Email@company.com" required>
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in here i recommend you to add id to the input so its will be acceessible to edit and work with.


<!-- Sign-up form start -->

Stay updated!

Join 60,000+ product managers receiving monthly updates on:

Product discovery and building what matters
Measuring to ensure updates are a success
And much more!

Email address
email@company.com

Subscribe to monthly newsletter

<!-- Sign-up form end -->

<!-- Success message start -->

Thanks for subscribing!

A confirmation email has been sent to ash@loremcompany.com.
Please open it and click the button inside to confirm your subscription.
<button class="submit">Subscribe to monthly newsletter</button>

</form>
</div>
</div>


Dismiss message

<!-- Success message end -->

<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
<div class="rightside">
<picture class="picture" >
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

its redundant to use the picture label here the img will be enogh.

<img src="assets\images\illustration-sign-up-desktop.svg" alt="">
</picture>
</div>
</div>
</div>
</body>
</html>
153 changes: 153 additions & 0 deletions newsletter-sign-up-with-success-message-main/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
body {
margin: 0;
height: 100vh;
background-image: url(https://coolbackgrounds.imgix.net/3ePclU2S6e80DYWpCUdmPV/194ca1fcd9f49a833e906d7adb743078/white-unsplash.jpg?w=3840&q=60&auto=format,compress);
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For next time, its consider best practice to first download the image into the repo and take the src from your own local machine and not from the internet.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}


.center-rect {
background: hsl(234, 29%, 20%);
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider to work with CSS varible instead it will make you code easier to read and more important easy to maintain.

padding-left: 15%;
padding-right: 15%;
padding-top: 7%;
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion to much padding inside this block try to use general padding and after to tune but padding-top/right/down or left

padding-bottom: 7%;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
margin: 0 auto;

}

.inner-rect {
background:white;
padding: 3%;
border-radius:30px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
display: flex;
flex: 1fr 1fr 1fr;

}

.rightside{
column-gap: 30%;
justify-content: center;
align-items: center;
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as in the leftside container both of them are not display: flex so the justify-content and align-items are redundant

flex-direction: column;
flex:1;


}


.picture img {
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i dont know why to work with picture label
i never done that LOL : )

width: 100%;
height: auto;
display: block;
}

.leftside{

text-align: center;
flex: 1;
flex-direction: row;
Copy link

@idanpopovich8 idanpopovich8 Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

in here you are using flex-direction that its a flex property but the leftside contatiner is not display: flex so this line does nothing

padding: 3%;

}
.row1{
text-align: center;

}
.head{
font-size: 50px;
text-align: left;
}

.row2{
text-align: left;
padding-bottom: 30px;
}
.row3{
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
padding-bottom: 10px;
}
.check1{
text-align: left;
padding-right:10px;
}
.text1{
text-align:left ;
}
.row4{
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
padding-bottom: 10px;
}
.check2{
padding-right: 10px;
text-align: left;
}
.text2{
text-align:left ;
}
.row5{
display: flex;
flex: 1;
flex-direction: row;
align-items: center;
}

.check3{
padding-right: 10px;
text-align: left;
}
.text3{
flex: 1;
text-align: left;
align-items: center;
}
.row6{
display: flex;
flex: 1;
flex-direction: column;
}
.emailtext{
font-size: smaller;
}

.email-form input[type="email"] {
width: 100%;
padding: 15px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
margin-bottom: 20px;


}

.submit{

background: hsl(234, 29%, 20%) ;
width: 100%;
border-radius: 8px;
padding: 15px;
font-size:13px;
color:white ;

}