Skip to content

Commit 8d0a63b

Browse files
author
Redwan Sharafat Kabir
committed
table, responsive design
1 parent 2148297 commit 8d0a63b

12 files changed

+329
-5
lines changed

‎HTML5 and CSS/CSS Div.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,13 @@
3434
background-color: peru;
3535
width: 250px;
3636
height: 150px;
37-
/*margin: top right bottom left;*/
37+
/*margin: top right bottom left;*/
3838
margin: 50px 50px 50px 20px;
3939
padding: 40px 30px 40px 30px;
4040
box-shadow: 10px 10px 5px grey;
41-
border: 10px dotted brown;
41+
/*border: 10px dotted brown;*/
42+
border: 8px dashed brown;
43+
border-bottom-style: solid;
4244
float: left;
4345
}
4446
#main_div {

‎HTML5 and CSS/CSS Lists.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>css lists</title>
6+
<style>
7+
#ul1 {
8+
list-style-type: square;
9+
list-style-image: url(nodelogo.png);
10+
list-style-position: outside;
11+
background: silver;
12+
}
13+
#ul1 li {
14+
font-size: 25px;
15+
background: yellowgreen;
16+
}
17+
18+
#ul2 {
19+
list-style: square inside url(nodelogo.png);
20+
}
21+
#ul2 li {
22+
font-size: 25px;
23+
}
24+
25+
.ul3 {
26+
list-style: none;
27+
}
28+
.ul3 li {
29+
font-size: 25px;
30+
float: left;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<ul id="ul1">
36+
<li>Bangladesh</li>
37+
<li>India</li>
38+
<li>Pakistan</li>
39+
</ul>
40+
<ul id="ul2">
41+
<li>Bangladesh</li>
42+
<li>India</li>
43+
<li>Pakistan</li>
44+
</ul>
45+
<ul class="ul3">
46+
<li>Bangladesh&nbsp;&nbsp;</li>
47+
<li>India&nbsp;&nbsp;</li>
48+
<li>Pakistan&nbsp;&nbsp;</li>
49+
</ul>
50+
</body>
51+
</html>

‎HTML5 and CSS/CSS and Web Page Layout.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>css & web page layout</title>
6+
7+
</head>
8+
<body>
9+
10+
</body>
11+
</html>

‎HTML5 and CSS/CSS forms.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>CSS Forms</title>
6+
<style>
7+
form {
8+
width: 500px;
9+
padding: 20px;
10+
border: 2px solid black;
11+
margin: 30px auto;
12+
}
13+
input[type='text'], input[type='password'], select {
14+
width: 350px;
15+
height: 20px;
16+
border: none;
17+
border-bottom: 1px silver solid;
18+
outline: none;
19+
background: #e5dfdf;
20+
}
21+
textarea {
22+
resize: none;
23+
border: none;
24+
border-bottom: 1px silver solid;
25+
background: #e5dfdf;
26+
width: 343px;
27+
outline: none;
28+
}
29+
input[type='submit'] {
30+
background: #678f14;
31+
color: white;
32+
padding: 5px;
33+
border: 1px solid #d3bbbb;
34+
width: 350px;
35+
padding: 10px;
36+
}
37+
input[type='submit']:hover {
38+
background: #d03f3f;
39+
color: black;
40+
}
41+
input[type='text']:focus, input[type='password']:focus, select:focus {
42+
background: lightskyblue;
43+
}
44+
input[type='text']:hover, input[type='password']:hover, select:hover, textarea:hover {
45+
border-color: #678f14;
46+
}
47+
</style>
48+
</head>
49+
<body>
50+
<form>
51+
<h2>&nbsp;Complete registration</h2><hr>
52+
<table>
53+
<tr>
54+
<td><lebel for="user">Username:</lebel><br><br></td>
55+
<td><input type="text" id="user" name="user"><br><br></td>
56+
</tr>
57+
<tr>
58+
<td><lebel for="pass">Password:</lebel><br><br><br></td>
59+
<td><input type="password" id="pass" name="password"><br><br><br></td>
60+
</tr>
61+
<tr>
62+
<td><lebel>Gender:</lebel><br><br></td>
63+
<td>
64+
Male:<input type="radio" name="gender" value="male"> Female:<input type="radio" name="gender" value="female">
65+
<br><br>
66+
</td>
67+
</tr>
68+
<tr>
69+
<td><lebel>Skills:</lebel><br><br></td>
70+
<td>
71+
Java:<input type="checkbox" value="java"> | Android:<input type="checkbox" value="android">
72+
| Algorithm:<input type="checkbox" value="algorithm"><br><br>
73+
</td>
74+
</tr>
75+
<tr>
76+
<td><lebel for="country">Select your country:&nbsp;&nbsp;</lebel><br><br></td>
77+
<td height="50px" width="20px">
78+
<select id="country" name="country">
79+
<option value="">Select your country</option>
80+
<option value="bd">Bangladesh</option>
81+
<option value="in">India</option>
82+
<option value="pk">Pakistan</option>
83+
</select><br><br>
84+
</td>
85+
</tr>
86+
<tr>
87+
<td><lebel for="comment">About yourself:</lebel></td>
88+
<td><textarea rows="5"></textarea></td>
89+
</tr>
90+
<tr>
91+
<td></td>
92+
<td height="50px">
93+
<input type="submit" value="Click here to submit" name="submit form">
94+
</td>
95+
</tr>
96+
</table>
97+
</form>
98+
</body>
99+
</html>

‎HTML5 and CSS/CSS navigation.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>css lists</title>
6+
<style>
7+
.ul3 {
8+
list-style: none;
9+
background: yellowgreen;
10+
}
11+
.ul3 li {
12+
font-size: 25px;
13+
float: left;
14+
background: yellowgreen;
15+
margin-left: 50px;
16+
margin-top: 30px;
17+
width: 200px;
18+
padding: 20px;
19+
text-align: center;
20+
}
21+
.ul3 li:hover {
22+
background: brown;
23+
color: white;
24+
border: 5px solid yellowgreen;
25+
}
26+
.ul3 a {
27+
color: black;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
33+
<ul class="ul3">
34+
<a href="https://en.wikipedia.org/wiki/Bangladesh"><li>Bangladesh</li></a>
35+
<a href="https://en.wikipedia.org/wiki/India"><li>India</li></a>
36+
<a href="https://en.wikipedia.org/wiki/Pakistan"><li>Pakistan</li></a>
37+
</ul>
38+
39+
</body>
40+
</html>

‎HTML5 and CSS/CSS table.html

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,49 @@
33
<head>
44
<meta charset="utf-8" />
55
<style>
6-
6+
table {
7+
width: 500px;
8+
height: 100px;
9+
}
10+
table, th, td {
11+
/*border: 5px solid silver;*/
12+
border-bottom: 5px solid silver;
13+
border-collapse: collapse;
14+
padding: 15px;
15+
}
16+
td, th {
17+
text-align: center;
18+
vertical-align: middle;
19+
}
20+
thead {
21+
background: yellowgreen;
22+
}
23+
tbody tr:hover {
24+
background: #0094ff;
25+
}
726
</style>
827
</head>
928
<body>
1029
<table>
1130
<thead>
12-
31+
<tr>
32+
<th>ID.</th>
33+
<th>Student Name:</th>
34+
<th>Section:</th>
35+
</tr>
1336
</thead>
1437

1538
<tbody>
16-
39+
<tr>
40+
<td>171-15-8737</td>
41+
<td>Redwan Sharafat Kabir</td>
42+
<td>D</td>
43+
</tr>
44+
<tr>
45+
<td>171-15-8905</td>
46+
<td>Himel Junaet</td>
47+
<td>D</td>
48+
</tr>
1749
</tbody>
1850
</table>
1951
</body>

‎HTML5 and CSS/HTML5 and CSS.csproj

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,12 @@
1212
<Content Include="Content\scrolling-nav.css" />
1313
<Content Include="Content\Site.css" />
1414
<Content Include="CSS Anchor_state.html" />
15+
<Content Include="CSS and Web Page Layout.html" />
1516
<Content Include="CSS Div.html" />
17+
<Content Include="CSS forms.html" />
1618
<Content Include="CSS inline.html" />
19+
<Content Include="CSS Lists.html" />
20+
<Content Include="CSS navigation.html" />
1721
<Content Include="CSS selector, internal and external.html" />
1822
<Content Include="CSS table.html" />
1923
<Content Include="CSS text and font.html" />
@@ -30,6 +34,8 @@
3034
<Content Include="Images.html" />
3135
<Content Include="Linking.html" />
3236
<Content Include="List.html" />
37+
<Content Include="Responsive and Transparent login page.css" />
38+
<Content Include="Responsive and Transparent login page.html" />
3339
<Content Include="Scripts\scrolling-nav.js" />
3440
<Content Include="index.html" />
3541
<Content Include="Scripts\bootstrap.js" />

‎HTML5 and CSS/Nature-Tree.jpg

197 KB
Loading

‎HTML5 and CSS/Responsive and Transparent login page.css

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
height: 100vh;
13+
background: url('Nature-Tree.jpg');
14+
background-size: cover;
15+
}
16+
17+
.main-form {
18+
width: 100%;
19+
max-width: 400px;
20+
padding: 20px;
21+
background: rgba(220, 220, 220, .5);
22+
border-radius: 15px;
23+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
24+
}
25+
26+
input {
27+
display: block;
28+
width: 100%;
29+
background: rgba(240, 240, 240, 0.5);
30+
border: none;
31+
font-size: 15px;
32+
padding: 13px;
33+
outline: none;
34+
border-radius: 40px;
35+
color: #555;
36+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
37+
margin: 20px auto;
38+
}
39+
40+
button {
41+
display: block;
42+
width: 100%;
43+
background: #383131;
44+
border: none;
45+
font-size: 15px;
46+
padding: 13px;
47+
outline: none;
48+
border-radius: 40px;
49+
color: #FFFFFF;
50+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
51+
margin: 20px auto;
52+
font-weight: 600;
53+
}
54+
55+
button:hover {
56+
background: #17bdb8;
57+
color: #383131;
58+
font-weight: 600;
59+
}
60+
61+
img {
62+
width: 130px;
63+
display: block;
64+
margin: 30px auto;
65+
}

‎HTML5 and CSS/Responsive and Transparent login page.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Responsive and Transparent login page</title>
6+
<link rel="stylesheet" href="Responsive and Transparent login page.css"/>
7+
</head>
8+
<body>
9+
<div class="main-form">
10+
<img src="user.png">
11+
<form action="">
12+
<input type="text" placeholder="Email Address">
13+
<input type="password" placeholder="Password">
14+
<button type="submit">Login</button>
15+
</form>
16+
</div>
17+
</body>
18+
</html>

‎HTML5 and CSS/nodelogo.png

1.18 KB
Loading

‎HTML5 and CSS/user.png

4.65 KB
Loading

0 commit comments

Comments
 (0)