Skip to content

Commit d360492

Browse files
RAHULBAWA777RAHULBAWA777
committed
CoC Clone added with readme
1 parent 81d0f73 commit d360492

File tree

4 files changed

+359
-0
lines changed

4 files changed

+359
-0
lines changed

‎Clash of Clan/README.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
# Clash Of Clans Website Clone
3+
4+
## 🚀 About Me
5+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
6+
7+
8+
## Run Locally
9+
10+
Clone the project
11+
12+
13+
Start the live server
14+
15+
16+
## Used By
17+
18+
This project is used by the following companies:
19+
20+
-https://github.com/Dezenix/frontend-html-css-js

‎Clash of Clan/Screenshot (371).png

534 KB
Loading

‎Clash of Clan/index.html

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Clash of Clans</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<nav>
14+
<ul>
15+
<img id="logo"
16+
src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/[email protected]"
17+
alt="">
18+
<li>Games</li>
19+
<li>Careers</li>
20+
<li>Support</li>
21+
<li>About Us</li>
22+
</ul>
23+
<ul>
24+
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/supercell_creators_grey.svg"
25+
alt=""></li>
26+
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/supercell_make_grey.svg"
27+
alt=""></li>
28+
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/supercell_id_grey.svg"
29+
alt=""></li>
30+
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/search-icon.png"
31+
alt=""></li>
32+
</ul>
33+
</nav>
34+
<!-- ############################## -->
35+
<div class="one">
36+
<img src="https://cdn.supercell.com/supercell.com/220523125550/supercell.com/files/styles/hero_image_large/public/hero_bg_clashofclans_.jpg?itok=wd9TveMZ&timestamp=1544540115"
37+
alt="">
38+
<img id="coc" src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/main_logo_clashofclans.png" alt="">
39+
</div>
40+
<!-- ##################################### -->
41+
<div class="two">
42+
<img id="half"
43+
src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/bg_intro_clashofclans.jpg"
44+
alt="">
45+
<div class="wording">
46+
<h1>LEAD YOUR CLAN TO VICTORY!</h1>
47+
48+
<p> Answer the call of the mustache! Join the international fray that is Clash of Clans. Customize your
49+
village, build an army and crush your opponents. Like using friendship to strike fear into your enemies?
50+
Join a Clan, or establish a Clashing legacy by creating your own. The choice is yours in this
51+
millions-strong community of Barbarians. Download for free and Clash on, Chief!</p>
52+
53+
</div>
54+
<div class="butts">
55+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_appstore.png" alt="">
56+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_googleplay.png" alt="">
57+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/btn_amazon_appstore.png" alt="">
58+
</div>
59+
</div>
60+
<hr>
61+
<!-- ############################## -->
62+
<div class="three">
63+
<div class="wording2">
64+
<h1>CONSTANTLY EVOLVING</h1>
65+
<br>
66+
<p>Clash of Clans has been constantly evolving to offer more user-friendly, consistent and fun online experiences for Supercell gamers. There have been countless updates since the game launched in 2012.</p>
67+
<br>
68+
<img src="Screenshot (371).png" alt="">
69+
</div>
70+
</div>
71+
<!-- ###################################### -->
72+
<div class="four">
73+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/bg_gamesocial_clashofclans.jpg" alt="">
74+
<img id="half"
75+
src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/bg_gamewebsite_clashofclans.png"
76+
alt="">
77+
78+
<div class="wording3">
79+
<h1>SEE THE LATEST</h1>
80+
<br>
81+
82+
<p> To stay on top of your game, keep an eye on the in-game News section. Follow us on social media for the latest chatter and sneak peeks on what the team is working on. Don’t be a stranger and join the conversation.</p>
83+
84+
</div>
85+
</div>
86+
87+
<!-- ####################################### -->
88+
<div class="five">
89+
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZdOkHJjLP2Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
90+
<iframe width="560" height="315" src="https://www.youtube.com/embed/vv8MI_y1Lsg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
91+
</div>
92+
<!-- $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ FOOTER $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ -->
93+
94+
<footer id="foot">
95+
<div class="icons">
96+
<i class="fa-brands fa-facebook-square"></i>
97+
<i class="fa-brands fa-twitter"></i>
98+
<i class="fa-brands fa-twitch"></i>
99+
<i class="fa-brands fa-youtube"></i>
100+
<i class="fa-brands fa-instagram"></i>
101+
<i class="fa-brands fa-snapchat"></i>
102+
<i class="fa-brands fa-vk"></i>
103+
</div>
104+
<div class="buttss">
105+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_appstore.png" alt="">
106+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_googleplay.png" alt="">
107+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/btn_amazon_appstore.png" alt="">
108+
</div>
109+
<hr>
110+
<div class="linkks">
111+
<ul>
112+
<li>Terms of Services</li>
113+
<li>Privacy Policy</li>
114+
<li>Parents Guide</li>
115+
<li>Safe And Fair Play Policy</li>
116+
</ul>
117+
118+
</div>
119+
120+
<div class="icons2">
121+
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/[email protected]" alt="">
122+
123+
</div>
124+
</footer>
125+
<script src="https://kit.fontawesome.com/fa1e66a5e4.js" crossorigin="anonymous"></script>
126+
</body>
127+
128+
</html>

