Fabienmcll/herocord-home-page
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Fabienmcl
2024-04-26 16:26:03 +02:00
commit dbcd6489e2
8 changed files with 576 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
README.md Normal file
View File

@ -0,0 +1,18 @@
# Recréation de la Page d'Accueil de HeroCord (Version Desktop)
Ce projet est une recréation de la page d'accueil du site [HeroCord](https://herocord.com/) en utilisant HTML, CSS et JavaScript. L'objectif principal de ce projet est de s'entraîner à reproduire la version desktop du site original en utilisant des technologies de base. Il est important de noter que la version mobile n'est pas incluse dans ce projet, et la reproduction est basée sur l'observation visuelle et des outils de mesure approximatifs, sans les valeurs de pixel précises.
## Technologies Utilisées
- HTML
- CSS
- JavaScript
## Comment Utiliser
Clonez ce dépôt sur votre machine locale:
git clone https://github.com/Fabienmcll/Herocord-home-page.git
Ouvrez le fichier index.html dans un navigateur web pour voir la page d'accueil recréée.

BIN
assets/01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 382 KiB

BIN
assets/02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

BIN
assets/03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 478 KiB

BIN
assets/Ignitius.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

108
index.html Normal file
View File

@ -0,0 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link class="ico" rel="shortcut icon" href="assets/logo.png" type="image/x-icon" >
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<title>Herocord</title>
</head>
<body>
<!-- TOPBAR -->
<nav class="topbar">
<div class="left">
<img src="assets/logo.png" alt="Logo">
<p>Herocord</p>
</div>
<div class="middle">
<ul>
<li><a href="">Commands</a></li>
<li><a href="">Store</a></li>
<li><a href="">Upvote</a></li>
<li><a href="">News</a></li>
<li><a href="">Official server</a></li>
</ul>
</div>
<div class="rigth">
<ul>
<li><i class='bx bx-exit'></i><a href="">Login</a></li>
</ul>
</div>
</nav>
<div class="box1">
<div class="left">
<h1>Discover <br>A World...</h1>
<p>...where you get to gather an unstoppable team of heroes in a <br> stunning idle RPG game. Upgrade, equipment, join leagues, <br> and compete with others to become the best!</p>
<div class="button">
<ul>
<li class="discord" > <i class='bx bxl-discord-alt'></i><a href="">Add to Discord</a></li>
<li class="server"><a href="">Join Official Server</a> <i class='bx bx-coffee'></i></li>
</ul>
</div>
</div>
<div class="rigth">
<img src="assets/Ignitius.gif" alt="">
</div>
</div>
<div class="box2 ">
<div class="left">
<img src="assets/01.png" alt="">
</div>
<div class="right">
<p class="title">Breathtaking <br> Graphics and <br> Locations</p>
<p>Explore different locations and face thrilling <br> challenges in each one, while the game's idle <br> nature allows you to earn rewards even when <br> you're not actively playing.</p>
</div>
</div>
<div class="box3">
<div class="left">
<p class="title">Unleash Your <br> Hero's Potential</p>
<p>Prepare for the battlefield by enhancing your <br> hero's strength with the best gear from a wide <br> range of weapons. Level up your hero as you <br> progress and unlock new abilities to crush your opponents.</p>
</div>
<div class="rigth">
<img src="assets/02.png" alt="">
</div>
</div>
<div class="box4 ">
<div class="left">
<img src="assets/03.png" alt="">
</div>
<div class="right">
<p class="title">Conquer the <br> Battlefield</p>
<p>Get ready to lead your team to victory. Strategy <br> is the key to success. Leveling up your heroes <br> and equipping them with top-tier gear is only the <br> beginning. Strategic hero placement is crucial.</p>
</div>
</div>
<div class="box5">
<p>Are You Ready For An <br>
<span class="magic">Epic Adventure?</span>
</p>
<div class="button">
<ul>
<li><a href="">Let's Go !</a></li>
</ul>
</div>
</div>
<footer class="footer">
<div class="left">
<ul>
<li><a href="">Support Server</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Terms & Conditions</a></li>
<li><a href="">Privacy Policy</a></li>
</ul>
</div>
<div class="rigth">
<div class="discord">
<i class='bx bxl-discord-alt'></i>
</div>
<div class="reddit">
<i class='bx bxl-reddit' ></i>
</div>
<div class="twitter">
<i class='bx bxl-twitter' ></i>
</div>
</div>
</footer>
</body>
</html>

450
style.css Normal file
View File

