commit dbcd6489e278fa420f8be3e924aaf0885435312d Author: Fabienmcl Date: Fri Apr 26 16:26:03 2024 +0200 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..8110f2c --- /dev/null +++ b/README.md @@ -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. + diff --git a/assets/01.png b/assets/01.png new file mode 100644 index 0000000..94d5986 Binary files /dev/null and b/assets/01.png differ diff --git a/assets/02.png b/assets/02.png new file mode 100644 index 0000000..c3fbb49 Binary files /dev/null and b/assets/02.png differ diff --git a/assets/03.png b/assets/03.png new file mode 100644 index 0000000..004f7df Binary files /dev/null and b/assets/03.png differ diff --git a/assets/Ignitius.gif b/assets/Ignitius.gif new file mode 100644 index 0000000..7996645 Binary files /dev/null and b/assets/Ignitius.gif differ diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..8adae63 Binary files /dev/null and b/assets/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..bf3cdd2 --- /dev/null +++ b/index.html @@ -0,0 +1,108 @@ + + + + + + + + + Herocord + + + + + +
+
+

Discover
A World...

+

...where you get to gather an unstoppable team of heroes in a
stunning idle RPG game. Upgrade, equipment, join leagues,
and compete with others to become the best!

+
+ +
+
+
+ +
+
+
+
+ +
+
+

Breathtaking
Graphics and
Locations

+

Explore different locations and face thrilling
challenges in each one, while the game's idle
nature allows you to earn rewards even when
you're not actively playing.

+
+
+
+
+

Unleash Your
Hero's Potential

+

Prepare for the battlefield by enhancing your
hero's strength with the best gear from a wide
range of weapons. Level up your hero as you
progress and unlock new abilities to crush your opponents.

+
+
+ +
+
+
+
+ +
+
+

Conquer the
Battlefield

+

Get ready to lead your team to victory. Strategy
is the key to success. Leveling up your heroes
and equipping them with top-tier gear is only the
beginning. Strategic hero placement is crucial.

+
+
+
+

Are You Ready For An
+ Epic Adventure? +

+
+ +
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..2db1e06 --- /dev/null +++ b/style.css @@ -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; +} \ No newline at end of file