‎Clash of Clan/style.css

+211
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
6+
/* overflow:hidden; */
7+
}
8+
img{
9+
cursor: pointer;
10+
}
11+
#logo{
12+
width: 4rem;
13+
}
14+
15+
nav{
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
background-color: black;
20+
width: 80%;
21+
height: 80px;
22+
margin: 0 auto;
23+
z-index: 5;
24+
position: fixed;
25+
left: 10%;
26+
}
27+
nav ul{
28+
display: flex;
29+
justify-content: space-around;
30+
align-items: center;
31+
/* background-color: rgb(132, 56, 56); */
32+
width: 40%;
33+
}
34+
nav ul li {
35+
list-style: none;
36+
color: rgb(181, 181, 181);
37+
cursor: pointer;
38+
}
39+
nav ul li:hover {
40+
color: white;
41+
}
42+
nav ul li img{
43+
width: 30px;
44+
}
45+
.one{
46+
height: 80vh;
47+
/* background-color: rgb(193, 123, 32); */
48+
position: relative;
49+
}
50+
.one img{
51+
width: 100%;
52+
position: relative;
53+
}
54+
#coc{
55+
position: absolute;
56+
top: 50%;
57+
width: 9rem;
58+
left: 45%;
59+
}
60+
.two{
61+
/* background-color: aquamarine; */
62+
position: relative;
63+
margin-top: 13rem;
64+
height: 80vh;
65+
}
66+
#half{
67+
position: absolute;
68+
width: 922px;
69+
height: 458px;
70+
left: -260px;
71+
margin-top: 3rem;
72+
}
73+
.wording{
74+
/* background-color: blue; */
75+
height: 12rem;
76+
margin-left: 42rem;
77+
margin-top: 4rem;
78+
/* text-align: center; */
79+
}
80+
.wording p{
81+
margin-top: 40px;
82+
font-size: 1.1rem;
83+
color: black;
84+
}
85+
h1{
86+
margin-left: 90px;
87+
}
88+
.butts{
89+
display: flex;
90+
/* background-color: blue; */
91+
margin-left: 42rem;
92+
margin-top: 8rem;
93+
}
94+
.butts img{
95+
width: 12rem;
96+
margin-right: 30px;
97+
}
98+
.three{
99+
/* background-color: aqua; */
100+
margin-top: 7rem;
101+
padding: 0 10%;
102+
}
103+
.wording2{
104+
/* background-color: blue; */
105+
height: 12rem;
106+
margin-top: 4rem;
107+
width: 40%;
108+
}
109+
.wording2 p{
110+
margin-top: 40px;
111+
font-size: 1.1rem;
112+
113+
color: black;
114+
}
115+
.three img{
116+
width: 80vw;
117+
}
118+
.four{
119+
/* background-color: purple; */
120+
margin-top: 29rem;
121+
height: 80vh;
122+
position: relative;
123+
}
124+
.four img{
125+
width: 100%;
126+
height: 100%;
127+
}
128+
129+
.wording3{
130+
/* background-color: blue; */
131+
height: 12rem;
132+
margin-left: 45rem;
133+
position: absolute;
134+
top: 15%;
135+
width: 40%;
136+
color: aliceblue;
137+
}
138+
.wording3 p{
139+
margin-top: 40px;
140+
font-size: 1.1rem;
141+
142+
color: rgb(255, 255, 255);
143+
}
144+
.five{
145+
padding: 6rem 7rem;
146+
}
147+
148+
149+
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ footer */
150+
151+
footer{
152+
height: 80vh;
153+
background-color: rgb(0, 0, 0);
154+
padding: 1rem 15rem;
155+
height: 60vh;
156+
/* display: flex; */
157+
}
158+
159+
.icons i{
160+
margin: 30px 20px;
161+
font-size: 30px;
162+
color: rgb(255, 255, 255);
163+
}
164+
165+
.linkks{
166+
display: flex;
167+
margin:40px 100px;
168+
color: white;
169+
}
170+
.linkks ul{
171+
list-style: none;
172+
margin-left: 40px;
173+
display: flex;
174+
flex-direction: row;
175+
}
176+
.linkks ul li{
177+
display: flex;
178+
flex-direction: row;
179+
margin-left: 20px;
180+
line-height: 50px;
181+
color: rgb(255, 255, 255);
182+
}
183+
.linkks ul li:hover{
184+
185+
cursor: pointer;
186+
}
187+
p{
188+
margin-top: 120px;
189+
width: 60%;
190+
margin-left: 100px;
191+
color: grey;
192+
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
193+
}
194+
.icons2{
195+
position: absolute;
196+
right: 10px;
197+
/* bottom: 10px; */
198+
font-size: 30px;
199+
}
200+
201+
.icons2 img{
202+
margin: 30px 20px;
203+
/* font-size: 30px; */
204+
width: 40px;
205+
color: grey;
206+
}
207+
208+
.buttss img{
209+
width: 10rem;
210+
211+
}

0 commit comments

Comments
 (0)