A beautiful HTml/CSS websote

 ওয়েবসাইট এর ছবিঃ




ভার্সণঃ ১ 

<!DOCTYPE html>

<html lang="en">

<head>

<style>

*{

    margin: 0;

    padding: 0;

}


.main{

    width: 100%;

    background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);

    background-position: center;

    background-size: cover;

    height: 100vh;

}


.navbar{

    width: 1200px;

    height: 75px;

    margin: auto;

}


.icon{

    width: 200px;

    float: left;

    height: 70px;

}


.logo{

    color: #ff7200;

    font-size: 35px;

    font-family: Arial;

    padding-left: 20px;

    float: left;

    padding-top: 10px;

    margin-top: 5px

}


.menu{

    width: 400px;

    float: left;

    height: 70px;

}


ul{

    float: left;

    display: flex;

    justify-content: center;

    align-items: center;

}


ul li{

    list-style: none;

    margin-left: 62px;

    margin-top: 27px;

    font-size: 14px;

}


ul li a{

    text-decoration: none;

    color: #fff;

    font-family: Arial;

    font-weight: bold;

    transition: 0.4s ease-in-out;

}


ul li a:hover{

    color: #ff7200;

}


.search{

    width: 330px;

    float: left;

    margin-left: 270px;

}


.srch{

    font-family: 'Times New Roman';

    width: 200px;

    height: 40px;

    background: transparent;

    border: 1px solid #ff7200;

    margin-top: 13px;

    color: #fff;

    border-right: none;

    font-size: 16px;

    float: left;

    padding: 10px;

    border-bottom-left-radius: 5px;

    border-top-left-radius: 5px;

}


.btn{

    width: 100px;

    height: 40px;

    background: #ff7200;

    border: 2px solid #ff7200;

    margin-top: 13px;

    color: #fff;

    font-size: 15px;

    border-bottom-right-radius: 5px;

    border-bottom-right-radius: 5px;

    transition: 0.2s ease;

    cursor: pointer;

}

.btn:hover{

    color: #000;

}


.btn:focus{

    outline: none;

}


.srch:focus{

    outline: none;

}


.content{

    width: 1200px;

    height: auto;

    margin: auto;

    color: #fff;

    position: relative;

}


.content .par{

    padding-left: 20px;

    padding-bottom: 25px;

    font-family: Arial;

    letter-spacing: 1.2px;

    line-height: 30px;

}


.content h1{

    font-family: 'Times New Roman';

    font-size: 50px;

    padding-left: 20px;

    margin-top: 9%;

    letter-spacing: 2px;

}


.content .cn{

    width: 160px;

    height: 40px;

    background: #ff7200;

    border: none;

    margin-bottom: 10px;

    margin-left: 20px;

    font-size: 18px;

    border-radius: 10px;

    cursor: pointer;

    transition: .4s ease;

    

}


.content .cn a{

    text-decoration: none;

    color: #000;

    transition: .3s ease;

}


.cn:hover{

    background-color: #fff;

}


.content span{

    color: #ff7200;

    font-size: 65px

}


.form{

    width: 250px;

    height: 380px;

    background: linear-gradient(to top, rgba(0,0,0,0.8)50%,rgba(0,0,0,0.8)50%);

    position: absolute;

    top: -20px;

    left: 870px;

    transform: translate(0%,-5%);

    border-radius: 10px;

    padding: 25px;

}


.form h2{

    width: 220px;

    font-family: sans-serif;

    text-align: center;

    color: #ff7200;

    font-size: 22px;

    background-color: #fff;

    border-radius: 10px;

    margin: 2px;

    padding: 8px;

}


.form input{

    width: 240px;

    height: 35px;

    background: transparent;

    border-bottom: 1px solid #ff7200;

    border-top: none;

    border-right: none;

    border-left: none;

    color: #fff;

    font-size: 15px;

    letter-spacing: 1px;

    margin-top: 30px;

    font-family: sans-serif;

}


.form input:focus{

    outline: none;

}


::placeholder{

    color: #fff;

    font-family: Arial;

}


