It's time to create the css directory inside the static directory as discussed earlier.
We create and switch to the css directory, and then make a file named main.css inside the css directory. This main.css contains the formatting of the HTML files that we will be creating. The formatting might include the colors, padding, margins, alignment, and many more.
Note:
We can create a new directory named myDir by using the command mkdir myDir.
We can change to the directory named myDir by using the command cd myDir.
vi is used to:
If we want to create and/or edit the file named myFile, we use vi myFile.
To exit from the file, we click esc key and type :wq and hit on enter key. In :wq, w means save, and q means quit.
This css directory should be created inside Image-Classification-App/static. So make sure you are in the Image-Classification-App/static. You could check your present working directory using the command:
pwd
This command should output the path:
/home/$USER/Image-Classification-App/static
If the path displayed is not the same as the above, switch to the Image-Classification-App using
cd ~
cd Image-Classification-App/static
Now, create a new directory named css using the mkdir command.
Change to the directory css using cd command.
Now create the file main.css using vi command.
Press i key on your keyboard, to switch to insert mode in the file.
Copy-paste the below CSS code inside the file.
body {
background-color: #f4f4f4;
font-family: 'Open Sans', sans-serif;
}
header {
background-color: #fcba03;
padding: 25px 0;
}
.title {
float: left;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 17px;
letter-spacing: 2.5px;
text-transform: uppercase;
margin: 0px 20px;
}
.upload-image-thumb {
max-width: 800px;
margin: 100px;
}
.image-container {
margin: 0px auto;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Now, click on esc button on your keyboard.
Then, type :wq and then hit on enter key on your keyboard. This returns you to your console.
Loading comments...