مشروع Web Technologies Project (CV Website) | HTML | CSS | IUG
حل المشروع (الكود)
1)
Html code:-
Note: I have added to display your facebook insta and twitter accounts if want you can use u can place links in after </li> as shown in code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Personal WebSite</title>
</head>
<body>
<div class="box">
<img src="profile.jpg" alt="" class="box-img">
<div class="content">
<h1><b>Personal information</b></h1>
<h5>Full name: pavan</h5>
<h5> Gender: male</h5>
<h5>Birth date: 11th december 1998</h5>
<h5>place of birth: A.P, india</h5>
<h5>job title: web developer</h5>
<h5>Experience : 2 years</h5>
</div>
<ul>
<li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus-square" aria-hidden="true"></i></a></li>
</ul>
</div>
</body>
</html>
Css code:-
body{
margin: 0;
padding: 0;
background: url(bg.jpg) no-repeat;
background-size: cover;
}
.box{
width: 450px;
background: rgba(0, 0, 0, 0.4);
padding: 40px;
text-align: left;
margin: auto;
margin-top: 5%;
color: white;
font-family: 'Century Gothic',sans-serif;
}
.box-img{
border-radius: 50%;
width: 200px;
height: 200px;a
align: left;
}
.box h1{
font-size: 40px;
letter-spacing: 4px;
font-weight: 100;
}
.box h5{
font-size: 20px;
letter-spacing: 3px;
font-weight: 100;
}
ul{
margin: 0;
padding: 0;
}
.box li{
display: inline-block;
margin: 6px;
list-style: none;
}
.box li a{
color: white;
text-decoration: none;
font-size: 60px;
transition: all ease-in-out 250ms;
}
.box li a:hover{
color: #b9b9b9;
}
2)<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<table>
<tr>
<th>course name</th>
<th>total hours</th>
<th>start date</th>
<th>end date</th>
<th>course information</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
</body>
3)html code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Experience</title>
</head>
<body>
<h1>All experience information</h1>
<p>add paragraph information you want here</p>
<h2> web development</h2>
<p>add paragraph information you want here</p>
<h2>web development</h2>
<p>add paragraph information you want here</p>
</body>
</html>
Css code:-
body
{
margin: 0;
padding: 0;
background-color:white;
font-family: 'Arial';
}
4)html code:-<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}
input[type=text], input[type=password], textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Add course page</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Re-type Password</b></label>
<input type="password" placeholder="Retype Password" name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
</html>
5)<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
.container {
padding: 50px;
background-color: lightblue;
}
input[type=text], input[type=password], textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Add experience page</h1> </center>
<hr>
<label> Firstname </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label>
Phone :
</label>
<input type="text" name="country code" placeholder="Country Code" value="+91" size="2"/>
<input type="text" name="phone" placeholder="phone no." size="10"/ required>
Current Address :
<textarea cols="80" rows="5" placeholder="Current Address" value="address" required>
</textarea>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Re-type Password</b></label>
<input type="password" placeholder="Retype Password" name="psw-repeat" required>
<button type="submit" class="registerbtn">Register</button>
</form>
</body>
</html>
6)Html code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Course Certificate</title>
</head>
<body>
<h1>Course "Network management admin"</h1>
<h3>From 01/08/2018 to 01/08/2020</h3>
<h3>institute " bbbb"</h3>
<img src="course.jpg" class= "img">
</body>
</html>
Css:-
.Img{
Width: 1080px;
}
 | HTML | CSS | IUG المشروع المطلوب حل المشروع (الكود) 1) Html code:- Note: I have added to disp…){kind=link}
تعليقات
إرسال تعليق