.btnn{

    width: 240px;

    height: 40px;

    background: #ff7200;

    border: none;

    margin-top: 30px;

    font-size: 18px;

    border-radius: 10px;

    cursor: pointer;

    color: #fff;

    transition: 0.4s ease;

}

.btnn:hover{

    background: #fff;

    color: #ff7200;

}

.btnn a{

    text-decoration: none;

    color: #000;

    font-weight: bold;

}

.form .link{

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

    font-size: 17px;

    padding-top: 20px;

    text-align: center;

}

.form .link a{

    text-decoration: none;

    color: #ff7200;

}

.liw{

    padding-top: 15px;

    padding-bottom: 10px;

    text-align: center;

}

.icons a{

    text-decoration: none;

    color: #fff;

}

.icons ion-icon{

    color: #fff;

    font-size: 30px;

    padding-left: 14px;

    padding-top: 5px;

    transition: 0.3s ease;

}

.icons ion-icon:hover{

    color: #ff7200;

}

</style>

</head>

    <title>Siddikur Rahman Rayhan HTML/CSS WEB</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>


    <div class="main">

        <div class="navbar">

            <div class="icon">

                <h2 class="logo">STR Rayhan</h2>

            </div>


            <div class="menu">

                <ul>

                    <li><a href="fb.com/siddikurbhola">HOME</a></li>

                    <li><a href="http://html-cssweb.blogspot.com/">ABOUT</a></li>

                    <li><a href="http://learntubebd.blogspot.com/">SERVICE</a></li>

                    <li><a href="http://dailytorun.blogspot.com/">DESIGN</a></li>

                    <li><a href="http://str-education.blogspot.com/">CONTACT</a></li>

                </ul>

            </div>


            <div class="search">

                <input class="srch" type="search" name="" placeholder="Type To text">

                <a href="#"> <button class="btn">Search</button></a>

            </div>


        </div> 

        <div class="content">

            <h1>Md. Siddikur<br><span>Rahman Rayhan</span> <br>TAMIM</h1>

            <p class="par">Assalamualaikum,This Is Siddikur Rahman Rayhan. From Bhola Bangladesh  <br> This Is a HTML/CSS Website 

                <br> Are U Want to Join My Team Click Join Button</p>


                <button class="cn"><a href="#">JOIN US</a></button>


                <div class="form">

                    <h2>Login Here</h2>

                    <input type="email" name="email" placeholder="Enter Email Here">

                    <input type="password" name="" placeholder="Enter Password Here">

                    <button class="btnn"><a href="#">Login</a></button>


                    <p class="link">Don't have an account<br>

                    <a href="#">Sign up </a> here</a></p>

                    <p class="liw">Log in with</p>


                    <div class="icons">

                        <a href="fb.com/siddikurbhola"><ion-icon name="logo-facebook"></ion-icon></a>

                        <a href="instagram.com/str.bhola"><ion-icon name="logo-instagram"></ion-icon></a>

                        <a href="twitter.com/siddikur hola"><ion-icon name="logo-twitter"></ion-icon></a>

                        <a href="https://www.blogger.com/profile/17311891914697801012"><ion-icon name="logo-google"></ion-icon></a>

                        <a href="https://www.blogger.com/profile/17311891914697801012"><ion-icon name="logo-skype"></ion-icon></a>

                    </div>


                </div>

                    </div>

                </div>

        </div>

    </div>

    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>

</body>

</html>


ভার্সণ ২ 

<!DOCTYPE html>


<html lang="en">


<head>

<meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

  <title>Typing Effect With CSS</title>

  <link rel="stylesheet" href="style.css">


<style>


body{

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #1d1f20;

  background-image: url("siddikur1.jpeg");

font-family: courier, serif;

 font-size: 20px;

}

h1{

 color:#009879;

    font-family: "Incosolata", Consolas, monospace;

    font-size: 4em;

    color: #d7b94c;

    text-shadow: 0 0 20px rgba(0, 0, 0, 5);

}

.str-rayhan{

    position: relative;

}

.str-rayhan::after{

    content: '|';

    position: absolute;

    right: 0;

    color: white;

    background-color: #1d1f20;

    width: 100%;

    animation: typing 20s steps(14) alternate infinite,

                line 1s infinite;

}

@keyframes typing{

    to{

        width: 0%;

    }

}

