Skip to content

Commit 854a8fe

Browse files
nilajcodernilajcoder
committed
mywebsite
1 parent 2d0688f commit 854a8fe

11 files changed

Lines changed: 538 additions & 0 deletions

File tree

‎Html/WebSite/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎Html/WebSite/css/home.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/*
2+
it is id selector based and uses flexbox for layout.
3+
element selector based and uses flexbox for layout.
4+
5+
types of css
6+
1. Inline CSS
7+
answer : inline css is used to apply a unique style to a single element.
8+
It is defined within the HTML tag using the style attribute.
9+
example: <h1 style="color:blue;">Hello World</h1>
10+
2. Internal CSS
11+
ans : Internal CSS is used to define styles for a single HTML document.
12+
It is defined within the <style> tag in the <head> section of the HTML document.
13+
14+
example: <style> h1 {color:blue;} </style>
15+
3. External CSS
16+
answer: External CSS is used to define styles for multiple HTML documents.
17+
It is defined in a separate CSS file and linked to the HTML document using the <link> tag.
18+
19+
answer: <link rel="stylesheet" type="text/css" href="style.css">
20+
21+
22+
1.slectors in css?
23+
Answer: Selectors are used to select the elements in the HTML document.
24+
There are different types of selectors in CSS:
25+
i) Element selector
26+
Definition: The element selector is used to select the elements in the HTML document.
27+
syntax: h1 { color: red; }
28+
ii) Class selector
29+
Definition: The class selector is used to select the elements with the specific class in the HTML document.
30+
syntax: .class { color: red; }
31+
iii) ID selector
32+
Definition: The ID selector is used to select the element with the specific ID in the HTML document.
33+
syntax: #id { color: red; }
34+
iv) Universal selector
35+
Definition: The universal selector is used to select all the elements in the HTML document.
36+
syntax: * { color: red; }
37+
v) Attribute selector
38+
Definition: The attribute selector is used to select the elements with the specific attribute in the HTML document.
39+
syntax: [attribute] { color: red; }
40+
vi) Pseudo-class selector
41+
Definition: The pseudo-class selector is used to select the elements with the specific state in the HTML document.
42+
syntax: :hover { color: red; }
43+
vii) Pseudo-element selector
44+
Definition: The pseudo-element selector is used to select the part of the element in the HTML document.
45+
syntax: ::before { content: 'Hello'; }
46+
47+
**priroty given to the css selectors it is highest to lowest?
48+
Answer: The priority of the CSS selectors is as follows:
49+
50+
1. Inline styles
51+
2. ID selectors
52+
3. Class selectors
53+
4. Element selectors
54+
5. Universal selectors
55+
6. Attribute selectors
56+
7. Pseudo-class selectors
57+
8. Pseudo-element selectors
58+
59+
60+
**lower to higher priority of css selectors?
61+
Answer: The priority of the CSS selectors is as follows:
62+
1. Pseudo-element selectors
63+
2. Pseudo-class selectors
64+
3. Attribute selectors
65+
4. Universal selectors
66+
5. Element selectors
67+
6. Class selectors
68+
7. ID selectors
69+
8. Inline styles
70+
71+
*/
72+
73+
h1{
74+
text-align: center;
75+
color: azure;
76+
77+
78+
}
79+
80+
p{
81+
text-align: center;
82+
font-size: 20px;
83+
color: white;
84+
}
85+
86+
87+
ul {
88+
list-style-type: none;
89+
margin: 0;
90+
padding: 0;
91+
overflow: hidden;
92+
background-color: #333;
93+
}
94+
95+
li {
96+
float: left;
97+
}
98+
99+
li a:hover {
100+
background-color: #111;
101+
}
102+
103+
li a {
104+
display: block;
105+
color: white;
106+
text-align: center;
107+
padding: 14px 16px;
108+
text-decoration: none;
109+
}
110+
111+
112+
113+
114+
/*
115+
116+
* Home.css
117+
* This CSS file styles the home page of the website.
118+
* It includes styles for the header, navigation bar, and links
119+
120+
it is class based and uses flexbox for layout.
121+
122+
*/
123+
124+
125+
/* General header styling */
126+
127+
.background {
128+
129+
background: url('../img/homebg.jpg') no-repeat center center fixed;
130+
background-size: cover;
131+
background-position: center;
132+
background-attachment: fixed;
133+
height: 100vh;
134+
width: 100%;
135+
}
136+
137+
138+
.header {
139+
background-color: #333;
140+
padding: 15px 0;
141+
text-align: center;
142+
}
143+
144+
/* Navbar styling */
145+
.navbar {
146+
display: flex;
147+
justify-content: center;
148+
gap: 20px;
149+
}
150+
151+
/* Styling for the links */
152+
.navbar a {
153+
color: white;
154+
text-decoration: none;
155+
font-size: 18px;
156+
padding: 10px 15px;
157+
transition: 0.3s;
158+
}
159+
160+
/* Hover effect */
161+
.navbar a:hover {
162+
background-color: #555;
163+
border-radius: 5px;
164+
}

