[HTML] Aidez un khey à coder une page ULTRA basique

8 décembre 2021 à 04:48:52

Le 08 décembre 2021 à 04:45:01 :
Le 08 décembre 2021 à 04:43:20 :
par contre j'arrive pas à reproduire la couleur exacte de la banniere ils ont mis un dégradé de mort
C'est normal khey c'est une image background dupliqué tout le long de la navbar
Le 08 décembre 2021 à 04:45:13 :
Le 08 décembre 2021 à 04:43:20 :
par contre j'arrive pas à reproduire la couleur exacte de la banniere ils ont mis un dégradé de mort
C'est pas une couleur, c'est une image: https://sea-distances.org/images/bg.gif
Ils ont utilisé repeat pour qu'elle forme une barre:
background: white url(/images/bg.gif) repeat-x left top;
background-color: rgb(15, 165, 204);

putain je voulais prendre un screen et faire le truc de mosaïque horizontale, puis je me suis dit non ça fait trop bledard
en fait c'est vriament ça qu'ils ont fait ayaaao

akou02

8 décembre 2021 à 04:49:02

Le 08 décembre 2021 à 04:45:13 :
Le 08 décembre 2021 à 04:43:20 :
par contre j'arrive pas à reproduire la couleur exacte de la banniere ils ont mis un dégradé de mort
C'est pas une couleur, c'est une image: https://sea-distances.org/images/bg.gif
Ils ont utilisé repeat pour qu'elle forme une barre:
background: white url(/images/bg.gif) repeat-x left top;
background-color: rgb(15, 165, 204);

Oui j'ai aussi remarqué.

C'est technique, je n'arriverai pas à reproduire ça sans c/c alors je vais juste mettre une barre de couleurs

Grolipet

8 décembre 2021 à 04:51:46

Du coup c'est bon t'as réussi?

akou02

8 décembre 2021 à 04:55:55

Le 08 décembre 2021 à 04:51:46 :
Du coup c'est bon t'as réussi?

Je suis en train de tester, mais vos conseils m'ont pas mal débloqué

aiguiser

8 décembre 2021 à 04:58:39

pour l'instant j'ai fait ça jsute je regarde pour mettre les textes bien positionnés

SupportDeluEUW

8 décembre 2021 à 04:58:51

La page que tu veux faire est très simple, fais vite fait ta structure HTML avec des flexbox en CSS c'est vite bouclé

Magrozz

8 décembre 2021 à 05:00:30

Montre ton code HTML et CSS avec la balise code et le résultat.

4AnsSansBaise

8 décembre 2021 à 05:01:04

Tu dois reproduire à l'identique ?

Tu veux go discord on le torche en 20 mins si tu veux

akou02

8 décembre 2021 à 05:08:51

Le 08 décembre 2021 à 05:00:30 :
Montre ton code HTML et CSS avec la balise code et le résultat.

Le code html :

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SEA-DISTANCES.ORG</title>

<body>

</div>

<div>

<h1>ADVERTISING - THE BEST WAY TO PROMOTE YOUR BUSINESS.</h1>

<span style="font-size: medium;">
Internet banner advertising is an excellent and effective way to promote your products and services.
</span>

<span style="font-size: medium;">
The principle of internet banner advertising is based on how to attract the attention of the web
viewers.
</span>

<span style="font-size: medium;">
Currently any type of business will require you to work actively towards the implementation of
advertising and marketing activities.
</span>

<span style="font-size: medium;">
You just need to properly and competently to use this popular business tool and expect a high return in
the shortest possible time.
</span>

<span style="font-size: medium;">
Millions of consumers surfing the Internet daily. Many of these web visitors could be converted into new
users or buyers of your product or service.
</span>

<span style="font-size: medium;">
That is why most marketers recommend using banner advertising, which can be called one of the most
powerful dynamic internet marketing strategies.
</span>

<h2> <br>DO YOU WANT TO ADVERTISE ON SEA-DISTANCES.ORG ?</h2>

<h3>PLEASE CONTACT US FOR MORE INFORMATION >>></h3>

</div>

<div id="footer">
Copyright © 2021 by SEA-DISTANCES.ORG</br>
All Rights Reserved.
</div>

</body>

</html>

Le CSS :

{
font-family: Arial;
}

h1 {
color: rgb(0, 102, 153);
font-size: large;
}

h2 {
color: rgb(0, 102, 153);
font-size: large;
}

h3 {
color: rgb(0, 102, 153);
font-size: large;
}

