Valentine's Day Website

RESULTS

This is not the best tutorial, since it doesn't explain the code thoroughly. However, it's fun for practice and an introduction to HTML/CSS.

Github Repository Screenshot of Project

STEP 1:

Create a new HTML file, name it whatever you want. Then add a title, body (centered), a header, and an image! You can also add more if you want.

Link the style sheet to the HTML file, we will use this in future steps. Also, wrap the image in a div container for styling purposes.


                    <html>
                        <head>
                            <title>My Website</title>
                            <link rel="stylesheet" href="style.css">
                        </head>
                        <body align="center">
                            <div class="container">
                                <h1>HappyValentine's Day</h1>
                                <img src="image.png" alt="Valentine's Day Image">
                            </div>
                        </body>
                    </html>

STEP 2:

Create style.css, and start styling the background.

body{
    /* creates background image covering entire page */
    background-image: url('background.png');
    background-size: cover;
    background-repeat: no-repeat;
}

Use Flexbox to center the image and header and make it a column.

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

STEP 3:

Style the text by importing fonts from Google Fonts.

@font-face{
    font-family: heart;
    src: url('heart.ttf');
}

h1{
    font-family: heart, sans-serif;
    color: purple;
    font-size: 400%;
    margin-bottom: 0;
}

STEP 4:

Style your image and add finishing touches like borders/colors!


                    img{
                        /*this resizes the image*/
                        width: 40%;
                        height: 50%;

                        /*this adds a border to the image*/
                        border: 20px double pink;
                    }

You can also add borders to the container! Borders can be images or solid colors. Edit your containter div from earlier.


                    .container{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        /*this adds a border to the container*/
                        border: 30px solid transparent;
                        padding: 15px;
                        border-image: url('lace.png') 30 round;
                    }

That's it! Feel free to add more!!