Untitled

the html code:

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

<head>
    <title>My Css Website</title><link rel="stylesheet" href="firstwebsite.css">
    </head>

    <body>
        <nav>
            <ul class="topnav" id="dropdownclick">
                <li><a href="#home">Home</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#about">About</a></li>
                <li class="topnav-right"><a href="#Signup">Sign up</a></li>
                <li class="topnav-right"><a href="#Signin">Sign in</a></li>
                <li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownmenu()">&#9776;</a></li>
            </ul>
        </nav>

        <div class="container" id="section-1-gradient">
            <div class="row">
                <div class="col-6">
                 <div class="leftside-col">
                    <h1 class="Large">Crazy Radness</h1>
                     <h1 class="Large">Made for Developers</h1>
                 </div>
                    <form>
                    <div class="leftside-col">
                        <h2>Username</h2>
                        <input class="inputbox" name="Username"type="text" placeholder="Username">
<h2>Password</h2>
                        <input class="inputbox" name="Password"type="text" placeholder="Password">
                        </div>
                    </form>
                </div>
                 <div class="col-6">
                 <div class="rightside-col">
                     <iframe width="560" height="315" src="https://www.youtube.com/embed/rYeSA1vgIUE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                     </div>
                </div>
            </div>
        </div>


    <script>
        function dropdownmenu() {
           var x  = document.getElementById("dropdownclick");
            if (x.className === "topnav") {
                x.className += " responsive";
                /* change topnav to topnav.responsive*/
            } else {
                x.className = "topnav";
            }
        }
    </script>

    </body>

</html>

the css code:
/*##### Default #####*/
nav,
header,
footer {
    display: block;
}

body{
    line-height: 1;
    margin: 0;
}

.container {
    width: 100%;
    margin: auto;
    padding-top: 4%;
    padding-bottom: 4%;
}

.row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.row::after {
    display: table;
    clear: both;
    content: "";
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}


/*##### Custom Style #####*/

#section-1-gradient {
  background: #076DFF; /* for browsers that do no support gradients */
    background:  -webkit-linear-gradient(#076DFF, #65a5ff); /* for safari 5.11 to 6.0 */
    background: -o-linear-gradient(#076DFF, #65a5ff); /* for Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#076DFF, #65a5ff); /* for Firefox 3.6 to 15 */
    background: linear-gradient(#076DFF, #65a5ff); /* Standard Syntax */
}

div.leftside-col {
    margin-left: 30%;
}

div.rightside-col {
    margin-left: 15%;
}

h1.Large {
    color: #fff;
    font-size: 56px;
    margin: 0;
    line-height: 70px;
}

form h2 {
    color: white;
}

input[type="text"]{
    font-size: 20px;
    width: 400px;
    min-width: 100px;
    padding: 5px;
    border-radius: 7px;
}


/*######### Nav Bar #####*/

nav {
    width: 100%;
    margin: 0;
}

nav ul {
    background-color: #ccc;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ul.topnav li {
    list-style: none;
    float: left;
}

ul.topnav li.topnav-right {
    float: right;
}

ul.topnav li a {
    display: block;
    text-decoration: none;
    min-height: 16px;
    text-align: center;
    padding: 14px;
    text-transform: uppercase;
    color: #666;
}

ul.topnav li a:hover {
    background-color: #0000ff;
    color: white;
}

ul.topnav li.dropdownIcon {
    display: none;
}

/*##### Mobile ####*/
@media screen and (max-width: 600px){
    ul.topnav li:not(:nth-child(1)){
        display: none;
    }
    ul.topnav li.dropdownIcon {
        display: block;
        float: right;
    }

    ul.topnav.responsive li.dropdownIcon {
        position: absolute;
        top: 0;
        right: 0;
    }

    ul.topnav.responsive {
        position: relative;
    }
   ul.topnav.responsive li {
        display: inline;
        float: none;
    }

    ul.topnav.responsive li a {
        display: block;
        text-align: left;
    }
}

.col-6{
    width: 100%;
    margin: 0;
}

div.leftside-col,
div.rightside-col {
    margin: 15px;
}

input[type="text"] {
    width: 300px;
}