Skip to content
Advertisements

HTML And CSS – Sample Website


HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>menu</title>
    <link rel="stylesheet" type="text/css" href="menu5.css">
</head>
<body>
    <b class="a1"></b>
    <b class="a2">Computer Science VS Software Engineering</b>
    <b class="a3">Computer Science is the study of how computers work, mostly from the theoretical and mathematical perspective.
You should choose Computer Science if you like math, logic, or if you want to get into a specialized field in CS such as artificial intelligence, machine learning, security, or graphics.
Software Engineering is the study of how software systems are built, including topics such as project management, quality assurance, and software testing.
You should choose Software Engineering if you are more interested in the hands-on approach, and if you want to learn the overall life cycle of how software is built and maintained.
Both Computer Science and Software Engineering teach fundamentals of programming and computer science, so you can choose either one to become a software developer.</b>
    <div class="navbar">
        <div class="container">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">SERVICE</a></li>
                <li><a href="#">PORTFOLICO</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </div>

</body>
</html>

CSS CODE:

body{
    padding: 0;
    margin: 0;
}
.navbar{
    background-color: #262626;
    width: 100%;
    height: 100px;
    
}
.container{
    width: 80%;
    height: 100%;
    margin: 0 auto;
}
ul{
    margin: 0;
    padding: 0;
    float:right;
}
ul li{
    list-style: none;
    float: left;
}
ul li a{
    text-transform: uppercase;
    color:#fff;
    padding: 0 30px;
    line-height: 100px;
    height: 100px;
    display: block;
    font-family: arial;
    text-decoration: none;
    position: relative;
    z-index: 1;
}
ul li a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #f00;
    transition: .5s;
    z-index: -1;
}
ul li a:hover:before{
    height: 100%;
}
.a1{
    position: absolute;
    background-image: url(http://www.bkv.com/blog/wp-content/uploads/2015/05/Basecamp.jpg);
    background-size: 800px 500px;
    width: 800px;
    height: 500px;
    top: 150px;
    left: 100px;
    border:1px solid #262626;
    border-radius: 10px;
    transition: .5s;
    cursor: pointer;
}
.a1:after{
    position: absolute;
    content: "";
    top: 0px;
    left: 900px;
    width: 450px;
    height: 500px;
    background: #808080;
    cursor: pointer;
    opacity: 0.3
}
.a2{
    position: absolute;
    top: 170px;
    left: 1030px;
    font-size: 32px;
    width: 400px;
    font-family: sans-serif;
    color: #262626;
    cursor: pointer;
    transition: .5s
}
.a3{
    position: absolute;
    top: 270px;
    left: 1050px;
    width: 360px;
    font-size: 16px;
    color: #4d4d4d;
    transition: .5s;
    cursor: pointer;
}
.a3:before{
    content: "";
    position: absolute;
    top: 543px;
    left: -1100px;
    width: 1585px;
    height: 50px;
    background:black;
    cursor: pointer;
}
.a1:hover{
    opacity: 0.7
}
.a2:hover{
    color:#660000;
}
.a3:hover{
    color:black;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: