What steps can I take to get a border functioning correctly on my website?

Question

What steps can I take to get a border functioning correctly on my website?

For my friend's birthday, I am designing a website that resembles a greeting card. The layout consists of text in the center and an image of a birthday cake. To give it a card-like feel, I want to create a border around it. Although I know how to adjust flexbox values, I'm hesitant to make changes on my own. Can someone guide me through the solution?

// JavaScript code for confetti animation goes here...

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8"> 
    <title>&#127881;Happy Birthday&#127881;</title>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="icon" type="image/x-icon" href="Images/favicon.ico">
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
    <style>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style> 
</head> 
<body style="background-color:hsl(0, 0%, 0%); width: 100%; height: 100%;">
     <div class="animated pulse infinite" style="font-size: 90px; color:#06589c ; text-shadow: 0 0 2rem #06589c; font-family:'Raleway'; text-align: center; margin-top: 55px; font-weight: bold;">Happy Birthday Eshal!</div>
     <div class="Birthday Cake" style="text-align: center;">
     <img src="images/favicon.png" width="346.4px" height="310.8px" alt="Birthday Cake" style="text-shadow: 0 0 2rem white;">
     </div> 

     <script src="confetti.js"></script>
     <!-- Confetti  JS-->
     <script>

         // start

         const start = () => {
             setTimeout(function() {
                 confetti.start()
             }, 1000);
         };

         // Stop

         const stop = () => {
             setTimeout(function() {
                 confetti.stop()
             }, 5000);
         };

         start();
         stop();

     </script>

 </body>
 </html>

javascript html css flexbox border

Answer 1

Answer №1

There are multiple ways to achieve this. One possible method is by directly adding it in the html code, although the specific border type you want is not specified.

html{
  border: 5px solid white;
  margin: 10px;
  min-height: calc(100vh - 20px);
}
body{
  overflow-x:hidden;
}

DEMO

var confetti = {
    maxCount: 150,      //set max confetti count
    speed: 2,           //set the particle animation speed
    frameInterval: 15,  //the confetti animation frame interval in milliseconds
    alpha: 1.0,         //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
    gradient: false,    //whether to use gradients for the confetti particles
    start: null,        //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
    stop: null,         //call to stop adding confetti
    toggle: null,       //call to start or stop the confetti animation depending on whether it's already running
    pause: null,        //call to freeze confetti animation
    resume: null,       //call to unfreeze confetti animation
    togglePause: null,  //call to toggle whether the confetti animation is paused
    remove: null,       //call to stop the confetti animation and remove all confetti immediately
    isPaused: null,     //call and returns true or false depending on whether the confetti animation is paused
    isRunning: null     //call and returns true or false depending on whether the animation is running
};

(function() {
    // Confetti functions here...
})();

html{
  border: 5px solid white;
  margin: 10px;
  min-height: calc(100vh - 20px);
}
body{
  overflow-x:hidden;
}

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Other HTML content -->
 </head>
 <body style="background-color:hsl(0, 0%, 0%); width: 100%; height: 100%;">
     <!-- Birthday wishes -->
     <div class="animated pulse infinite" style="font-size: 90px; color:#06589c ; text-shadow: 0 0 2rem #06589c; font-family:'Raleway'; text-align: center; margin-top: 55px; font-weight: bold;">Happy Birthday Eshal!</div>
     <div class="Birthday Cake" style="text-align: center;">
     <img src="images/favicon.png" width="346.4px" height="310.8px" alt="Birthday Cake" style="text-shadow: 0 0 2rem white;">
     </div;

     <script src="confetti.js"></script>
     <!-- Confetti related JS script -->
     <script>
         // Script for starting and stopping confetti
         const start = () => {
             setTimeout(function() {
                 confetti.start()
             }, 1000);
         };

         const stop = () => {
             setTimeout(function() {
                 confetti.stop()
             }, 5000);
         };
         
         start();
         stop();
     </script>
 </body>
 </html>

Answer 2

There are multiple ways to achieve this. One possible method is by directly adding it in the html code, although the specific border type you want is not specified.

html{
  border: 5px solid white;
  margin: 10px;
  min-height: calc(100vh - 20px);
}
body{
  overflow-x:hidden;
}

DEMO

var confetti = {
    maxCount: 150,      //set max confetti count
    speed: 2,           //set the particle animation speed
    frameInterval: 15,  //the confetti animation frame interval in milliseconds
    alpha: 1.0,         //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
    gradient: false,    //whether to use gradients for the confetti particles
    start: null,        //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
    stop: null,         //call to stop adding confetti
    toggle: null,       //call to start or stop the confetti animation depending on whether it's already running
    pause: null,        //call to freeze confetti animation
    resume: null,       //call to unfreeze confetti animation
    togglePause: null,  //call to toggle whether the confetti animation is paused
    remove: null,       //call to stop the confetti animation and remove all confetti immediately
    isPaused: null,     //call and returns true or false depending on whether the confetti animation is paused
    isRunning: null     //call and returns true or false depending on whether the animation is running
};

(function() {
    // Confetti functions here...
})();

html{
  border: 5px solid white;
  margin: 10px;
  min-height: calc(100vh - 20px);
}
body{
  overflow-x:hidden;
}

<!DOCTYPE html>
<html>
 <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Other HTML content -->
 </head>
 <body style="background-color:hsl(0, 0%, 0%); width: 100%; height: 100%;">
     <!-- Birthday wishes -->
     <div class="animated pulse infinite" style="font-size: 90px; color:#06589c ; text-shadow: 0 0 2rem #06589c; font-family:'Raleway'; text-align: center; margin-top: 55px; font-weight: bold;">Happy Birthday Eshal!</div>
     <div class="Birthday Cake" style="text-align: center;">
     <img src="images/favicon.png" width="346.4px" height="310.8px" alt="Birthday Cake" style="text-shadow: 0 0 2rem white;">
     </div;

     <script src="confetti.js"></script>
     <!-- Confetti related JS script -->
     <script>
         // Script for starting and stopping confetti
         const start = () => {
             setTimeout(function() {
                 confetti.start()
             }, 1000);
         };

         const stop = () => {
             setTimeout(function() {
                 confetti.stop()
             }, 5000);
         };
         
         start();
         stop();
     </script>
 </body>
 </html>

What steps can I take to get a border functioning correctly on my website?

Answer №1

DEMO

Similar questions

Apply a vibrant red color to the border input (twig)

Can I use npm's jQuery in an old-school HTML format?

Exploring Hover Effects in Reactjs and Material UI

Simulating jQuery/JS simulation has never been more exciting

Transforming numbers into arrays in JavaScript/TypeScript for Angular 7

Use jQuery to create rows within each div

Shopping cart has encountered an issue with storing the data correctly

Executing an asynchronous action without linking promises to subsequent actions

Error: The property 'target' cannot be read

Include a new key into an array of objects within an asynchronous function

applying different styles to various elements

How to accurately determine the event.target for parent elements in JavaScript?

Retrieve the request body in Node.js Express server-side code in order to receive an array passed from the front end

Can a link be stored in a table using PHP?

Eliminating specific classes targeted by a jQuery attribute selector within the outcome of another jQuery attribute selector

Troubleshooting problems with AngularJS placeholders on Internet Explorer 9

Guide to positioning the layout inflater on the right side

Tips for causing text to wrap to a new line when reaching the end of a div element

Guide on using jest and fetch to properly validate the rendering of an APIgetMocking an API using jest and fetch for rendering verification

Creating a unique JavaScript script that gradually adjusts the background color using the setTimeout() function