img {
width: 246px;
height: 173px;
}

footer {
padding: 10px;
margin: 10px 0px;
text-align: center;
border-top: 1px solid #CCC;
}

akou02

8 décembre 2021 à 05:11:08

Le 08 décembre 2021 à 04:58:39 :
pour l'instant j'ai fait ça jsute je regarde pour mettre les textes bien positionnés

Comment t'as réussi ça khey ?

4AnsSansBaise

8 décembre 2021 à 05:12:00

Le 08 décembre 2021 à 05:08:51 :
Le 08 décembre 2021 à 05:00:30 :
Montre ton code HTML et CSS avec la balise code et le résultat.
Le code html :
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SEA-DISTANCES.ORG</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="navbar">
</div>
<div>
<img src="img/success.jpg" alt="Graphique" align="left">
<h1>ADVERTISING - THE BEST WAY TO PROMOTE YOUR BUSINESS.</h1>
<span style="font-size: medium;">
Internet banner advertising is an excellent and effective way to promote your products and services.
</span>
<span style="font-size: medium;">
The principle of internet banner advertising is based on how to attract the attention of the web
viewers.
</span>
<span style="font-size: medium;">
Currently any type of business will require you to work actively towards the implementation of
advertising and marketing activities.
</span>
<span style="font-size: medium;">
You just need to properly and competently to use this popular business tool and expect a high return in
the shortest possible time.
</span>
<span style="font-size: medium;">
Millions of consumers surfing the Internet daily. Many of these web visitors could be converted into new
users or buyers of your product or service.
</span>
<span style="font-size: medium;">
That is why most marketers recommend using banner advertising, which can be called one of the most
powerful dynamic internet marketing strategies.
</span>
<h2> <br>DO YOU WANT TO ADVERTISE ON SEA-DISTANCES.ORG ?</h2>
<h3>PLEASE CONTACT US FOR MORE INFORMATION >>></h3>
</div>
<div id="footer">
Copyright © 2021 by SEA-DISTANCES.ORG</br>
All Rights Reserved.
</div>
</body>
</html>
Le CSS :
{
font-family: Arial;
}
h1 {
color: rgb(0, 102, 153);
font-size: large;
}
h2 {
color: rgb(0, 102, 153);
font-size: large;
}
h3 {
color: rgb(0, 102, 153);
font-size: large;
}
img {
width: 246px;
height: 173px;
}
footer {
padding: 10px;
margin: 10px 0px;
text-align: center;
border-top: 1px solid #CCC;
}

Evite le CSS inline, met tout dans ton CSS, ça montrera déjà que tu connais les good practice.

Ensuite pas obliger de faire 50 span, bad practice

Evite aussi le <br> dans ton <h2>, utilise un margin ou un padding à la limite mais pas de br pour ça

fou l'image dans une div, le text dans une autre (et dans un seul p)

ensuite tu les mes en inline-block, et tu les met dans une div parent en text-align: center, hop hop hop

Grolipet

8 décembre 2021 à 05:17:12

Tiens khey, jte l'ai fait ça m'a pris 10 min :hap:

FICHIER HTML:


<!DOCTYPE html>
<html lang="fr">
<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">
    <link rel="stylesheet" href="main.css">
    <title>SEA-DISTANCES.ORG</title>
</head>
<body>
    <header>
        <h1><a href="/">SEA-DISTANCES.ORG</a></h1>
        <nav>
            <a href="/">Ports Distances</a>
            <a href="/">Voyage Calculator</a>
            <a href="/">Advertise</a>
            <a href="/">Contact us</a>
        </nav>
    </header>
    <main>
        <div id="intro">
            <img src="https://sea-distances.org/images/success.jpg" alt="statistics">
            <div id="intro_text">
                <h2>ADVERTISING - THE BEST WAY TO PROMOTE YOUR BUSINESS.</h2>
                <p>
                    Internet banner advertising is an excellent and effective way to promote your products and services.<br>
                    Currently any type of business will require you to work actively towards the implementation of advertising and marketing activities. <br>
                    The principle of internet banner advertising is based on how to attract the attention of the web viewers. <br>
                    You just need to properly and competently to use this popular business tool and expect a high return in the shortest possible time. <br>
                    Millions of consumers surfing the Internet daily. Many of these web visitors could be converted into new users or buyers of your product or service. <br>
                    That is why most marketers recommend using banner advertising, which can be called one of the most powerful dynamic internet marketing strategies.
                </p>
            </div>
        </div>
        <div id="advices">
            <h3>DO YOU WANT TO ADVERTISE ON SEA-DISTANCES.ORG ?</h3>
            <a href="https://sea-distances.org/contact">PLEASE CONTACT US FOR MORE INFORMATION >>></a>
        </div>
    </main>
    <footer>
        <hr>
        Copyright © 2021 by SEA-DISTANCES.ORG<br>
        All Rights Reserved.
    </footer>
