First wepage with HTML and Internal CSS

-

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ICT Project</title>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&display=swap" rel="stylesheet">




    <style>
        * {
            /* default page settings */
            /* box-sizing: border-box; */
            margin: 0px;
            padding: 0px;
        }

        body {
            /* background-color: gray; */
            background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url(wall.jpg);
            /* If a color is used as a background, it will repeat after every element. This is used to remove this */
            background-repeat: no-repeat;
            /* If repeat is no repeat,background will end after element end and we will have a white space. This is to avoid this */
            background-attachment: fixed;
            /* Set position to center */
            background-position: center;
            /* Background will change dynamically when window size is changed */
            background-size: cover;
        }

        .container {
            height: 25vh;
            /* border: 2px solid salmon; */
            display: flex;
            /* to give equal space between header tags */
            justify-content: space-between;
            /* to align vertically center of flex container */
            align-items: center;
            /* to make responsive */
            flex-wrap: wrap;
        }

        img {
            width: 130px;
            margin-left: 80px;
            cursor: pointer;
            /* change color of png by using css filter generator */
            filter: invert(92%) sepia(10%) saturate(760%) hue-rotate(324deg) brightness(105%) contrast(96%);
        }

        .item {
            /* sort horzontally */
            display: flex;
            /* padding-bottom: 25px; */
            align-items: center;
            font-size: 25px;
            font-family: 'Baloo Bhai 2', cursive;
            margin-right: 130px;
            /* remove the points from unordered list */
            list-style-type: none;
            /* to make responsive */
            flex-wrap: wrap;
        }


        a {
            /* to give space in between list items */
            margin-right: 45px;
            color: antiquewhite;
            /* to remove underline */
            text-decoration: none;
            position: relative;
        }

        a:before {
            content: "";
            position: absolute;
            bottom: -2px;
            height: 6px;
            width: 0;
            background: #29fd50;
            border-radius: 50px;
            transition: width 0.5s ease;
        }

        /* to color link text when hover */
        a:hover {
            color: #29fd50;
        }

        a:hover::before {
            width: 100%;
        }

        .content {
            /* position absolute to parent */
            position: absolute;
            /* text is aligned 50% from top */
            top: 50%;
            /* width to whole div is 100% of view port */
            width: 100%;
            /* text is aligned center of screen and is in center mode*/
            text-align: center;
            /* text is aligned -50% of y axis */
            transform: translateY(-35%);
            color: antiquewhite;
            font-family: 'Baloo Bhai 2', cursive;
            font-size: 23px;
            letter-spacing: 1px;
        }

        .content p {
            font-family: 'Times New Roman', Times, serif;
            font-size: 18px;
            letter-spacing: 2px;
            line-height: 25px;
        }

        button {
            width: 150px;
            /* font-family: 'Baloo Bhai 2', cursive; */
            font-size: 17px;
            padding: 12px;
            text-align: center;
            margin: 20px 10px;
            border-radius: 30px;
            font-weight: bold;
            border: 2px solid #29fd50;
            background: transparent;
            color: antiquewhite;
            cursor: pointer;
            overflow: hidden;
            position: relative;
        }



        span {
            position: absolute;
            background-color: #29fd50;
            border-radius: 30px;
            left: 0;
            bottom: 0;
            height: 100%;
            width: 0%;
            z-index: -1;
            transition: 0.6s;
        }

        button:hover {
            border: solid 2px black;
            color: black;
        }

        button:hover span {
            width: 100%;
        }
    </style>



</head>

<body>
    <div class="container">
        <img src="/cabin.png" alt="logo">
        <ul class="item">
            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>

    <div class="content">
        <h1 style="color: #29fd50;"> ICT Project Webpage </h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> At provident veniam quisquam perferendis
            distinctio delectus doloremque <br> amet magnam porro repellat beatae corrupti sint voluptatum ipsam <br>
            autem quae tempore, culpa fugiat?</p>
        <button type="button"><span></span>Login</button>
        <button type="button"><span></span>Sign in</button>

    </div>
</body>

</html>


Comments

Post a Comment

Popular posts from this blog

Javascript whole in one

-
Image
 Table of contents Link .js to .html and error Commands Variables Get element by id Taking input from the user Type conversion Math functions Calculate Hypoteneus (practice program) Counter (practice program) Random number generator String methods and functions Slice Method chaining If, else if, else If else (Practice Program) Switch Statement Logical Operators (&&, ||, ! ) Loops Break and continue Nested Loops Functions, nested functions, function expression, and arrow function Template Literals VAR vs LET Number guessing game Temperature converter Array Maps Objects This keyword Class Static variables and functions Inheritance Super Keyword Getters and Setters Instanceof operator Passing Object to function Array to Objects Anonymous Objects Simple Garage System Error handling setTimeout( ) setInterval( ) Date Object Simple Clock Program Synchronous and Asynchronous Code Console.time( ) Important Points: If  indexof () ; returns  - 1 , it means this  elemen...
Read more

3: HTML blog's visual content with source code

-
Image
  1: Text sizes Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 2: Hyperlink with hower text and open in new tab or same C++ 3: New page hyperlink and open in same or new tab HTML 4: Different text formating tags This is normal text This is centered text Ittalics Bold Big Small This is  Subscript  text This is  Superscript  text inserted deleted mark 5: Unorderes list: Things I like are: Macaroni Burgers Pizza Pizzas types are: Peperoni Cheese Fagita Crown 6: Ordered list: With numbers: First Second Third Fourth With Uppercase Alphabet First Second Third Fourth With Lowercase Alphabet First Second Third Fourth With Uppercase Roman First Second Third Fourth With Lowercase Roman First Second Third Fourth 7: Discription list: HTML: This adds structure CSS: This adds design Javascript: This adds fucntionality 8: Basic Table: 9: Table with design: Align center, table outines black, row 1 grey center aligned and height 50 row 2 lightgrey center aligned and...
Read more

Bootstrap whole in one

-
Bootstrap Grid: In  col-md-4 ,  -4  means each column will take 4/12 of row and  -md  means this property will be applied till md breakpoint. <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title > Document </ title >     < link rel =" stylesheet " href =" node_modules/bootstrap/dist/css/bootstrap.css ">     < link rel =" stylesheet " href =" style.css ">     < style >         body {             background-color : # 292d3e ;         }         . c {             background-color : lightblue ;         }         . cc {             bor...
Read more