Skip to content

Almog Lavi #13

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
Lavi2910 wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Almog Lavi #13

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1e99f40
created a page for desktop
sltan29 Nov 16, 2025
90b7e63
added mobile and tablet adjustments and resposive design
sltan29 Nov 17, 2025
c7e8383
designed the success screen and made it available for mobile
sltan29 Nov 20, 2025
7c06710
removed lines that appear twice, removed <br>, removed unwanted comme…
sltan29 Nov 30, 2025
15fa71f
removed all <br>
sltan29 Nov 30, 2025
89e64ba
added alt attributes, changed screen sizing to em and fixed margin
sltan29 Nov 30, 2025
21d2ba3
changed all px units to em (still using vw and vh fo width and height…
sltan29 Dec 2, 2025
c31998f
Merge branch 'main' of https://github.com/Lavi2910/html-css-practice
sltan29 Dec 2, 2025
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
149 changes: 115 additions & 34 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
@@ -1,52 +1,133 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->

<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">

<title>Frontend Mentor | Newsletter sign-up form with success message</title>
<link rel="stylesheet" href="style.css">

<!-- 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="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
</head>
<body>

<!-- 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 -->
<body>
<div class="main-rect">
<div class="left-form">
<h1 class="title">
Stay updated!
</h1>
<p class="desc">
Join 60,000+ product managers receiving monthly
updates on:
</p>

<!-- Success message start -->
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="" class="tickImg">
<p>
Product discovery and building what matters
</p>
</div>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="" class="tickImg">
<p>
Measuring to ensure updates are a success
</p>
</div>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="" class="tickImg">
<p>
And much more!
</p>
</div>
<form class="main-form" action="success.html" method="get">
<label for="email" class="lab">Email adress</label>
<input type="email" placeholder="email@company.com" required>
<button type="submit">Subscribe to monthly newsletter</button>
</form>
</div>
<div class="right-img">
<img src="assets/images/illustration-sign-up-desktop.svg" class="desk-img" alt="">
</div>
</div>

Thanks for subscribing!
<div class="mobile-main">
<img src="assets/images/illustration-sign-up-mobile.svg" class="pic">
<div class="lower-part">
<h1 class="title">
Stay updated!
</h1>
<p class="desc">
Join 60,000+ product managers receiving monthly updates on:
</p>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="" class="tickImg">
<p>
Product discovery and building what matters
</p>
</div>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="" class="tickImg">
<p>
Measuring to ensure updates are a success
</p>
</div>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="" class="tickImg">
<p>
And much more!
</p>
</div>
<form class="main-form" action="success.html" method="post">
<label for="email" class="lab">Email adress</label>
<input type="email" placeholder="email@company.com" required>
<button type="submit">Subscribe to monthly newsletter</button>
</form>

A confirmation email has been sent to ash@loremcompany.com.
Please open it and click the button inside to confirm your subscription.
</div>
</div>

Dismiss message
<div class="tablet-main">
<img src="assets/images/illustration-sign-up-tablet.svg" class="pic">
<div class="lower-part">
<h1 class="title">
Stay updated!
</h1>
<p class="desc">
Join 60,000+ product managers receiving monthly updates on:
</p>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="tick before sentence" class="tickImg">
<p>
Product discovery and building what matters
</p>
</div>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="tick before sentence" class="tickImg">
<p>
Measuring to ensure updates are a success
</p>
</div>
<div class="checklistItem">
<img src="assets/images/icon-success.svg" alt="tick before sentence" class="tickImg">
<p>
And much more!
</p>
</div>
<form class="main-form" action="success.html" method="post">
<label for="email" class="lab">Email adress</label>
<input type="email" placeholder="email@company.com" required>
<button type="submit">Subscribe to monthly newsletter</button>
</form>

<!-- 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>
</body>

</html>
214 changes: 214 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,214 @@
:root {
font-family: "Roboto";
--primary-bg-color:hsl(235, 18%, 26%) ;
--secondary-bg-color:hsl(0, 0%, 100%);
}

body {
background-color: var(--primary-bg-color);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}

.main-rect {
height: 55vh;
width: 50vw;
display: flex;
background-color: var(--secondary-bg-color);
border-radius: 25px;
padding: 60px;
box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.574);
}

.left-form {
justify-content: start;
display: flex;
align-items: start;
width: 60%;
color: hsl(234, 29%, 20%);
flex-direction: column;
gap: 0px;
}

.title {
font-size: 55px;
margin: 0px;
}

.desc {
font-size: medium;
max-width: 80%;
}

.checklistItem {
display: flex;
flex-direction: row;
gap: 20px;
}

.tickImg {
max-width: 25px;
}

.lab {
font-weight: bold;
color: hsl(234, 29%, 20%);
}

.main-form {
display: flex;
flex-direction: column;
margin-top: 20px;
gap: 20px;
width: 80%;
}

input {
padding: 15px;
width: 100%;
border-radius: 5px;
border: solid 1px rgb(197, 197, 197);
}

button {
width: 110%;
padding: 15px;
border-radius: 5px;
border: 0px;
background-color: hsl(234, 29%, 20%);
color: hsl(0, 0%, 100%);
font-size: small;
cursor: not-allowed;
}

.main-form:valid button{
width: 110%;
padding: 15px;
border-radius: 5px;
border: 0px;
background-image: hsl(234, 29%, 20%);
color: hsl(0, 0%, 100%);
font-size: small;
cursor: pointer;
}

.main-form:valid:hover button {
width: 110%;
padding: 15px;
border-radius: 5px;
border: 0px;
background-image: linear-gradient(to right, hsl(4, 100%, 67%), hsl(23, 100%, 67%));
color: hsl(0, 0%, 100%);
font-size: small;
cursor: pointer;
box-shadow: 0px 0px 20px 2px hsla(4, 58%, 54%, 0.525);
}

.right-img {
width: 40%;
display: flex;
justify-content: center;
align-items: center;
}

.desk-img {
width: 22vw;
Copy link
Member

@Tamir198 Tamir198 Dec 2, 2025

Choose a reason for hiding this comment

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

You are mixing too many different units, pick 1 and go with it

Copy link
Author

@Lavi2910 Lavi2910 Dec 2, 2025

Choose a reason for hiding this comment

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

is it ok if i'll use vw for width, vh for height and em for all the other stuff?
if not what should i use?

}

.mobile-main {
display: none;
}

.tablet-main {
display: none;
}

@media (max-width: 30em) {
body {
height: 93vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--secondary-bg-color);
flex-direction: column;
width: 96vw;
}

.tablet-main {
display: none;
}

.main-rect {
display: none;
}

.mobile-main {
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
}

.title {
font-size: 45px;
}

.lower-part {
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
margin-top: 20px;
color: hsl(234, 29%, 20%);
margin-left: 30px;
gap : 0px;
}

.pic{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

}

@media (min-width: 30em) and (max-width: 50em) {
.main-rect {
display: none;
}
body{
background-color: var(--secondary-bg-color);
padding: 0px;
}
.mobile-main {
display: none
}
.tablet-main{
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
margin: 0px;
}
.pic{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin-top: auto;
}
.lower-part {
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
color: hsl(234, 29%, 20%);
margin-left: 50px;
gap : 0px;
}
}
Loading