In part 3, we will finish building out the project by adding the CSS to it.
Start the local server, by clicking on the blue Go Live
button in the bottom right hand corner of the page of Visual Studio Code.
In our styles.css
file, we will first add a basic CSS reset. This is used to reset the default browser styles for the HTML.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
We are then going to choose the background color and center the text.
body {
background-color: #5a4fcf;
text-align: center;
font-family: "Open Sans", sans-serif;
}
You should see this result in the browser.
We are then going to target the title
and card
classes to change the background color and round out the border.
.title,
.card {
border-radius: 15px;
background-color: #faf9f6;
}
The next step is to use a Google font.
Go to https://fonts.google.com/, and search for the Limelight
font.
Click on the Google font, and choose Select this style
.
A tab on the right hand side will slide open, and you should see the option to copy the code for the link
tag.
Add that link
tag, inside the head
for our HTML file.
<!--Google font-->
<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=Limelight&display=swap" rel="stylesheet">
</head>
In the CSS file, add the Limelight
font to the title
class along with these margin and padding styles.
.title {
padding: 20px 0;
margin: 40px auto 30px;
max-width: 40%;
font-family: "Limelight", cursive;
}
Next, add these margin
styles for the #message
.
#message {
margin: 20px 0 30px;
}
Next, set the dimensions for the card
class.
.card {
max-width: 300px;
height: 250px;
padding: 15px;
margin: auto;
}
For the .input-container
, we will use flex
to add some space between the input and buttons.
.input-container {
margin-bottom: 40px;
display: flex;
justify-content: space-around;
}
We will then set the width for the number input.
input[type="number"] {
width: 20%;
}
Next, set the margins for the .result-div
and .result-text
.
.result-div {
margin: 10px 0;
}
.result-text {
margin: 10px;
}
We will then set the colors and font sizes for the Font Awesome icons.
.fas,
.far {
margin-left: 5px;
font-size: 1.3rem;
}
.fa-fire,
.fa-burn {
color: #ff0000;
}
.fa-fire {
font-size: 3rem;
}
.fa-sun {
color: #ffbf00;
}
.fa-icicles {
color: #00d0ff;
}
Then we want to add the button styles.
.btn {
color: white;
padding: 5px;
margin: 0 10px;
background-color: #0818a8;
cursor: pointer;
border: none;
border-radius: 10%;
}
Lastly, we will add two media queries to target smaller mobile devices.
@media (max-width: 500px) {
.title {
max-width: 300px;
font-size: 1.3rem;
}
}
@media (max-width: 300px) {
.title {
max-width: 200px;
font-size: 1rem;
}
}
This is what the entire CSS file should look like.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #5a4fcf;
text-align: center;
font-family: "Open Sans", sans-serif;
}
.title,
.card {
border-radius: 15px;
background-color: #faf9f6;
}
.title {
padding: 20px 0;
margin: 40px auto 30px;
max-width: 40%;
font-family: "Limelight", cursive;
}
#message {
margin: 20px 0 30px;
}
.card {
max-width: 300px;
height: 250px;
padding: 15px;
margin: auto;
}
.input-container {
margin-bottom: 40px;
display: flex;
justify-content: space-around;
}
input[type="number"] {
width: 20%;
}
.result-div {
margin: 10px 0;
}
.result-text {
margin: 10px;
}
.fas,
.far {
margin-left: 5px;
font-size: 1.3rem;
}
.fa-fire,
.fa-burn {
color: #ff0000;
}
.fa-fire {
font-size: 3rem;
}
.fa-sun {
color: #ffbf00;
}
.fa-icicles {
color: #00d0ff;
}
.btn {
color: white;
padding: 5px;
margin: 0 10px;
background-color: #0818a8;
cursor: pointer;
border: none;
border-radius: 10%;
}
@media (max-width: 500px) {
.title {
max-width: 300px;
font-size: 1.3rem;
}
}
@media (max-width: 300px) {
.title {
max-width: 200px;
font-size: 1rem;
}
}
In part 4, we will setup a GitHub repository and deploy our project to GitHub Pages.
Top comments (0)