Skip to content

Bassam hamdar #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bassamhamdar wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Bassam hamdar #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
441709a
addede html 3 and css and image
bassamhamdar May 11, 2021
41f7cbc
added html file for exercise 2 and one image
bassamhamdar May 11, 2021
41a950d
exercise 1 or ...i forgot
bassamhamdar May 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions bassam hamdar html 3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img class="img" src="images/earth.jpg" alt="image for earth">

<nav>
<ul class="top">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">New page1</a></li>
<li><a href="#">New page2</a></li>
<li><a href="#">New page3</a></li>
<li><a href="#">New page3</a></li>

</ul>
</nav>
<div class="row">
<div class="left">
<h3>Main Menu</h3>
<ul class="middle">
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>


<h3>Block</h3>
<p>Enter block content here</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident repellendus atque, nobis velit doloremque aliquid!</p>

</div>
<div class="right">
<h3>Gallery</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam iste quo fugit exercitationem quos laborum impedit! Optio laboriosam nemo a! Assumenda dignissimos placeat repellendus, corrupti minus tempore facere. Debitis qui laboriosam nemo dolores? Ullam repudiandae ratione eligendi, quia cupiditate rerum quibusdam necessitatibus, laborum consequatur ab quisquam laboriosam, assumenda veniam consequuntur.</p>
<div class="r1">
<h3>Subscription</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nisi sint cum aliquid saepe ducimus vitae aliquam nemo ipsam quis reprehenderit, totam facere! Saepe placeat blanditiis magni dignissimos accusamus corporis beatae impedit voluptates suscipit mollitia enim est, tempora dolore, molestiae quo minus? Excepturi minima, quas maiores commodi nihil quasi, blanditiis beatae praesentium, similique ullam dolorum eveniet quidem. Aperiam nostrum sunt, aut quod dignissimos nemo inventore itaque id ratione aliquid unde voluptatum architecto. Sed, rem! Ipsa quam eaque fugiat dicta non?</p>
</div>
<div class="r2">
<h3>Other Services</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque molestiae veritatis voluptate ullam illo deserunt aut! Odio laudantium iure nesciunt, est sint molestiae quam eos inventore cupiditate aliquam eius enim possimus magnam eaque necessitatibus? Amet, alias velit. Ad voluptas ullam deserunt ex explicabo doloribus possimus quia quibusdam minus, commodi nesciunt fugit reiciendis consequuntur, nulla illum. Nam quaerat fugit qui ipsam deserunt dicta dolorum perspiciatis, doloremque quibusdam quisquam laudantium, voluptates iste.
</p>
</div>
</div>
</div>
<div class="foot">
<form action="">
<label for="name">Name</label>
<input type="text" id="name"><br><br>
<label for="email">Email</label>
<input type="text" id="email"><br><br>
<label for="messageid">Message</label>
<textarea name="message" id="messageid" cols="30" rows="10"></textarea><br>
<input type="submit">
</form>
<br>
<p>CopyRight 2021</p>
</div>

</div>
</body>
</html>





38 changes: 38 additions & 0 deletions bassamhamdarHTML2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Exercise 2</title>
</head>
<body>
<header>
<nav>
<ul class="top">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Team</a></li>
</ul>
</nav>
</header>
<div class="image">
<img src="images/coding.jpg" alt="an image that represents coding">
</div>
<div class="bottom">
<ul>
<li>coding</li>
<li>technology</li>
<li>computer</li>
<li>errors</li>
<li>linux</li>
</ul>
</div>
<footer>
<a href="https://codi.tech/">Codi.tech</a>
</footer>

</body>
</html>
25 changes: 25 additions & 0 deletions bassamhamdarhtml1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<h1>Html Exercise 1</h1>
<br>
<h2><i>General info</i></h2>
<p> <strong>Html</strong> ipsum dolor sit, amet consectetur adipisicing elit. Vero, nisi officiis. Dolor corporis modi voluptate blanditiis quo nemo autem earum sunt, qui cupiditate numquam consectetur. Laboriosam ea fugiat tempora totam obcaecati est a, debitis voluptatibus. Officiis necessitatibus voluptatem quas cum est. Ipsum quasi ut quibusdam aliquam temporibus odio ab numquam.</p>
<img src="images/coding.jpg" alt="images represents coding">
<br>
<h2><i>Importance</i></h2>
<p><b>html</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum iste deleniti accusamus voluptatem voluptate omnis in, ipsum quibusdam! Tempore in tenetur sequi, maiores voluptatum odio quis repellat. Numquam nesciunt eligendi sunt. Nam quam ut neque blanditiis architecto corporis? Eaque culpa quidem atque at beatae ullam distinctio adipisci et odio aliquid.</p>
</header>
<footer>
<h3>Conclusion</h3>
<p><small>learn html</small></p>
</footer>
</body>
</html>
Binary file added images/coding.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/earth.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 63 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@

body{
color: blanchedalmond;
background-color: #202020;
}
.container{
position: relative;
background-color: #39555a;
width: fit-content;
height: fit-content;
margin: 50px 200px;
}
.img{
width: 100%;
height: 250px;
}
.top{
text-align: center;

}
.top li{
list-style: none;
display: inline-block;
line-height: 100px;

}
.top li a{
text-decoration: none;
padding: 0 20px;
color: black;

}
.right{
float: right;
width: 80%;
}
.left{
float: left;
width: 20%;
}

.r1{
float: left;
width: 50%;
}
.r2{
float: right;
width: 50%;
}
.foot{

text-align: center;
}

ul li a{
color: white;
}
.top li a{
color: white;
}
nav{
background-color: grey;
}
43 changes: 43 additions & 0 deletions style2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
* {
margin: 0%;
padding: 0%;
}

body{
background-color: rgb(26, 47, 68);

}
ul{
text-align: center;
}

.top li{
list-style: none;
display: inline-block;
line-height: 100px;
}

ul li a{
text-decoration: none;
padding: 0 20px;
color: black;
}
nav {
width: 100%;
height: 75px;
background-color: rgb(45, 109, 109);


}
.image{
width: 100%;
text-align: center;
margin-top: 20px;

}
footer{
text-align: center;
}
.bottom li{
display: block;
}