</body>
</html>

FICHIER CSS:


body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 1200px;
    margin: auto;
    background: white url(https://sea-distances.org/images/bg.gif) repeat-x left top;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 15px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 50px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    margin-right: 30px;
}

nav {
    display: flex;
}

nav > a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    margin-right: 20px;
}

h1 > a {
    color: white;
    text-decoration: none;
}

main {
    width: 1200px;
    margin: auto;
}

footer {
    width: 1200px;
    margin: auto;
}

#intro {
    display: flex;
    margin-bottom: 10px;
}

#intro > img {
    width: 246px;
    height: 173px;
}

h2 {
    color: rgb(0, 102, 153);
    font-size: 17px;
    margin: 0px 0px 10px 0px;
}

p {
    color: #333333;
    font-size: medium;
    line-height: 20px;
    margin: 0px;
}

#advices {
    margin-bottom: 60px;
}

#advices > * {
    color: rgb(0, 102, 153);
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

h3 {
    margin: 0px;
}

footer {
    text-align: center;
    font-size: 12px;
}

hr {
    margin-bottom: 10px;
}

J'ai fait en sorte que ça fasse un minimum débutant :hap:

T'as juste à copier coller le premier dans un fichier html, le second dans un fichier css, tu mets les deux dans un dossier et tu ouvres le fichier html :ok:

aiguiser

8 décembre 2021 à 05:17:12

Le 08 décembre 2021 à 05:11:08 :
Le 08 décembre 2021 à 04:58:39 :
pour l'instant j'ai fait ça jsute je regarde pour mettre les textes bien positionnés
Comment t'as réussi ça khey ?

mets cette image à la racine de ton fichier html https://prnt.sc/2292d7j tu la nommes bien "banniere.png"

body :

<div id="banner">

    <div id="inside_banner">
    <div style="font: 20px Arial; font-weight: bold;"> SEA-DISTANCE.ORG</div>
    </div>

    <div id="inside_banner">
    Ports Distances
    </div>

    <div id="inside_banner">
    Voyage Calculator
    </div>

    <div id="inside_banner">
    Advertise
    </div>

    <div id="inside_banner">
    Contact us
    </div>

</div>

fichier css :

#banner
{
    
background: white url(banniere.png) repeat-x left top;
background-color: rgb(15, 165, 204);
width: 100%;
color:white;
display: flex;

    }
    
#inside_banner
{
    padding-top : 7px;
    padding-bottom : 7px;
    padding-left: 20px;
    
    /*border: solid black;*/
    
}

aiguiser

8 décembre 2021 à 05:19:16

Le 08 décembre 2021 à 05:17:12 :
Tiens khey, jte l'ai fait ça m'a pris 10 min :hap:

FICHIER HTML:


<!DOCTYPE html>
<html lang="fr">
<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">
  <link rel="stylesheet" href="main.css">
  <title>SEA-DISTANCES.ORG</title>
</head>
<body>
  <header>
      <h1><a href="/">SEA-DISTANCES.ORG</a></h1>
      <nav>
          <a href="/">Ports Distances</a>
          <a href="/">Voyage Calculator</a>
          <a href="/">Advertise</a>
          <a href="/">Contact us</a>
      </nav>
  </header>
  <main>
      <div id="intro">
          <img src="https://sea-distances.org/images/success.jpg" alt="statistics">
          <div id="intro_text">
              <h2>ADVERTISING - THE BEST WAY TO PROMOTE YOUR BUSINESS.</h2>
              <p>
                  Internet banner advertising is an excellent and effective way to promote your products and services.<br>
                  Currently any type of business will require you to work actively towards the implementation of advertising and marketing activities. <br>
                  The principle of internet banner advertising is based on how to attract the attention of the web viewers. <br>
                  You just need to properly and competently to use this popular business tool and expect a high return in the shortest possible time. <br>
                  Millions of consumers surfing the Internet daily. Many of these web visitors could be converted into new users or buyers of your product or service. <br>
                  That is why most marketers recommend using banner advertising, which can be called one of the most powerful dynamic internet marketing strategies.
              </p>
          </div>
      </div>
      <div id="advices">
          <h3>DO YOU WANT TO ADVERTISE ON SEA-DISTANCES.ORG ?</h3>
          <a href="https://sea-distances.org/contact">PLEASE CONTACT US FOR MORE INFORMATION >>></a>
      </div>
  </main>
  <footer>
      <hr>
      Copyright © 2021 by SEA-DISTANCES.ORG<br>
      All Rights Reserved.
  </footer>
