Skip to content

Commit b0a5c10

Browse files
AhmedRaja1AhmedRaja1
authored
Merge pull request AhmedRaja1#34 from AshleyAlexJacob/main
Coldplay Band Website
2 parents 9cbe69b + 16bf54b commit b0a5c10

24 files changed

+464
-0
lines changed

‎HTML Library/Coldplay Band Website/.gitkeep

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎HTML Library/Coldplay Band Website/002.jpg

4.3 MB
Loading

‎HTML Library/Coldplay Band Website/223.jpg

157 KB
Loading

‎HTML Library/Coldplay Band Website/Contact Us.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<html>
2+
<title>Contact Us</title>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="Contact-Us(Style).css">
5+
<body>
6+
7+
<div class="wrapper">
8+
<div class"nav">
9+
<div class="left">
10+
<ul>
11+
<li><a href="#">Log In</a></li>
12+
<li><a href="#">Sign Up</a></li>
13+
14+
</div>
15+
<div class="right">
16+
<ul>
17+
<li><a href="Index.html">Home</a></li>
18+
<li><a href="#">About</a></li>
19+
<li><a href="#">Band Members</a></li>
20+
<li><a href="#">Merchandise</a></li>
21+
<li><a href="#">More</a></li>
22+
</ul>
23+
</div>
24+
25+
</div>
26+
27+
<div class="header">
28+
<h1>CONTACT US</h1>
29+
30+
</div>
31+
32+
<div class="form">
33+
<form>
34+
<input type="text" placeholder="Name"/>
35+
<input type="text" placeholder="E-Mail"/>
36+
<input type="text" id="msg"placeholder="Message"/>
37+
38+
</form>
39+
<button type="button">Submit</button>
40+
</div>
41+
</div>
42+
</head>
43+
</body>
44+
</html>

‎HTML Library/Coldplay Band Website/Contact-Us(Style).css

+137
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
html,body{
2+
margin:0;
3+
padding: 0;
4+
width: 100%;
5+
6+
}
7+
body{
8+
width: 100%;
9+
height: 100vh;
10+
background: url(db58738391092a7d2b0a123a62dcd107.jpg);
11+
background-repeat: no-repeat;
12+
background size: cover;
13+
display: table;
14+
font-family: quicksand;
15+
}
16+
.nav{
17+
position: fixed;
18+
top: 0;
19+
left:0;
20+
margin:0;
21+
padding: 0;
22+
width: 100%;
23+
height: 80px;
24+
font-family: Verdana;
25+
background-color: #000;
26+
margin-top: 15px;
27+
margin-bottom: 20px;
28+
29+
}
30+
.left{
31+
float: left;
32+
}
33+
.left ul {
34+
list-style: none;
35+
padding: 1em 3em;
36+
}
37+
.left ul li{
38+
display: inline-block;
39+
}
40+
.left ul li a{
41+
text-decoration: none;
42+
color:#fff;
43+
font-weight:500;
44+
padding: 8px 16px;
45+
text-align: center;
46+
letter-spacing: 0.5px;
47+
}
48+
.left ul li a:hover{
49+
background-color: #6912e0;
50+
color: #fff;
51+
transition: 0.8s ease;}
52+
.left li:nth-child(2) a{
53+
border:1px Solid #fff;
54+
}
55+
56+
57+
.right{
58+
float: right;
59+
}
60+
.right ul {
61+
list-style: none;
62+
padding: 1em 3em;
63+
}
64+
.right ul li{
65+
display: inline-block;
66+
}
67+
.right ul li a{
68+
text-decoration: none;
69+
color: #fff;
70+
text-align: center;
71+
font-weight:500;
72+
padding: 8px 16px;
73+
letter-spacing: 0.5px;
74+
}
75+
.right ul li a:hover{
76+
background-color: #6912e0;
77+
color: #fff;
78+
transition: 0.8s ease;}
79+
80+
.header {
81+
82+
position: absolute;
83+
top: 30%;
84+
left: 50%;
85+
transform: translate(-80%,-50%);
86+
87+
}
88+
.header h1{
89+
color: #fff;
90+
font-size:50px;
91+
font-family: Calibri;
92+
}
93+
.header p{
94+
color: #fff;
95+
font-family: verdana;
96+
font-size: 30px;
97+
margin-bottom: 100px;
98+
}
99+
.form {
100+
position: absolute;
101+
top: 60%;
102+
left:50%;
103+
transform: translate(-60%,-50%);
104+
text-align: center;
105+
color: #01d7a7;
106+
}
107+
input{
108+
width: 100%;
109+
margin: 20px 0;
110+
background: rgba(0,0,0,0);
111+
border:none;
112+
border-bottom: 1px Solid #0078ff;
113+
}
114+
115+
#msg {
116+
margin-top: 60px;
117+
}
118+
119+
::-webkit-input-placeholder {
120+
color: #EAEAEA;
121+
font-size: 12px;
122+
letter-spacing: 2px;
123+
}
124+
button{
125+
padding: 20px 32px;
126+
font-size: 16px;
127+
background:#0078ff;
128+
border:none;
129+
border-radius:4px;
130+
margin-top: 30px;
131+
color:#fff;
132+
}
133+
button hover{
134+
background-color: #0078ff;
135+
color: #fff;
136+
transition: 0.8s ease;
137+
}

