Skip to content

Commit 7b0e44b

Browse files
Sonal0409Sonal0409
authored
Create index.html
1 parent bf9422f commit 7b0e44b

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎Docker/index.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<style>
6+
body {
7+
font-family: Arial, Helvetica, sans-serif;
8+
margin: 0;
9+
}
10+
11+
html {
12+
box-sizing: border-box;
13+
}
14+
15+
*, *:before, *:after {
16+
box-sizing: inherit;
17+
}
18+
19+
.column {
20+
float: left;
21+
width: 33.3%;
22+
margin-bottom: 16px;
23+
padding: 0 8px;
24+
}
25+
26+
.card {
27+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
28+
margin: 8px;
29+
}
30+
31+
.about-section {
32+
padding: 50px;
33+
text-align: center;
34+
background-color: #474e5d;
35+
color: white;
36+
}
37+
38+
.container {
39+
padding: 0 16px;
40+
}
41+
42+
.container::after, .row::after {
43+
content: "";
44+
clear: both;
45+
display: table;
46+
}
47+
48+
.title {
49+
color: grey;
50+
}
51+
52+
.button {
53+
border: none;
54+
outline: 0;
55+
display: inline-block;
56+
padding: 8px;
57+
color: white;
58+
background-color: #000;
59+
text-align: center;
60+
cursor: pointer;
61+
width: 100%;
62+
}
63+
64+
.button:hover {
65+
background-color: #555;
66+
}
67+
68+
@media screen and (max-width: 650px) {
69+
.column {
70+
width: 100%;
71+
display: block;
72+
}
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
78+
<div class="about-section">
79+
<h1>About Us Page</h1>
80+
<p>Some text about who we are and what we do.</p>
81+
<p>Resize the browser window to see that this page is responsive by the way.</p>
82+
</div>
83+
84+
<h2 style="text-align:center">Our Team</h2>
85+
<div class="row">
86+
<div class="column">
87+
<div class="card">
88+
<img src="/w3images/team1.jpg" alt="Jane" style="width:100%">
89+
<div class="container">
90+
<h2>Jane Doe</h2>
91+
<p class="title">CEO & Founder</p>
92+
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
93+
<p>[email protected]</p>
94+
<p><button class="button">Contact</button></p>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<div class="column">
100+
<div class="card">
101+
<img src="/w3images/team2.jpg" alt="Mike" style="width:100%">
102+
<div class="container">
103+
<h2>Mike Ross</h2>
104+
<p class="title">Art Director</p>
105+
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
106+
<p>[email protected]</p>
107+
<p><button class="button">Contact</button></p>
108+
</div>
109+
</div>
110+
</div>
111+
112+
<div class="column">
113+
<div class="card">
114+
<img src="/w3images/team3.jpg" alt="John" style="width:100%">
115+
<div class="container">
116+
<h2>John Doe</h2>
117+
<p class="title">Designer</p>
118+
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
119+
<p>[email protected]</p>
120+
<p><button class="button">Contact</button></p>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)