@keyframes line {

    50%{

        color: transparent;

    }

}


*{


    margin: 0;


    padding: 0;


}




.main{


    width: 100%;


    background: linear-gradient(to top, rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);


    background-position: center;


    background-size: cover;


    height: 100vh;


}




.navbar{


    width: 1200px;


    height: 75px;


    margin: auto;


}




.icon{


    width: 200px;


    float: left;


    height: 70px;


}




.logo{


    color: #ff7200;


    font-size: 35px;


    font-family: Arial;


    padding-left: 20px;


    float: left;


    padding-top: 10px;


    margin-top: 5px


}




.menu{


    width: 400px;


    float: left;


    height: 70px;


}




ul{


    float: left;


    display: flex;


    justify-content: center;


    align-items: center;


}




ul li{


    list-style: none;


    margin-left: 62px;


    margin-top: 27px;


    font-size: 14px;


}




ul li a{


    text-decoration: none;


    color: #fff;


    font-family: Arial;


    font-weight: bold;


    transition: 0.4s ease-in-out;


}




ul li a:hover{


    color: #ff7200;


}




.search{


    width: 330px;


    float: left;


    margin-left: 270px;


}




.srch{


    font-family: 'Times New Roman';


    width: 200px;


    height: 40px;


    background: transparent;


    border: 1px solid #ff7200;


    margin-top: 13px;


    color: #fff;


    border-right: none;


    font-size: 16px;


    float: left;


    padding: 10px;


    border-bottom-left-radius: 5px;


    border-top-left-radius: 5px;


}




.btn{


    width: 100px;


    height: 40px;


    background: #ff7200;


    border: 2px solid #ff7200;


    margin-top: 13px;


    color: #fff;


    font-size: 15px;


    border-bottom-right-radius: 5px;


    border-bottom-right-radius: 5px;


    transition: 0.2s ease;


    cursor: pointer;


}


.btn:hover{


    color: #000;


}




.btn:focus{


    outline: none;


}




.srch:focus{


    outline: none;


}




.content{


    width: 1200px;


    height: auto;


    margin: auto;


    color: #fff;


    position: relative;


}




.content .par{


    padding-left: 20px;


    padding-bottom: 25px;


    font-family: Arial;


    letter-spacing: 1.2px;


    line-height: 30px;


}




.content h1{


    font-family: 'Times New Roman';


    font-size: 50px;


    padding-left: 20px;


    margin-top: 9%;


    letter-spacing: 2px;


}




.content .cn{


    width: 160px;


    height: 40px;


    background: #ff7200;


    border: none;


    margin-bottom: 10px;


    margin-left: 20px;


    font-size: 18px;


    border-radius: 10px;


    cursor: pointer;


    transition: .4s ease;


    


}




.content .cn a{


    text-decoration: none;


    color: #000;


    transition: .3s ease;


}




.cn:hover{


    background-color: #fff;


}




.content span{


    color: #ff7200;


    font-size: 65px


}




.form{


    width: 250px;


    height: 380px;


    background: linear-gradient(to top, rgba(0,0,0,0.8)50%,rgba(0,0,0,0.8)50%);


    position: absolute;


    top: -20px;


    left: 870px;


    transform: translate(0%,-5%);


    border-radius: 10px;


    padding: 25px;


}




.form h2{


    width: 220px;


    font-family: sans-serif;


    text-align: center;


    color: #ff7200;


    font-size: 22px;


    background-color: #fff;


    border-radius: 10px;


    margin: 2px;


    padding: 8px;


}




.form input{


    width: 240px;


    height: 35px;


    background: transparent;


    border-bottom: 1px solid #ff7200;


    border-top: none;


    border-right: none;


    border-left: none;


    color: #fff;


    font-size: 15px;


    letter-spacing: 1px;


    margin-top: 30px;


    font-family: sans-serif;


}




.form input:focus{


    outline: none;


}




::placeholder{


    color: #fff;


    font-family: Arial;


}




.btnn{


    width: 240px;


    height: 40px;


    background: #ff7200;


    border: none;


    margin-top: 30px;


    font-size: 18px;


    border-radius: 10px;


    cursor: pointer;


    color: #fff;


    transition: 0.4s ease;


}