@ -0,0 +1,450 @@
/* RESET */
*{
margin: 0;
padding: 0;
}
/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
/* VAR */
:root{
--Background: #1D1D1F ;
--White: #ffffff ;
--Gray: rgba(255, 255, 255, 0.7) ;
--Orange: #fe6601 ;
--Hover: #FE7920 ;
}
/* SCROLL BAR */
::-webkit-scrollbar {
width: 7px;
}
::-webkit-scrollbar-thumb {
background: var(--Orange);
border-radius: 6px;
}
::-webkit-scrollbar-track {
background: var(--Background);
}
/* PAGE */
body{
background: #1D1D1F;
color: var(--White);
overflow-x: hidden;
margin: 0 125px;
}
.topbar{
margin-top: 10px;;
padding: 15px;
display: flex;
justify-content: space-around;
align-items: center;
}
.topbar .left{
display: flex;
align-items: center;
cursor: pointer;
}
.topbar .left img{
border-radius: 50%;
height: 40px;
}
.topbar .left p{
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 22px;
margin-left: 15px;
}
.topbar .middle ul{
display: flex;
align-items: center;
list-style: none;
}
.topbar .middle a{
color: var(--Gray);
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-decoration: none;
}
.topbar .middle li {
margin: 0 15px;
}
.topbar .middle li:first-child {
margin-left: 0;
}
.topbar .middle li:last-child {
margin-right: 0;
}
.topbar .middle a:hover{
color: var(--Hover);
}
.topbar .rigth ul{
list-style: none;
text-decoration: none;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
background-color: var(--Orange);
padding: 6px;
border-radius: 20px;
}
.topbar .rigth a{
padding: 6px;
color: var(--White);
}
.topbar .rigth li{
display: flex;
align-items: center;
margin: 0 10px;
}
.topbar .rigth ul:hover{
background: var(--Hover);
}
/* CONTENT */
.box1{
display: flex;
align-items: center;
margin: 0 125px;
margin-top: 100px;
}
.box1 .left h1{
font-family: 'Sen', sans-serif;
font-weight: 800;
font-size: 96px;
line-height: 96px;
margin-bottom: 30px;
}
.box1 .left p{
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 27px;
font-size: 18px;
color: var(--Gray);
}
.box1 .button{
margin-top: 40px;
}
.box1 .button ul,
.box1 .button a{
text-decoration: none;
list-style: none;
display: flex;
color: var(--White);
font-family: 'Inter', sans-serif;
font-weight: 600;
}
.box1 .button li{
display: flex;
align-items: center;
cursor: pointer;
}
.box1 .button .discord{
padding: 18px;
background-color: var(--Orange);
border-radius: 30px;
width: auto;
}
.box1 .button .discord:hover{
background-color: var(--Hover);
}
.box1 .button .server{
padding: 18px;
background: transparent;
color: #434A57;
border: var(--Gray) solid 2px;
border-radius: 30px;
width: auto;
margin-left: 20px;
}
.box1 .button .server:hover{
background: var(--Gray);
}
.box1 .discord i{
margin-right: 10px;
}
.box1 .server i{
margin-left: 10px;
color: var(--White);
}
.box1 .rigth img{
height: 350px;
margin-left: 235px;
}
.box2 {
margin-bottom: 255px;
display: flex;
align-items: center;
margin: 175px 125px 0 125px;
}
.box2 .left img{
width: 622px;
height: 465px;
border-radius: 30px;
}
.box2 .right{
margin-left: 153px;
}
.box2 .right .title{
font-family: 'Sen', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 62px;
margin-bottom: 47px;
color: var(--White);
}
.box2 .right p{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 27px;
color: var(--Gray) ;
}
.box3 {
display: flex;
margin: 175px 125px 255px 125px;
align-items: center;
}
.box3 .rigth img{
width: 622px;
height: 465px;
border-radius: 30px;
margin-left: 153px;
}
.box3 .left .title{
font-family: 'Sen', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 62px;
margin-bottom: 47px;
color: var(--White);
}
.box3 .left p{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 27px;
color: var(--Gray);
}
.box4 {
display: flex;
margin: 175px 125px 250px 125px;
align-items: center;
}
.box4 .left img{
width: 622px;
height: 465px;
border-radius: 30px;
}
.box4 .right .title{
font-family: 'Sen', sans-serif;
font-weight: 700;
font-size: 48px;
line-height: 62px;
margin-bottom: 47px;
color: var(--White);
}
.box4 .right{
margin-left: 153px;
}
.box4 .right p{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 27px;
color: var(--Gray);
}
.box5{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 175px;
}
.box5 p{
font-family: 'Sen', sans-serif;
font-weight: 800;
font-size: 56px;
line-height: 73px;
color: var(--White);
margin-bottom: 57px;
width: 100%;
}
.box5 .button li, a{
text-decoration: none;
list-style: none;
cursor: pointer;
}
.box5 .button a{
color: var(--White);
padding: 18px;
background-color: var(--Orange);
border-radius: 30px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 18px;
line-height: 25px;
}
.box5 .button a:hover{
background-color: var(--Hover);
}
.box5 .button{
height: auto;
width: 100%;
}
.box5 .magic {
background: linear-gradient(90deg, rgba(165,7,255,1) 0%, rgba(8,39,235,1) 35%, rgba(255,0,181,1) 100%);
-webkit-background-clip: text;
color: transparent;
}
/* Footer */
.footer{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 50px;
}
.footer .left ul, .rigth{
display: flex;
text-decoration: none;
list-style: none;
}
.footer .left a{
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: white;
}
.footer .left a:hover{
color: var(--Hover);
}
.footer .left li {
margin: 0 10px;
}
.footer .left li:first-child {
margin-left: 0;
}
.footer .left li:last-child {
margin-right: 0;
}
.footer .reddit {
margin: 0 10px;
}
.footer .rigth .discord, .reddit, .twitter{
cursor: pointer;
background-color: #29292A;
padding: 10px;
border-radius: 20px;
}
.footer .rigth .discord:hover{
background: #5865F2;
}
.footer .rigth .reddit:hover{
background: #FF4500;
}
.footer .rigth .twitter:hover{
background-color: #1DA1F2;
}