<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="17_8.css">
    <title>17/08/2023</title>
</head>
<body>
    <div class="page">
     <nav>
        <div class="name_nav">
            <a href="#"><p>you-code.in</p></a>
        </div>
        <div class="side">
        <a href="#">manu</a>
        </div>
     </nav>
     <div class="centerpage1">
        <div class="content">
        <div class="frist">
        <h1> let start </h1>
        </div>
        <div class="frist1">
            <h1> a new </h1>
        </div>
        <div class="frist2">
            <h1>journey </h1>
        </div>
    </div>
        <img src="logo1.png" alt="">
     </div>
    <div class="kno">
        <a href="#"><button type="button" class="btn btn-outline-light">KNOW ABOUT KNOW</button></a>
    </div>
    </div>
    <div class="page2">
        <div class="topname">
        <h1>languages</h1>
        </div>
        <div class="part">
            <div class="part1">
                <li>C language</li>
                <li>C++ language</li>
                <li>JAVA</li>
                <li>PYTHON</li>
                <li> javsscripying language</li>
                <li>web desinging </li>
                <li>web development</li>


            </div>

            <div class="part2">

                <video alt="video" autoplay >
                    <!-- if your video is  save in diffrent floder then copy it src path
                    for better result try to save video in same place where your html file persent  -->
                    <source src="name.mp4" type="video/mp4">
                </video>
            </div>
            </div>
       
            </div>

            <div class="page3">
                <div class="sections">
                    <div class="section1">
                        <img src="ali.png" alt="my pic">
                    </div>

                    <div class="section2">
                        <p>Hi, I am Mohammad suleman ali an software engineer, I love to create websites and I m a WordPress developer. most of the time is used to prefer to do debugging.  in my free time, I use to create funny HTML pages, create attractive pages, and play with codes by modifying their structure, trying to decrease the size of the code.
                            love to make friends, and hanging out with them are my habits </p>
                       
                    </div>

                </div>
                <div class="footer">
                    <p>Email:mohammadsulemanali8731@gmail.com</p>
                    <p>contact numner:123456789</p>
           
                </div>

            </div>

</body>
</html>

css code

*{
    margin: 0%;
}
body{
    background-color: black;
}
/* main nav css */
nav{
    display: flex;
    justify-content: center;
    align-items: center;
    color: brown;
    justify-content: space-between ;
}
/* website name are you can add logo here */
.name_nav a{
    text-transform: uppercase;
    font-family: 'Times New Roman', Times, serif;
    text-shadow: 0px 0px 15px whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
    text-decoration: none;
    margin-top: 10px;
    margin-left: 15px;
}

.side a{
    text-transform: uppercase;
    font-family: 'Times New Roman', Times, serif;
    text-shadow: 0px 0px 15px whitesmoke;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
    text-decoration: none;
    margin-right: 15px;
}
/* middle PART */
.centerpage1{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
}
/* let start */
.frist{
    text-transform: uppercase;
    text-shadow: 0px 0px 15px whitesmoke;
    color: brown;
}
/* A NEW */
.frist h1{
    font-size:7vw;
}
 
.frist1{
    text-transform: uppercase;
    text-shadow: 0px 0px 15px whitesmoke;
    color: brown;
}
.frist1 h1{
    font-size: 7vw;
}
/* jpurney */
.frist2{
    text-transform: uppercase;
    text-shadow: 0px 0px 15px whitesmoke;
    color: brown;
}
.frist2 h1{
    font-size: 7vw;
}
/* middle button */
.kno{
    margin-top: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* page1  */
.page{
    height: 715px;
}
/* page2 */
.page2{
    height: 710px;
   
/* language */
}
.topname{
    text-shadow: 0px 0px 15px whitesmoke;
    margin-top: 45px;
    color: rgb(89, 42, 165);
    display:flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-family: 'Times New Roman', Times, serif;
}
/* Hide the controls */
video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    display: none !important;
}

video::-webkit-media-controls-panel {
    display: none !important;
}

video {
    width: 640px;
    height: 360px;
}
/* language names and video  */
.part{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* lanuage name   */
.part1{
    /* text-shadow: 0px 0px 10px whitesmoke; */
    font-family: 'Times New Roman', Times, serif;
    color: brown;
    font-size: 3vw;
    margin-top: 70px;  
}
.page3{
    height: 600px;
}
.sections{
    display: flex;
    justify-content: center;
    align-items: center;
}
.section1 img{
    width: 640px;
    height: 640px;
}
.section2{
    color: aliceblue;
    width: 640px;
    height: 640px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    gap: 220px;
}