‎HTML Library/Coldplay Band Website/Index.html

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!doctype html>
2+
<html>
3+
<title>Coldplay</title>
4+
5+
<link rel="stylesheet" type="text/css" href="Style.css">
6+
<link rel="shortcut icon" href="s3.png">
7+
8+
<body>
9+
<header>
10+
<div class="logo">
11+
<img src="images (2).png">
12+
13+
14+
</div>
15+
</header>
16+
17+
<nav>
18+
19+
<ul>
20+
21+
<li><a href="#">Home</a></li>
22+
23+
<li><a href="#">About</a></li>
24+
25+
<li><a href="#">Band Members</a></li>
26+
27+
<li><a href="Contact Us.html">Contact Us</a></li>
28+
<li><a href="#">Merchandise</a></li>
29+
30+
<li><a href="#">More</a></li>
31+
32+
</ul>
33+
</nav>
34+
35+
<div class="SliderFrame1">
36+
<div class="Title">
37+
38+
<h1><u>COLDPLAY</u></h1>
39+
<p>Professional Band</p>
40+
<a href="#" class="btn">Tours</a>
41+
<a href="#" class="btn">Albums</a>
42+
</div>
43+
44+
</div>
45+
</div>
46+
47+
<section class="Band Members">
48+
<div class="aboutcol">
49+
<p><img src="b1.jpg" height="500px;"></p>
50+
<h2>Vocals/Piano</h2>
51+
<H3>Chris Martin</H3>
52+
<h6>Band Leader/Founder</h6>
53+
54+
55+
</div>
56+
57+
<div class="aboutcol">
58+
<p><img src="bm2.jpg" height="500px;"> </p>
59+
<h2>Lead Guitars</h2>
60+
<h3>Jonny Buckland</h3>
61+
<h6>Co-Founder</h6>
62+
63+
64+
</div>
65+
66+
<div class="aboutcol">
67+
<p><img src="bm3.jpg" height="500px;"> </p>
68+
<h2>Bass</h2>
69+
<h3>Guy Berryman</h3>
70+
<h6>Joined 2002</h6>
71+
72+
73+
</div>
74+
75+
<div class="aboutcol">
76+
<p><img src="bm4.jpg" height="500px;"> </p>
77+
<h2>Drums</h2>
78+
<h3>Will Champion</h3>
79+
<h6>Joined 1999</h6>
80+
81+
</div>
82+
</section><br>
83+
84+
85+
<div class="SliderFrame2">
86+
87+
</div>
88+
89+
<div class="SliderFrame3">
90+
91+
</div>
92+
93+
94+
95+
</body>
96+
</html>

‎HTML Library/Coldplay Band Website/Readme.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Coldplay Band Website
2+
3+
Very first simple and minimal project using HTML and CSS
4+
5+
## Feel free to contribute

‎HTML Library/Coldplay Band Website/Shortcut1.png

48 KB
Loading

0 commit comments

Comments
 (0)