W3school exercise navbar

Kirubel_2 15 Newbie Poster
9 Months Ago
<!DOCTYPE html>
<html>
<head>
    <title>Exercise V3.0</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="w3.css">
</head>
<body>


<div class="container">
    <div class="header">
        <ul>
        <li ><i class="fa fa-home" id="me"></i></li>
<li><i class="fa fa-trash" ></i></li>
<li ><i class="fa fa-close" id="he"></i></li>
        </ul>
    </div>
    <div class="title">
        <span>Completed 15 of 67 Exercises:</span>
    </div>
    <div class="nav">
        <ul>
            <li><button>JS Variable</button></li>
            <li><button>JS Operator</button></li>
            <li><button>JS Data Type</button></li>
            <li><button>JS Function</button></li>
            <li><button>JS Object</button></li>
            <li><button>JS Operator</button></li>
            <li><button>JS Variable</button></li>
            <li><button>JS Operator</button></li>
            <li><button>JS Variable</button></li>
            <li><button>JS Operator</button></li>
            <li><button>JS Variable</button></li>
            <li><button>JS Operator</button></li>   
            <li><button>JS Variable</button></li>
            <li><button>JS Operator</button></li>
            <li><button>JS Data Type</button></li>
            <li><button>JS Function</button></li>
            <li><button>JS Object</button></li>
            <li><button>JS Operator</button></li>
            <li><button>JS Variable</button></li>
            <li><button>JS Operator</button></li>
            <li><button>JS Variable</button></li>

        </ul>
    </div>
</div>

<section class="bod">
<div class="p1">
    <div class="t1">
        <span>Exercise:</span>
    </div>
    <div class="s2">
        <p>Create a variable called <span style="background: #e7e9eb;">carName</span>, assign the value <span style="background: #e7e9eb;">Volvo</span> to it.</p>
    </div>
    <div class="q1">
        <div class="que">
            </br></br><span style="margin-left: 24px;">var</span>&nbsp;&nbsp;<input type="text" name="b1" id="b1"maxlength="7" style=" font-size: 15px;"><span>="</span><input type="text" name="b2" id="b2" maxlength="5"><span>";</span>
        </div>
        <div class="button">
            <input type="button" value="Show Answer" onclick="nn()" id="b">
        </div>
        </div>
</div>
</section>
<script type="text/javascript">
    function nn(){
var x=document.getElementById("b1");
  if (x.value === "") {
    x.value = "carName";
    x.style.color="blue";
  } else {
    x.value = "";
  }
  var y = document.getElementById("b2");
    if (y.value === "") {
    y.value = "Volvo";
    y.style.color="blue";
  } else {
    y.value = "";
  }
  var z = document.getElementById("b");
     if (z.value === "Show Answer") {
    z.value = "Hide Answer";

  } else {
    z.value = "Show Answer";
  }
    }
</script>
<style>


body{
    margin: 0;
    padding: 0;
width: 100%;
height: 113vh;
    display: inline;
}

.container{
display: block;
position: fixed;
height: 100%;
width: 262px;
background: #38444d;
box-shadow: 0px 3px 3px 3px #0003;
z-index: 1;
}
.container .header{
        display: block;
        padding: 1px 10px;

        background: white;
}
.container .header ul{
    display: flex;
    list-style: none;
    margin-left: -40px;
} 
.container .header ul li{
margin-left:  -10px;
margin-right:  -10px;
margin-top: -7px;
width: 100%;

padding:0px  10px;
text-align: center;
font-size: 24px;

}

#me{
    float: left;
}
#he{
    float: right;
}
.container .title{
        display: block;
        padding: 17px 10px;
    text-align: center;
        background: #E7E9EB;
}
.container .title span{
 font-family:   sans-serif;
 font-size: 15px;
}

.container .nav ul{
list-style: none;
margin-top: 0px;
}
.container .nav ul li{
display: block;
width: 100%;

}

.container .nav li button{
width: 118%;
border: 1px solid transparent;
border-bottom: 1px solid #000;
margin-left:  -40px;
display: block;
font-family: Gadugi;
font-weight: normal;
font-size: 18.5px;
color: #CFDAD1;
background: transparent;
text-align: left;
padding: 14px 30px;
}
.bod{

    margin-left: 264px;
    height:85vh;
z-index: -1;
}
.bod .p1{
margin-top: 130px;
}
.bod .p1 .t1{
    font-family: "Segoe UI Light";
    font-size: 40px;
 margin-left: 32px;
 font-weight: bold;
}
.bod .p1 .s2{
        font-family: sans-serif;
     margin-left: 32px;
     margin-top: 26px;
     font-size: 15px;
}
.bod .p1 .q1{
    margin-top: 34px;
 margin-left: 32px;
 background: #E7E9EB;
 margin-right: 40px;
 height: 290px;
 font-family: monospace;
 font-size: 20px;
 font-weight: thin;
 color: black;
 border-radius: 5px;
}

#b1{
    width: 58px;
    border: 1px solid transparent;
    height: 18px;
    font-family: monospace;
}
#b2{
    width: 43px;
    border: 1px solid transparent;
    height: 18px;
     font-size: 15px;
    font-family: monospace;
}
.button{
    float: right;
    margin-top: 155px;
margin-right: 20px;

}
.button #b{
    height: 44px;
    width: 180px;
    margin-right: 10px;
    margin-bottom: 30px;
    border: 1px solid transparent;
    border-radius: 30px 30px 30px 30px;
    background: #282A35;
    color: white;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    font-size: 18px;

    font-weight: bold;
}
.button #b:hover{
    cursor: pointer;
    background: black;
}
</style>
</body>
</html>
1 Contributor
0 Replies
89 Views
AndreRet commented: Not sure if there is a question in here? +15
Be the first to reply
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.