Skip to main content

Glowing Border effect using html/css

 {html code}

<html>

    <head>

        <link href='E:\html\.vscode\.vscode\style.css' type='text/css' rel='stylesheet'>

        <title>Glowing Border</title>

    </head>

    <body>

        <div class='box'>

            <div class='text'>

            <h2><u>Glowing Border</u></h2>

            <p>HTML and CSS are technically not the programming languages, they are the scripting languages. 

            Usually used for the front-end development.</p>

            </div>

        </div>

       

    </body>

</html>



{css code}

body{

    background: black;

    display: flex;


}


.text{

    padding: 30px;

    margin: 10px;

    letter-spacing: 1px;

    box-sizing: border-box;

    color: white;

}


.box{

    top: 20%;

    left: 40%;

    display: flex;

    position: relative;

    width: 300px;

    height: 420px;

    justify-items: center;

    align-items: center;    

    background: rgb(0, 0, 0);

    font-family: 'poppins',sans-serif;

    animation: glow 4s linear infinite;

}


.box::before{

    display: flex;

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    z-index: -1;

    content: '';

}


.box::after{

    display: flex;

    position: absolute;

    top: -2px;

    left: -2px;

    right: -2px;

    bottom: -2px;

    z-index: -1;

    content: '';

    filter: blur(20px);

}


.box::before,

.box::after{

    background: linear-gradient(125deg, #03cdff, #a6ff01);

}

This is how the final product will look!

Note: In the head section(html code) we need to paste the path of the css file in <link> tag as href='paste the path of your css file'.
Labels:

Comments

Post a Comment

Popular posts from this blog

Machine Learning model for predicting 'Salary' of an Employee based on 'YearsofExperience'

“ Data really powers everything that we do .” — Jeff Weiner In the 21st century, Data is one of the most valuable entity anyone can have! There is loads-and-loads of data generated everyday. And to process this huge amount of data we need people who have expertise in it, who by the way are called as Data Engineers. Data Engineer collects the raw data, process it for further use; but we need an Analytic process which will automatically predict the data based on the previous one. And here's how 'Machine Learning' comes into the picture. "Machine Learning allows us to make highly accurate predictions based on the Historical Dataset which is used to train the machine learning model." Today let us look at a similar ML model to predict the 'Salary' of Employees based on 'YearsofExperience'. (P.S: I've provided pdf link at the very bottom of this page for clear understanding) 1) import the required modules 2) read the csv file 3) plot the graph 4) us...
Post a Comment
Read more

Introduction to SQL

 Q.)  What is SQL ? Ans.) SQL(Structured Query Language) is a standardized language to communicate with the database.  With the help of it we can retrieve data from the database. SQL not only allows us to read the data but also allows us to write the data in the database.  Data in the database is stored in the form of tables. We can Select, Insert, Update, Delete, Create, Alter, Drop and can perform many more operations on the table. And these are called as SQL Statements. * SQL Statements are classified mainly into 4 categories :- 1) DML (Data Manipulation Language) 2) DDL (Data Definition Language) 3) DCL (Data Control Language) 4) TCL (Transaction Control Language) * Under DML we have :-(No Autocommit) 1. Select  2. Insert  3. Update  4. Delete  5. Merge    * Under DDL :-(Allows Autocommit) 1. Create 2. Alter  3. Drop  4. Truncate  5. Flashback * Under DCL :-(Allows Autocommit) 1. Grant  2. Revoke  * Under T...
Post a Comment
Read more

Slicing in Python

  * Let's first understand how a slicing is been done-- Consider a string namely==>> string = 'python_developer!' If we print this then-- #  Output: python_developer! >> Now lets do some slicing here-- print (string[0:17:2]) >> Then the-- # Output: pto_eeoe! >> Lets see how it works-- So basically the print statement is in the form of  print(string[a:b:c]) >>  Now here   --           a: Starting position b: Ending position c: Steps taken >> If we take out length of the given string then-- print (len(string)) # Output: 17 * The total length of the given string is 17. Therefore in our given problem the string will be printed from 0 index to 16 index and would take 2 steps. >> Hence the output-- # Output: pto_eeoe! >> Now the print statement that we have used here is-- print (string[0:17:2]) >> We can also use-- print (string[:17:2]) >> It will give the same output-- ...
Post a Comment
Read more