‎Html/WebSite/css/login.css‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
2+
3+
h1{
4+
text-align: center;
5+
color: black;
6+
font-size: 30px;
7+
margin-top: 20px;
8+
margin-bottom: 20px;
9+
}
10+
11+
p{
12+
text-align: center;
13+
font-size: 20px;
14+
color: black;
15+
margin-top: 10px;
16+
margin-bottom: 10px;
17+
}
18+
19+
20+
body{
21+
background: url('../img/login.jpg') no-repeat center center fixed;
22+
}
23+
24+
.login-container {
25+
width: 50%; /* Adjust width as needed */
26+
margin: 0 auto; /* Centers horizontally */
27+
padding: 20px; /* Adds some padding around the container */
28+
29+
background-color: #f9f9f9; /* Light background color */
30+
border-radius: 10px; /* Rounded corners */
31+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
32+
33+
background-size: cover;
34+
background-position: center;
35+
36+
37+
38+
39+
}
40+
41+
label {
42+
display: block;
43+
text-align: left;
44+
font-weight: bold;
45+
margin-top: 10px;
46+
}
47+
48+
input[type="text"],
49+
input[type="password"] {
50+
width: 100%;
51+
padding: 10px;
52+
margin-top: 5px;
53+
border: 1px solid #ccc;
54+
border-radius: 5px;
55+
box-sizing: border-box;
56+
}
57+
58+
input[type="submit"] {
59+
background-color: #007bff; /* Bootstrap primary color */
60+
color: white;
61+
border: none;
62+
padding: 10px;
63+
width: 100%;
64+
margin-top: 15px;
65+
border-radius: 5px;
66+
cursor: pointer;
67+
font-size: 16px;
68+
}
69+
70+
input[type="submit"]:hover {
71+
background-color: #0056b3; /* Darker shade on hover */
72+
}

‎Html/WebSite/css/register.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
2+
3+
body{
4+
background: url('../img/login.jpg') no-repeat center center fixed;
5+
background-size: cover; /* Ensures the image covers the entire background */
6+
background-position: center; /* Centers the image */
7+
}
8+
9+
.register-container {
10+
11+
width: 50%; /* Adjust width as needed */
12+
margin: 0 auto; /* Centers horizontally */
13+
padding: 20px; /* Adds some padding around the container */
14+
background-color: #f9f9f9; /* Light background color */
15+
border-radius: 10px; /* Rounded corners */
16+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
17+
18+
}
19+
20+
h1 {
21+
color: #333;
22+
}
23+
24+
P{
25+
color: #555;
26+
font-size: 18px;
27+
text-align: center;
28+
}
29+
30+
label {
31+
display: block;
32+
text-align: left;
33+
font-weight: bold;
34+
margin-top: 10px;
35+
}
36+
37+
input[type="text"],
38+
input[type="password"] {
39+
width: 100%;
40+
padding: 10px;
41+
margin-top: 5px;
42+
border: 1px solid #ccc;
43+
border-radius: 5px;
44+
box-sizing: border-box;
45+
}
46+
47+
input[type="submit"] {
48+
background-color: #28a745;
49+
color: white;
50+
border: none;
51+
padding: 10px;
52+
width: 100%;
53+
margin-top: 15px;
54+
border-radius: 5px;
55+
cursor: pointer;
56+
font-size: 16px;
57+
}
58+
59+
input[type="submit"]:hover {
60+
background-color: #218838;
61+
}

0 commit comments

Comments
 (0)