Skip to content

Commit 77d8445

Browse files
Sidkul2000Sidkul2000
authored
Added website designs (#14)
1 parent 4a9cb26 commit 77d8445

File tree

7 files changed

+492
-0
lines changed

7 files changed

+492
-0
lines changed

‎Website designs/index.css

+236
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
body{
2+
background-color:rgb(231, 231, 231);
3+
font-size: 15px;
4+
}
5+
.container{
6+
margin: 30px;
7+
padding: 10px;
8+
height: 640px;
9+
}
10+
/*Stylesheet*/
11+
.main{
12+
background-color: white;
13+
}
14+
#menu a:link,#menu a:visited{
15+
color: black;
16+
text-decoration: none;
17+
cursor:auto;
18+
}
19+
#defaultmenu a:link,#defaultmenu a:visited{
20+
display: inline;
21+
color: blue;
22+
font-size: 16px;
23+
}
24+
/*Stylesheet 1*/
25+
.border{
26+
border-radius: 4px;
27+
}
28+
#top{
29+
background-color:rgb(45, 165, 75);
30+
color: white;
31+
margin: 20px;
32+
padding: 3px 20px 20px;
33+
line-height: 15px;
34+
}
35+
#left{
36+
float: left;
37+
width:25%;
38+
margin-left: 10px;
39+
}
40+
#left a:link,#left a:visited{
41+
width: 165px;
42+
background-color: rgb(231, 231, 231);
43+
text-decoration: none;
44+
color: black;
45+
display: block;
46+
margin: 5px 0px;
47+
padding: 4px;
48+
border-radius: 4px;
49+
cursor: pointer;
50+
border: 1px rgb(180, 178, 178) solid;
51+
}
52+
#left a:hover{
53+
background-color: white;
54+
}
55+
#left a:first-child{
56+
background-color: rgb(45, 165, 75);
57+
color: white;
58+
font-weight: bold;
59+
}
60+
#mid{
61+
float: left;
62+
width:40%;
63+
}
64+
#mid a:link,#mid a:visited{
65+
color: black;
66+
display: inline;
67+
}
68+
#mid a:hover{
69+
text-decoration: none;
70+
}
71+
72+
#right{
73+
background-color:rgb(67, 128, 219);
74+
color: white;
75+
float: right;
76+
width: 25%;
77+
margin-right: 45px;
78+
padding: 20px;
79+
height: 50%;
80+
box-sizing: border-box;
81+
}
82+
#bottom{
83+
float: right;
84+
background-color: rgb(231, 231, 231);
85+
font-size: 13px;
86+
margin: 20px 40px;
87+
padding: 15px 30px;
88+
border: 1px rgb(180, 178, 178) solid;
89+
height: 60px;
90+
clear: both;
91+
}
92+
/*Stylesheet 2*/
93+
#one{
94+
color: white;
95+
font-size: 20px;
96+
padding: 0px 20px;
97+
margin-bottom: 35px;
98+
line-height: 20px;
99+
}
100+
.two{
101+
padding: 5px 20px 20px;
102+
}
103+
.two a:link,.two a:visited{
104+
color: rgb(201,41,41);
105+
text-decoration: none;
106+
}
107+
.two a:hover{
108+
color: rgb(201,41,41);
109+
text-decoration: underline;
110+
}
111+
#three{
112+
background-color: rgb(248, 210, 248);
113+
color: rgb(201, 41, 41);
114+
font-size: 16px;
115+
}
116+
#four{
117+
color: white;
118+
text-align: center;
119+
padding: 10px;
120+
margin-top: 10px;
121+
}
122+
#five{
123+
margin: 40px;
124+
}
125+
#five a:link,#five a:visited{
126+
background-color: white;
127+
color: rgb(201, 41, 41);
128+
text-decoration: none;
129+
text-align: center;
130+
padding: 7px 30px;
131+
margin: 10px;
132+
font-size: 18px;
133+
border-radius: 20px;
134+
}
135+
#five a:hover{
136+
background-color: rgb(201, 41, 41);
137+
border: 1px solid white;
138+
color: white;
139+
}
140+
#five a.active{
141+
background-color: rgb(201, 41, 41);
142+
border: 1px solid white;
143+
color: white;
144+
}
145+
/* Stylesheet 3*/
146+
#main_page{
147+
padding: 20px;
148+
}
149+
#top_link{
150+
margin: 40px 0;
151+
}
152+
#top_link a:link,#top_link a:visited{
153+
color: white;
154+
background-color: rgb(94, 100, 100);
155+
padding: 7px 30px;
156+
margin: 0 3px;
157+
text-decoration: none;
158+
159+
}
160+
#top_link a.activelink{
161+
background-color: rgb(45, 165, 75);
162+
color: white;
163+
}
164+
#top_link a:hover{
165+
background-color: rgb(153, 150, 150);
166+
}
167+
#link{
168+
width: 80%;
169+
}
170+
#link a:link,#link a:visited{
171+
color: black;
172+
}
173+
#link a:hover{
174+
color: rgb(45, 165, 75);
175+
}
176+
#no-link{
177+
background-color: rgb(231, 231, 231);
178+
padding: 0px 10px 15px;
179+
margin: 20px 0 15px;
180+
border: 1px solid rgb(184, 189, 189);
181+
box-sizing: border-box;
182+
}
183+
/* Stylesheet 4*/
184+
#div1{
185+
background-color: black;
186+
color: rgb(82, 206, 113);
187+
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
188+
padding: 20px 30px ;
189+
}
190+
#div2{
191+
margin: 20px 0;
192+
float: left;
193+
}
194+
#div2 a:link,#div2 a:visited{
195+
color: rgb(82, 206, 113);
196+
text-decoration: none;
197+
line-height: 10px;
198+
}
199+
#div2 a:hover{
200+
color: white;
201+
}
202+
#div2 a.active_link{
203+
color: white;
204+
}
205+
#div3{
206+
float: right;
207+
width: 50%;
208+
border: 1px solid white;
209+
color: white;
210+
padding: 10px 15px 20px;
211+
width: 35%;
212+
margin-right: 60px;
213+
border-radius: 5px;
214+
}
215+
#div4{
216+
clear: both;
217+
line-height: 25px;
218+
}
219+
#div4 a:link,#div4 a:visited{
220+
color: white;
221+
padding: 0 10px 0 0;
222+
}
223+
#div4 a:hover{
224+
color: rgb(82, 206, 113);
225+
}
226+
#div5{
227+
color: white;
228+
font-size: 13px;
229+
text-align: center;
230+
border: 1px solid white;
231+
padding: 15px;
232+
border-radius: 5px;
233+
width: 80%;
234+
margin: auto;
235+
margin-top: 20px;
236+
}

