Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
61 changes: 61 additions & 0 deletions newsletter-sign-up-with-success-message-main/css/index.css

Choose a reason for hiding this comment

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

consider moving index.css into the main project folder so the file structure stays clean and easier to navigate as the project grows

Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
body{
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(235, 18%, 26%);
height:100vh;
}
#container{
background-color: white;
height: 60vh;
width: 55vw;
border-radius: 25px;
display:flex;
justify-content: space-between;
padding: 4vh;
}
.text{
width:25vw;
display:flex;
flex-direction: column;
font-family: Roboto ,Arial;

Choose a reason for hiding this comment

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

consider setting a global defaults (like font-family: Roboto ,Arial; , font-weight: 400;...) using:

:root {
  font-family: "Roboto", sans-serif;
  ....
}

font-size: 16px;
font-weight: 400;
margin-left: 2vw;
color:hsl(0, 0%,58%);
}
.icon-picture{
margin-right: 1vw;
height:16px;
}
#submit-button{
margin-top: 2vh;
background-color: hsl(234, 29%, 20%);

Choose a reason for hiding this comment

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

Use CSS variables instead of repeating colors.

:root {
--primary-dark: hsl(234, 29%, 20%);
}

....

background-color: var(--primary-dark);

color: hsl(0, 0%, 100%);
padding: 1.5vh;
border-radius: 5px;
font-weight: 700;

}
#email-label{
color:hsl(234, 29%, 20%);
font-weight: 700;
font-size: 12px;
padding-bottom:1vh;
}
#headline{
color:hsl(234, 29%, 20%);
font-weight: 700;
font-size: 40px;
margin-bottom: 2vh;

}
#text-with-images{
padding-bottom: 2vh;
}
#email-input{
padding:2vh;
border-radius: 5px;
border: 1px solid rgb(210, 209, 209);

}
48 changes: 18 additions & 30 deletions newsletter-sign-up-with-success-message-main/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,36 @@
<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">
<link rel="stylesheet" href="./css/index.css">

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

<!-- Sign-up form start -->
<div id="container">
<div class="text">
<p id="headline">Stay updated!</p>

Choose a reason for hiding this comment

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

Use <h1> for your main headline instead of <p id="headline">, since it’s a page title.


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
<span>Join 60,000+ product managers receiving monthly updates on:</span>
<div id="text-with-images">
<p><img class="icon-picture" src="./assets/images/icon-list.svg" alt="icon-list">Product discovery and building what matters</p>
<p><img class="icon-picture" src="./assets/images/icon-list.svg" alt="icon-list">Measuring to ensure updates are a success</p>
<p><img class="icon-picture" src="./assets/images/icon-list.svg" alt="icon-list">And much more!</p>
Comment on lines +21 to +23

Choose a reason for hiding this comment

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

Add alt attributes to img tags.

</div>


<!-- Sign-up form end -->
<label id="email-label" for="email">Email address</label>
<input id="email-input" type="email" placeholder="email@company.com">

<!-- Success message start -->
<button id="submit-button" type="submit">Subscribe to monthly newsletter</button>

Thanks for subscribing!

</div>

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

Dismiss message
<img src="./assets/images/illustration-sign-up-desktop.svg">
</div>

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