</body>
</html>

FICHIER CSS:


body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  width: 1200px;
  margin: auto;
  background: white url(https://sea-distances.org/images/bg.gif) repeat-x left top;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  box-sizing: border-box;
  border-radius: 5px;
  margin-bottom: 50px;
}

h1 {
  font-size: 20px;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
  margin-right: 30px;
}

nav {
  display: flex;
}

nav > a {
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  margin-right: 20px;
}

h1 > a {
  color: white;
  text-decoration: none;
}

main {
  width: 1200px;
  margin: auto;
}

footer {
  width: 1200px;
  margin: auto;
}

#intro {
  display: flex;
  margin-bottom: 10px;
}

#intro > img {
  width: 246px;
  height: 173px;
}

h2 {
  color: rgb(0, 102, 153);
  font-size: 17px;
  margin: 0px 0px 10px 0px;
}

p {
  color: #333333;
  font-size: medium;
  line-height: 20px;
  margin: 0px;
}

#advices {
  margin-bottom: 60px;
}

#advices > * {
  color: rgb(0, 102, 153);
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}

h3 {
  margin: 0px;
}

footer {
  text-align: center;
  font-size: 12px;
}

hr {
  margin-bottom: 10px;
}

J'ai fait en sorte que ça fasse un minimum débutant :hap:

T'as juste à copier coller le premier dans un fichier html, le second dans un fichier css, tu mets les deux dans un dossier et tu ouvres le fichier html :ok:

ayaaaaaaaaao le pemt, du coup il t'a tout fait

Merle_Moqueur

8 décembre 2021 à 05:19:32

Tu fais une capture d'écran de la page et tu fais une page HTML qui affiche ton image. Easy peasy

Grolipet

8 décembre 2021 à 05:22:00

Le 08 décembre 2021 à 05:19:16 :

Le 08 décembre 2021 à 05:17:12 :
Tiens khey, jte l'ai fait ça m'a pris 10 min :hap:

FICHIER HTML:


<!DOCTYPE html>
<html lang="fr">
<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">
    <link rel="stylesheet" href="main.css">
    <title>SEA-DISTANCES.ORG</title>
</head>
<body>
    <header>
        <h1><a href="/">SEA-DISTANCES.ORG</a></h1>
        <nav>
            <a href="/">Ports Distances</a>
            <a href="/">Voyage Calculator</a>
            <a href="/">Advertise</a>
            <a href="/">Contact us</a>
        </nav>
    </header>
    <main>
        <div id="intro">
            <img src="https://sea-distances.org/images/success.jpg" alt="statistics">
            <div id="intro_text">
                <h2>ADVERTISING - THE BEST WAY TO PROMOTE YOUR BUSINESS.</h2>
                <p>
                    Internet banner advertising is an excellent and effective way to promote your products and services.<br>
                    Currently any type of business will require you to work actively towards the implementation of advertising and marketing activities. <br>
                    The principle of internet banner advertising is based on how to attract the attention of the web viewers. <br>
                    You just need to properly and competently to use this popular business tool and expect a high return in the shortest possible time. <br>
                    Millions of consumers surfing the Internet daily. Many of these web visitors could be converted into new users or buyers of your product or service. <br>
                    That is why most marketers recommend using banner advertising, which can be called one of the most powerful dynamic internet marketing strategies.
                </p>
            </div>
        </div>
        <div id="advices">
            <h3>DO YOU WANT TO ADVERTISE ON SEA-DISTANCES.ORG ?</h3>
            <a href="https://sea-distances.org/contact">PLEASE CONTACT US FOR MORE INFORMATION >>></a>
        </div>
    </main>
    <footer>
        <hr>
        Copyright © 2021 by SEA-DISTANCES.ORG<br>
        All Rights Reserved.
    </footer>
</body>
</html>

FICHIER CSS:


body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 1200px;
    margin: auto;
    background: white url(https://sea-distances.org/images/bg.gif) repeat-x left top;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 15px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 50px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    margin-right: 30px;
}

