Scribd
Upload
59 views18 pages

Website Design and Development

The document provides code for a responsive website design including HTML, CSS, and JavaScript. The HTML code contains the website structure and navigation menu. The CSS code styles the design and layout including the navbar, content sections, and media queries for responsiveness. JavaScript is used for the mobile navigation menu.

Uploaded by

berhanu Dagne
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
59 views18 pages

Website Design and Development

The document provides code for a responsive website design including HTML, CSS, and JavaScript. The HTML code contains the website structure and navigation menu. The CSS code styles the design and layout including the navbar, content sections, and media queries for responsiveness. JavaScript is used for the mobile navigation menu.

Uploaded by

berhanu Dagne
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Website design and development

HTML(full responsive website code)


<!DOCTYPE
html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Css/style.css">

</head>
<body>
<div class="logo">
<h1>DG Tech</h1>
<h3>የቴክኖሎጅ ት/ትና መረጃ </h3>
</div>
<div class="navbar" id="mynavbar">

<a href="#home">HOME</a>
<a href="#news">DESIGN</a>
<div class="dropdown">
<button class="dropbtn">TUTORIALS
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-list">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JAVASCRIPT</a>
<a href="#">PHP</a>
<a href="#">MYSQL</a>
<a href="#">PYTHON</a>
</div>
</div>
<a href="#contact">CONTACT</a>
<a href="#about">ABOUT</a>
<a href="#about" class="ri">LOGIN</a>
<a href="#about" class="ri">SIGNUP</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon"
onclick="myFunction()">&#9776;</a>
</div>

<div class="cont">
<h1>Learn <br> <span>Technology</span></h1>
<p class="para"> <p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas sit amet pretium urna. <br> Vivamus
venenatis velit nec neque ultricies, eget elementum magna tristique.
</p>

<button class="learn"><a href="#">Start Now</a></button>


</div>

<script>
function myFunction() {
var x = document.getElementById("mynavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>

</body>

</html>

CSS
body
{margin:0;
font-family:Arial;
background: linear-gradient(to top,
rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(newbg.jpg);
background-position: center;
background-size: cover;
height: 100vh;}

.navbar {
padding-left: 10px 0 10px;
overflow: hidden;
background: rgba(0,0,0,0.5);
}
.logo{
background: rgba(0,0,0,0.3);
width: 100%;
color: #ff7200;
text-align: center;

}
.logo h1{
padding-top: 10px;
margin: 0;
font-weight: 900;
line-height: 50px;

}
.logo h3{
margin: 0;
color: aquamarine;
letter-spacing: 1.2px;
}
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
font-family: arial;
font-weight: bold;
transition: 0.4s ease-in-out;
}
.navbar a.ri{
float: right;
border-bottom: 1px solid #ff7200;
border-radius: 20px;
padding: 14px 16px;
}

.navbar .icon {
display: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.dropdown-list {
display: none;
position: absolute;
background: rgba(0,0,0,0.5);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-list a {
float: none;
color: aquamarine;
padding: 12px 16px;
margin-left: 10PX;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover, .dropdown:hover .dropbtn {
border-bottom: 1px solid aquamarine;
border-radius: 20px;
color: #ff7200;

.dropdown-list a:hover {
border: 1px solid aquamarine;
border-radius: 20px;
color: #ff7200;
}

.dropdown:hover .dropdown-list {
display: block;
}

.cont{
width: 100%;
height: auto;
margin: auto;
color: #fff;
position: relative;

}
.cont .para{
padding-left: 40px;
padding-bottom: 25;
font-family: arial;
letter-spacing: 1.2px;
line-height: 30px;
font-size: 15px;

}
.cont h1{
font-family: 'Times New Roman';
font-size: 40px;
padding-left: 40px;
margin-top: 9%;
letter-spacing: 2px;
}
.cont .learn{
width: 140px;
height: 40px;
background-color: #ff7200;
border: none;
margin-bottom: 10px;
margin-left: 20px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
}
.cont .learn a{
text-decoration: none;
color: #000;
transition: 0.4s ease-in-out;
}
.learn:hover{
background-color: #fff;

}
.cont span{
color: #ff7200;
}
@media screen and (max-width: 750px) {
.navbar a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.navbar a.icon {
float: right;
display: block;

@media screen and (max-width: 750px) {


.navbar.responsive {position: relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .dropdown {float: none;}
.navbar.responsive .dropdown-list {position: relative;}
.navbar.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}

html
<!DOCTYPE html>

<html lang="en">

<head>

<title>Webpage Design</title>

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

</head>

<body>

<div class="main">

<div class="navbar">

<div class="icon">

<h2 class="logo">PraRoz</h2>

</div>
<div class="menu">

<ul>

<li><a href="#">HOME</a></li>

<li><a href="#">ABOUT</a></li>

<li><a href="#">SERVICE</a></li>

<li><a href="#">DESIGN</a></li>

<li><a href="#">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>Web Design & <br><span>Development</span> <br>Course</h1>

<p class="par">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt neque

expedita atque eveniet <br> quis nesciunt. Quos nulla vero consequuntur, fugit nemo ad
delectus

<br> a quae totam ipsa illum minus laudantium?</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="#"><ion-icon name="logo-facebook"></ion-icon></a>

<a href="#"><ion-icon name="logo-instagram"></ion-icon></a>

<a href="#"><ion-icon name="logo-twitter"></ion-icon></a>

<a href="#"><ion-icon name="logo-google"></ion-icon></a>

<a href="#"><ion-icon name="logo-skype"></ion-icon></a>

</div>

</div>

</div>

</div>

</div>

</div>

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

</body>

</html>

Css
*{

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;

You might also like