‎Website designs/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS</title>
8+
<style>
9+
.iframe_container{
10+
overflow: hidden;
11+
/* 16:9 aspect ratio */
12+
padding-top: 56.25%;
13+
position: relative;
14+
}
15+
.iframe_container iframe {
16+
border: 0;
17+
height: 100%;
18+
left: 0;
19+
position: absolute;
20+
top: 0;
21+
width: 100%;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<div class="iframe_container">
27+
<iframe src="style.html" name="iframe_a" width="100%" style="border: none;"></iframe>
28+
</div>
29+
</body>
30+
</html>

‎Website designs/style.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS</title>
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
<body>
11+
<div class="main container">
12+
<div id="menu">
13+
<h1>Welcome to My Homepage</h1>
14+
Use the menu to select different Stylesheets
15+
<ul>
16+
<li><a href="style1.html">Stylesheet1</a></li>
17+
<li><a href="style2.html">Stylesheet2</a></li>
18+
<li><a href="style3.html">Stylesheet3</a></li>
19+
<li><a href="style4.html">Stylesheet4</a></li>
20+
<li><a href="#">No Stylesheet</a></li>
21+
</ul>
22+
</div>
23+
<div id="defaultmenu">
24+
<p>
25+
<h1>Same Page Different Stylesheets</h1>
26+
This is a demonstration of how different stylesheets can change the layout of your html page.You can change the layout of this page by selecting<br> different stylesheets in the menu,or by selecting one of the following links:<br>
27+
<a href="style1.html">Stylesheet 1</a>,
28+
<a href="style2.html">Stylesheet 2</a>,
29+
<a href="style3.html">Stylesheet 3</a>,
30+
<a href="style4.html">Stylesheet 4</a>.
31+
</p>
32+
<p>
33+
<h2>No Styles</h2>
34+
This page uses DIV elements to group different sections of the HTML page.Click here to see how page looks like with no stylesheet:<br>
35+
<a href="#">No Stylesheet</a>.
36+
</p>
37+
<p>
38+
<h3>Side-Bar</h3>
39+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br><br>
40+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<bR> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum <br>iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio<br> dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
41+
</p>
42+
</div>
43+
</div>
44+
</body>
45+
</html>

‎Website designs/style1.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>CSS</title>
8+
<link href="index.css" rel="stylesheet">
9+
</head>
10+
<body style="font-size: 18px;">
11+
<div class="main container">
12+
<div id="top" class="border">
13+
<h1>Welcome to My Homepage</h1>
14+
Use the menu to select different Stylesheets
15+
</div>
16+
<div id="left">
17+
<ul>
18+
<a href="#">Stylesheet 1</a>
19+
<a href="style2.html">Stylesheet 2</a>
20+
<a href="style3.html">Stylesheet 3</a>
21+
<a href="style4.html">Stylesheet 4</a>
22+
<a href="style.html">No Stylesheet</a>
23+
</ul>
24+
</div>
25+
<div id="mid">
26+
<h1>Same Page Different StyleSheets</h1>
27+
This is demonstration of how different stylesheets can change the layout of your HTML page.
28+
You can change the layout of this page by selecting different stylesheets in the menu,or by selecting one of the following links:<br>
29+
<a href="#">Stylesheet1</a>,
30+
<a href="style2.html">Stylesheet2</a>,
31+
<a href="style3.html">Stylesheet3</a>,
32+
<a href="style4.html">Stylesheet4</a>.
33+
<h2>No Styles</h2>
34+
This page uses DIV elements to group different sections of the HTML page.Click here to see how the page looks like with no stylesheet:<br>
35+
<a href="style.html">No Stylesheet</a>.
36+
</div>
37+
<div class="border" id="right">
38+
<h2>Side Bar</h2>
39+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
40+
</div>
41+
<div class="border" id="bottom">
42+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
43+
</div>
44+
</div>
45+
</body>
46+
</html>

0 commit comments

Comments
 (0)