.btnn:hover{


    background: #fff;


    color: #ff7200;


}


.btnn a{


    text-decoration: none;


    color: #000;


    font-weight: bold;


}


.form .link{


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


    font-size: 17px;


    padding-top: 20px;


    text-align: center;


}


.form .link a{


    text-decoration: none;


    color: #ff7200;


}


.liw{


    padding-top: 15px;


    padding-bottom: 10px;


    text-align: center;


}


.icons a{


    text-decoration: none;


    color: #fff;


}


.icons ion-icon{


    color: #fff;


    font-size: 30px;


    padding-left: 14px;


    padding-top: 5px;


    transition: 0.3s ease;


}


.icons ion-icon:hover{


    color: #ff7200;


}


</style>


</head>


    <title>Siddikur Rahman Rayhan HTML/CSS WEB</title>


    <link rel="stylesheet" href="style.css">


</head>


<body>




    <div class="main">


        <div class="navbar">


            <div class="icon">


                <h2 class="logo">STR Rayhan</h2>


            </div>




            <div class="menu">


                <ul>


                    <li><a href="fb.com/siddikurbhola">HOME</a></li>


                    <li><a href="http://html-cssweb.blogspot.com/">ABOUT</a></li>


                    <li><a href="http://learntubebd.blogspot.com/">SERVICE</a></li>


                    <li><a href="http://dailytorun.blogspot.com/">DESIGN</a></li>


                    <li><a href="http://str-education.blogspot.com/">CONTACT</a></li>


                </ul>


            </div>




            <div class="search">


                <input class="srch" type="search" name="" placeholder="Type To text">


                <a href="#"> <button class="btn">Search</button></a>


            </div>




        </div> 


        <div class="content">


            <h1>Md. Siddikur<br><span>Rahman Rayhan</span> <br>TAMIM</h1>


            <p class="par">Assalamualaikum,This Is Siddikur Rahman Rayhan. From Bhola Bangladesh  <br> This Is a HTML/CSS Website 


                <br> Are U Want to Join My Team Click Join Button</p>

<hr><br><br><br>

<h1 class="str-rayhan">

    <marquee behavior="scroll" direction="" onmousehover="this.stop();" onmouseover="this.stop();" onmouseout="this.start();">This Website Was made By <a style="color:D6EEEE" href="https://facebook.com/str.bhola"> 'Siddikur Rahman Rayhan'</a> </marquee>

    </h1>



                <button class="cn"><a href="#">JOIN US</a></button>




                <div class="form">


                    <h2>Login Here</h2>


                    <input type="email" name="email" placeholder="Enter Email Here">


                    <input type="password" name="" placeholder="Enter Password Here">


                    <button class="btnn"><a href="#">Login</a></button>




                    <p class="link">Don't have an account<br>


                    <a href="#">Sign up </a> here</a></p>


                    <p class="liw">Log in with</p>




                    <div class="icons">


                        <a href="fb.com/siddikurbhola"><ion-icon name="logo-facebook"></ion-icon></a>


                        <a href="instagram.com/str.bhola"><ion-icon name="logo-instagram"></ion-icon></a>


                        <a href="twitter.com/siddikur hola"><ion-icon name="logo-twitter"></ion-icon></a>


                        <a href="https://www.blogger.com/profile/17311891914697801012"><ion-icon name="logo-google"></ion-icon></a>


                        <a href="https://www.blogger.com/profile/17311891914697801012"><ion-icon name="logo-skype"></ion-icon></a>


                    </div>




                </div>


                    </div>


                </div>


        </div>


    </div>

    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>


</body>


</html>


ওয়ে




Siddikur Rahman Rayhan (Tamim )

Siddikur Rahman Rayhan from Bangladesh is a versatile individual with a keen interest in technology, cricket, politics, and Islamic studies. With a strong academic background and proficiency in multiple languages, he excels in blogging, YouTube, web development, Graphix Design and content creation. Skilled in video editing, meme generation, and photography, Rayhan is dedicated to personal and professional growth, seeking connections with like-minded individuals to support his endeavors.

إرسال تعليق (0)
أحدث أقدم