Skip to content

Commit

Permalink
Merge pull request #405 from RAHULBAWA777/patch-77
Browse files Browse the repository at this point in the history 
CoC Clone
  • Loading branch information
@Jaideep25-tech
Jaideep25-tech authored May 31, 2022
2 parents 675bef5 + d360492 commit 33546b1
Show file tree
Hide file tree
Showing 4 changed files with 359 additions and 0 deletions.
20 changes: 20 additions & 0 deletions Clash of Clan/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@

# Clash Of Clans Website Clone

## 🚀 About Me
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777


## Run Locally

Clone the project


Start the live server


## Used By

This project is used by the following companies:

-https://github.com/Dezenix/frontend-html-css-js
Binary file added Clash of Clan/Screenshot (371).png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 128 additions & 0 deletions Clash of Clan/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clash of Clans</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<nav>
<ul>
<img id="logo"
src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/[email protected]"
alt="">
<li>Games</li>
<li>Careers</li>
<li>Support</li>
<li>About Us</li>
</ul>
<ul>
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/supercell_creators_grey.svg"
alt=""></li>
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/supercell_make_grey.svg"
alt=""></li>
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/supercell_id_grey.svg"
alt=""></li>
<li><img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/search-icon.png"
alt=""></li>
</ul>
</nav>
<!-- ############################## -->
<div class="one">
<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"
alt="">
<img id="coc" src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/main_logo_clashofclans.png" alt="">
</div>
<!-- ##################################### -->
<div class="two">
<img id="half"
src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/bg_intro_clashofclans.jpg"
alt="">
<div class="wording">
<h1>LEAD YOUR CLAN TO VICTORY!</h1>

<p> Answer the call of the mustache! Join the international fray that is Clash of Clans. Customize your
village, build an army and crush your opponents. Like using friendship to strike fear into your enemies?
Join a Clan, or establish a Clashing legacy by creating your own. The choice is yours in this
millions-strong community of Barbarians. Download for free and Clash on, Chief!</p>

</div>
<div class="butts">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_appstore.png" alt="">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_googleplay.png" alt="">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/btn_amazon_appstore.png" alt="">
</div>
</div>
<hr>
<!-- ############################## -->
<div class="three">
<div class="wording2">
<h1>CONSTANTLY EVOLVING</h1>
<br>
<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>
<br>
<img src="Screenshot (371).png" alt="">
</div>
</div>
<!-- ###################################### -->
<div class="four">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/bg_gamesocial_clashofclans.jpg" alt="">
<img id="half"
src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/bg_gamewebsite_clashofclans.png"
alt="">

<div class="wording3">
<h1>SEE THE LATEST</h1>
<br>

<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>

</div>
</div>

<!-- ####################################### -->
<div class="five">
<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>
<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>
</div>
<!-- $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ FOOTER $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ -->

<footer id="foot">
<div class="icons">
<i class="fa-brands fa-facebook-square"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-twitch"></i>
<i class="fa-brands fa-youtube"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-snapchat"></i>
<i class="fa-brands fa-vk"></i>
</div>
<div class="buttss">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_appstore.png" alt="">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/footer_googleplay.png" alt="">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/18/btn_amazon_appstore.png" alt="">
</div>
<hr>
<div class="linkks">
<ul>
<li>Terms of Services</li>
<li>Privacy Policy</li>
<li>Parents Guide</li>
<li>Safe And Fair Play Policy</li>
</ul>

</div>

<div class="icons2">
<img src="https://cdn.supercell.com/supercell.com/220523125550/all/themes/supercell/img/[email protected]" alt="">

</div>
</footer>
<script src="https://kit.fontawesome.com/fa1e66a5e4.js" crossorigin="anonymous"></script>
</body>

</html>
211 changes: 211 additions & 0 deletions Clash of Clan/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* overflow:hidden; */
}
img{
cursor: pointer;
}
#logo{
width: 4rem;
}

nav{
display: flex;
justify-content: center;
align-items: center;
background-color: black;
width: 80%;
height: 80px;
margin: 0 auto;
z-index: 5;
position: fixed;
left: 10%;
}
nav ul{
display: flex;
justify-content: space-around;
align-items: center;
/* background-color: rgb(132, 56, 56); */
width: 40%;
}
nav ul li {
list-style: none;
color: rgb(181, 181, 181);
cursor: pointer;
}
nav ul li:hover {
color: white;
}
nav ul li img{
width: 30px;
}
.one{
height: 80vh;
/* background-color: rgb(193, 123, 32); */
position: relative;
}
.one img{
width: 100%;
position: relative;
}
#coc{
position: absolute;
top: 50%;
width: 9rem;
left: 45%;
}
.two{
/* background-color: aquamarine; */
position: relative;
margin-top: 13rem;
height: 80vh;
}
#half{
position: absolute;
width: 922px;
height: 458px;
left: -260px;
margin-top: 3rem;
}
.wording{
/* background-color: blue; */
height: 12rem;
margin-left: 42rem;
margin-top: 4rem;
/* text-align: center; */
}
.wording p{
margin-top: 40px;
font-size: 1.1rem;
color: black;
}
h1{
margin-left: 90px;
}
.butts{
display: flex;
/* background-color: blue; */
margin-left: 42rem;
margin-top: 8rem;
}
.butts img{
width: 12rem;
margin-right: 30px;
}
.three{
/* background-color: aqua; */
margin-top: 7rem;
padding: 0 10%;
}
.wording2{
/* background-color: blue; */
height: 12rem;
margin-top: 4rem;
width: 40%;
}
.wording2 p{
margin-top: 40px;
font-size: 1.1rem;

color: black;
}
.three img{
width: 80vw;
}
.four{
/* background-color: purple; */
margin-top: 29rem;
height: 80vh;
position: relative;
}
.four img{
width: 100%;
height: 100%;
}

.wording3{
/* background-color: blue; */
height: 12rem;
margin-left: 45rem;
position: absolute;
top: 15%;
width: 40%;
color: aliceblue;
}
.wording3 p{
margin-top: 40px;
font-size: 1.1rem;

color: rgb(255, 255, 255);
}
.five{
padding: 6rem 7rem;
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ footer */

footer{
height: 80vh;
background-color: rgb(0, 0, 0);
padding: 1rem 15rem;
height: 60vh;
/* display: flex; */
}

.icons i{
margin: 30px 20px;
font-size: 30px;
color: rgb(255, 255, 255);
}

.linkks{
display: flex;
margin:40px 100px;
color: white;
}
.linkks ul{
list-style: none;
margin-left: 40px;
display: flex;
flex-direction: row;
}
.linkks ul li{
display: flex;
flex-direction: row;
margin-left: 20px;
line-height: 50px;
color: rgb(255, 255, 255);
}
.linkks ul li:hover{

cursor: pointer;
}
p{
margin-top: 120px;
width: 60%;
margin-left: 100px;
color: grey;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.icons2{
position: absolute;
right: 10px;
/* bottom: 10px; */
font-size: 30px;
}

.icons2 img{
margin: 30px 20px;
/* font-size: 30px; */
width: 40px;
color: grey;
}

.buttss img{
width: 10rem;

}

0 comments on commit 33546b1

Please sign in to comment.