nav {
    display: flex;
}

nav > a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    margin-right: 20px;
}

h1 > a {
    color: white;
    text-decoration: none;
}

main {
    width: 1200px;
    margin: auto;
}

footer {
    width: 1200px;
    margin: auto;
}

#intro {
    display: flex;
    margin-bottom: 10px;
}

#intro > img {
    width: 246px;
    height: 173px;
}

h2 {
    color: rgb(0, 102, 153);
    font-size: 17px;
    margin: 0px 0px 10px 0px;
}

p {
    color: #333333;
    font-size: medium;
    line-height: 20px;
    margin: 0px;
}

#advices {
    margin-bottom: 60px;
}

#advices > * {
    color: rgb(0, 102, 153);
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

h3 {
    margin: 0px;
}

footer {
    text-align: center;
    font-size: 12px;
}

hr {
    margin-bottom: 10px;
}

J'ai fait en sorte que ça fasse un minimum débutant :hap:

T'as juste à copier coller le premier dans un fichier html, le second dans un fichier css, tu mets les deux dans un dossier et tu ouvres le fichier html :ok:

ayaaaaaaaaao le pemt, du coup il t'a tout fait

Oui par contre j'ai oublié de mettre les urls dans les <a> de la barre de menu, mais bon ce sera pas très compliqué à ajouter :hap:

akou02

8 décembre 2021 à 05:22:27

Le 08 décembre 2021 à 05:17:12 :
Tiens khey, jte l'ai fait ça m'a pris 10 min :hap:

FICHIER HTML:


<!DOCTYPE html>
<html lang="fr">
<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">
  <link rel="stylesheet" href="main.css">
  <title>SEA-DISTANCES.ORG</title>
</head>
<body>
  <header>
      <h1><a href="/">SEA-DISTANCES.ORG</a></h1>
      <nav>
          <a href="/">Ports Distances</a>
          <a href="/">Voyage Calculator</a>
          <a href="/">Advertise</a>
          <a href="/">Contact us</a>
      </nav>
  </header>
  <main>
      <div id="intro">
          <img src="https://sea-distances.org/images/success.jpg" alt="statistics">
          <div id="intro_text">
              <h2>ADVERTISING - THE BEST WAY TO PROMOTE YOUR BUSINESS.</h2>
              <p>
                  Internet banner advertising is an excellent and effective way to promote your products and services.<br>
                  Currently any type of business will require you to work actively towards the implementation of advertising and marketing activities. <br>
                  The principle of internet banner advertising is based on how to attract the attention of the web viewers. <br>
                  You just need to properly and competently to use this popular business tool and expect a high return in the shortest possible time. <br>
                  Millions of consumers surfing the Internet daily. Many of these web visitors could be converted into new users or buyers of your product or service. <br>
                  That is why most marketers recommend using banner advertising, which can be called one of the most powerful dynamic internet marketing strategies.
              </p>
          </div>
      </div>
      <div id="advices">
          <h3>DO YOU WANT TO ADVERTISE ON SEA-DISTANCES.ORG ?</h3>
          <a href="https://sea-distances.org/contact">PLEASE CONTACT US FOR MORE INFORMATION >>></a>
      </div>
  </main>
  <footer>
      <hr>
      Copyright © 2021 by SEA-DISTANCES.ORG<br>
      All Rights Reserved.
  </footer>
</body>
</html>

FICHIER CSS:


body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

header {
  width: 1200px;
  margin: auto;
  background: white url(https://sea-distances.org/images/bg.gif) repeat-x left top;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  box-sizing: border-box;
  border-radius: 5px;
  margin-bottom: 50px;
}

h1 {
  font-size: 20px;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
  margin-right: 30px;
}

nav {
  display: flex;
}

nav > a {
  color: white;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  margin-right: 20px;
}

h1 > a {
  color: white;
  text-decoration: none;
}

main {
  width: 1200px;
  margin: auto;
}

footer {
  width: 1200px;
  margin: auto;
}

#intro {
  display: flex;
  margin-bottom: 10px;
}

#intro > img {
  width: 246px;
  height: 173px;
}

h2 {
  color: rgb(0, 102, 153);
  font-size: 17px;
  margin: 0px 0px 10px 0px;
}

p {
  color: #333333;
  font-size: medium;
  line-height: 20px;
  margin: 0px;
}

#advices {
  margin-bottom: 60px;
}

