Tuesday, August 31, 2021

Responsive Website Design with CSS Layout Float

Responsive Website Design with CSS Layout Float Code
<!DOCTYPE html>>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="nav.css">
    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <title>Html websities</title>
</head>

<body>
    <header>
        <h1>Cities</h1>
    </header>
    <section>
        <nav>
            <ul>
                <li>london</li>
                <li>paris</li>
                <li>toyko</li>
            </ul>
        </nav>
        <article>
            <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
                metropolitan area of over 13 million inhabitants.</p>
            <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going
                back to its founding by the Romans, who named it Londinium</p>
        </article>
    </section>
    <footer>footer</footer>
</body>

</html>

CSS STYLESHEET CODE
*{
    box-sizing: border-box;
}
body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
header{
    background-color: #666;
    padding:10px;
    text-align: center;
    font-size: 35px;
    color: #fff;
}
nav{
    float: left;
    width: 30%;
    padding:20px;
    height:300px;
    background-color: #ccc;
}
section{
    clear: both;
    content: "";
    display: table;
}
article{
    float: left;
    width:70%;
    padding:20px;
    height:300px;
    background-color: #f1f1f1;
}
footer{
    background-color: gray;
    padding: 10px;
    text-align: center;
}

Monday, August 30, 2021

Responsive Website Design with CSS Layout Flex Box

 Responsive Website Design with CSS Layout Flex Box Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

    <h1>Css layout flexbox</h1>

    <header>

        <h1>Pakistan</h1>

    </header>

    <section>

        <nav>

            <UL>

                <li>London</li>

                <li>Paris</li>

                <li>Tokyo</li>

            </UL>

        </nav>

        <article>

            <h1>London</h1>

            <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a

                metropolitan area of over 13 million inhabitants.</p>

                <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>

        </article>

    </section>

    <footer>Copright websites</footer>

</body>

</html>


CSS SYLESHEET CODE

*{

    box-sizing: border-box;

}

body{

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

header{

    background-color: gray;

    padding:30px;

    text-align: center;

    font-size: 35px;

    color: #fff;

}

section{

    display: -webkit-flex;

    display: flex;

}

nav{

    -webkit-flex:flex 1 ;

    -ms-flex:flex 1 ;

    flex:flex 1 ;

    background-color: #ccc;

    padding:20px;

}

article{

    -webkit-flex:flex 3 ;

    -ms-flex: flex 3;

    flex:flex 3;

    background-color:#f1f1f1 ;

}

footer{

    background-color: gray;

    text-align: center;

    padding:10px ;

}

Sunday, August 29, 2021

Html Css Search Bar with Button

 Html Css Search Bar with Button Code

<!DOCTYPE html>>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="nav.css">

    <script src="https://use.fontawesome.com/d07a8c2f55.js"></script>

    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Html Froms</title>

</head>


<body>

<div class="main-con">

    <form>

        <input type="text"id="search"placeholder="Search.....">

        <button>Search</button>

    </form>

</div>

</body>

</html>


CSS STYLESHEET CODE

body{

    margin: 0px;

    background-color: aliceblue;

}

.main-con{

    position: absolute;

    top: 50%;

    left:50%;

    transform:translate(-50%,50%) ;

}

JavaScript Animated

  JavaScript Animated <!DOCTYPE html> <html> <style> #myContainer {   width: 400px;   height: 400px;   position: relative;...