#advices > * {
  color: rgb(0, 102, 153);
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
}

h3 {
  margin: 0px;
}

footer {
  text-align: center;
  font-size: 12px;
}

hr {
  margin-bottom: 10px;
}

J'ai fait en sorte que ça fasse un minimum débutant :hap:

T'as juste à copier coller le premier dans un fichier html, le second dans un fichier css, tu mets les deux dans un dossier et tu ouvres le fichier html :ok:

Bordel sérieux ? :bave:

Merci beaucoup khey, je teste ça tout de suite :ange:

Grolipet

8 décembre 2021 à 05:23:09

Le 08 décembre 2021 à 05:22:27 :

Le 08 décembre 2021 à 05:17:12 :
Tiens khey, jte l'ai fait ça m'a pris 10 min :hap:

FICHIER HTML:


<!DOCTYPE html>
<html lang="fr">
<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">
    <link rel="stylesheet" href="main.css">
    <title>SEA-DISTANCES.ORG</title>
</head>
<body>
    <header>
        <h1><a href="/">SEA-DISTANCES.ORG</a></h1>
        <nav>
            <a href="/">Ports Distances</a>
            <a href="/">Voyage Calculator</a>
            <a href="/">Advertise</a>
            <a href="/">Contact us</a>
        </nav>
    </header>
    <main>
        <div id="intro">
            <img src="https://sea-distances.org/images/success.jpg" alt="statistics">
            <div id="intro_text">
                <h2>ADVERTISING - THE BEST WAY TO PROMOTE YOUR BUSINESS.</h2>
                <p>
                    Internet banner advertising is an excellent and effective way to promote your products and services.<br>
                    Currently any type of business will require you to work actively towards the implementation of advertising and marketing activities. <br>
                    The principle of internet banner advertising is based on how to attract the attention of the web viewers. <br>
                    You just need to properly and competently to use this popular business tool and expect a high return in the shortest possible time. <br>
                    Millions of consumers surfing the Internet daily. Many of these web visitors could be converted into new users or buyers of your product or service. <br>
                    That is why most marketers recommend using banner advertising, which can be called one of the most powerful dynamic internet marketing strategies.
                </p>
            </div>
        </div>
        <div id="advices">
            <h3>DO YOU WANT TO ADVERTISE ON SEA-DISTANCES.ORG ?</h3>
            <a href="https://sea-distances.org/contact">PLEASE CONTACT US FOR MORE INFORMATION >>></a>
        </div>
    </main>
    <footer>
        <hr>
        Copyright © 2021 by SEA-DISTANCES.ORG<br>
        All Rights Reserved.
    </footer>
</body>
</html>

FICHIER CSS:


body {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    width: 1200px;
    margin: auto;
    background: white url(https://sea-distances.org/images/bg.gif) repeat-x left top;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 15px;
    box-sizing: border-box;
    border-radius: 5px;
    margin-bottom: 50px;
}

h1 {
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    margin-right: 30px;
}

nav {
    display: flex;
}

nav > a {
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    margin-right: 20px;
}

h1 > a {
    color: white;
    text-decoration: none;
}

main {
    width: 1200px;
    margin: auto;
}

footer {
    width: 1200px;
    margin: auto;
}

#intro {
    display: flex;
    margin-bottom: 10px;
}

#intro > img {
    width: 246px;
    height: 173px;
}

h2 {
    color: rgb(0, 102, 153);
    font-size: 17px;
    margin: 0px 0px 10px 0px;
}

p {
    color: #333333;
    font-size: medium;
    line-height: 20px;
    margin: 0px;
}

#advices {
    margin-bottom: 60px;
}

#advices > * {
    color: rgb(0, 102, 153);
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
}

h3 {
    margin: 0px;
}

footer {
    text-align: center;
    font-size: 12px;
}

hr {
    margin-bottom: 10px;
}

J'ai fait en sorte que ça fasse un minimum débutant :hap:

T'as juste à copier coller le premier dans un fichier html, le second dans un fichier css, tu mets les deux dans un dossier et tu ouvres le fichier html :ok:

Bordel sérieux ? :bave:

Merci beaucoup khey, je teste ça tout de suite :ange:

De rien khey, je fais des sites depuis longtemps pour moi c'est pas grand chose :ok:

Grolipet

8 décembre 2021 à 05:25:21

Par contre j'ai pas fait au pixel près, à toi de bidouiller dans le css si tu veux que les proportions correspondent exactement :oui: