Aide pour projet scolaire

BearWithIt -  
 BearWithIt -
Bonjour,

J'aimerai avoir de l'aide sur la réalisation d'un site qui nous est demandé par un professeur
Il faudrait refaire un site existant à l'identique (sauf quelques détails) sauf que le site: eati.fr est un site professionnel et que nous sommes que des étudiants avec quelques semaines de programmations html (pour vous situer, certains ne savent pas que # dans un css est pour un ID)

je vais vous faire part de mon code et si vous m'aidez, je vou remercie d'avance: 

 <!doctype [/html/htmlintro.php3 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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Eati, bureau d'études fluides et thermique indépendant</title>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <header class="ent1">
                <div class="row">
                    <img src="logo-eati.png" width="337" height="92" class="col-lg-4">
                    <div class="col-lg-8">
                        <h1><img src="slogan.png" width="754" height="34" class="slogan-img"></h1>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="row">
                        <aside>
                            <nav class="col-lg-12">
                                <table>
                                    <tr>
                                        <td><a title="Accueil" href="index.html" class="menu">ACCUEIL</a></td>
                                        <td><a href="page/competences.html" class="menu">COMPETENCES</a></td>
                                        <td><a href="page/references.html" class="menu">REFERENCES</a></td>
                                        <td><a href="page/espacepro.html" class="menu">ESPACE PRO</a></td>
                                        <td><a href="page/nouscontacter.html" class="menu">NOUS CONTACTER</a></td>
                                    </tr>
                                </table>
                            </nav>
                        </aside>
                    </div>
                </div>


            </header>

        </div>

        <hr class="hr1">

        <div class="row">
            <section class="section1 col-lg-12">

                <img class="col-lg-7" src="bloc-index-conception.jpg">
            </section>



        </div>
        <div class="row">


            <main>

                <class="texte1" class="col-lg-12 section2">
                    <div class="row">
                        <p class=" col-lg-12 blue ">Contactez nous pour une étude personnalisée au xx xx xx xx xx</p>
                    </div>
                    <div class="row">
                        <article class="col-lg-12">
                            <p>
                                <hr class="col-lg-12 ">
                                <img src="bloc-index-rt2012.jpg" class=famille>
                                <header class="texte3">
                                    Etude thermique RT 2012
                                    <section class="texte1">En tant que particuler </section>
                                </header>
                                </hr>
                                <hr>
                                <header class="texte4">
                                    Etude thermique pour eco-pret
                                </header>
                                <section class="texte2">En tant que particuler, vous envisagez</section>
                                <aside>
                                    <img src="bloc-index-ecopret.jpg" class=maison>
                                </aside>
                                </hr>
                                <hr>
                                <img src="bloc-index-infiltrometrie.jpg" class=ordi>
                                <header class="texte3">
                                    Certifications tests infiltrométrie
                                    <section class="texte1">En tant que particuler </section>
                                </header>
                                </hr>
                            </p>

                        </article>
                    </div>

                    </<aside>


            </main>





        </div>


        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>




.container-fluid {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2%;
    background: url(nuages.jpg);
    background-size: cover;
}

header.ent1 {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2%;
    /*border: 1px solid grey;*/
}

h1 {
    color: #A41A56;
    font-size: 25px;
    font-style: italic;
    padding-top: 2%;
}

aside {
    background-color: #002A9B;
}

nav {
    margin-top: 4%;
    background-color: white;
}

hr {
    height: 3px;
    background-color: grey;
    border: none;
}

.hr1 {
    height: 10px;
    background-color: #A41A56;
    border: none;
}

.section1 {
    margin-right: auto;
    margin-left: auto;
    margin-top: 2%;
    background-color: grey;
    /*width: 100%;*/
}

img {
    margin-right: auto;
    margin-left: auto;
    display: block;
}

main {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 2%;
}

header.ent2 {
    width: 70%;
    border: 1px solid black;
    margin-right: auto;
    margin-left: auto;
    background-color: white;
    margin-top: 1px;
    height: 130px;
    vertical-align: middle;
}

.red {
    font-size: 30px;
    color: #A41A56;
    font-weight: 600;
    text-align: center;
    line-height: 35px;
}

.black {
    font-size: 28px;
    line-height: 28px;
    text-align: center;
    font-weight: 600;
}

header.entart {
    font-size: 25px;
    color: #A41A56;
    font-weight: 600;
    text-align: left;
}

p.blue {
    margin-top: 2%;
    background-color: #002A9B;
    color: white;
    font-weight: 600;
    font-size: 25px;
    text-align: center;
    width: 70%;
}

a {
    color: black;
    font-weight: 600;
}

td {
    padding: 10px;
}

article {
    background-color: white;
    border: 1px solid grey;
    margin-left: 1%;
    margin-right: 1%;
    margin-bottom: 1%;
}

p {
    margin: 0 0 10px;
}

td {
    background-color: #9e2c53
}

.famille {
    margin-right: 85%;
    margin-left: 5%;
}

.maison {
    margin-right: 5%;
    margin-left: 55%;
}

.ordi {
    margin-right: 85%;
    margin-left: 5%;
}

.texte1 {
    margin-right: 5%;
    margin-left: 55%;
}

.texte2 {
    margin-right: 55%;
    margin-left: 5%;
}


Numéro de téléphone anonymisé par la Modération CCM
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Et... sur quoi bloques tu ?
As tu regardé le code source du site en question ?

Nb: Attention... refaire un site existant à l'identique... c'est limite une atteinte à du copyright et/ou une tentative de pishing !

0
BearWithIt
 
Bonjour

C''est une demande du prof, sauf que c'était une capture d'écran que l'on nous a transmis par un .pdf et que j'ai réussi à retrouver en tapant le nom du site soit eati.fr

Ce que je bloque, c'est pour déplacer l'image du milieu (la machinerie) afin qu'elle soit plus grande mais que les bordures se rapetissent,vous avez juste a copier mon fichier, vous comprendrez.

De plus, c'est un site réalisé par des professionnels alors que nous avons eu que quelques semaines de cours
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > BearWithIt
 
Vu que nous ne disposons pas des images qui va avec ton code...
et que rien, dans ce que tu nous montres ne semble faire référence à une quelconque "machinerie" ..; il sera difficile de te répondre.

Il semble également que tu aies mis ton css sous ton </body> et qu'il manque le </html>

Je pense qu'une capture écran de ta page et une explication détaillées de ce qui ne fonctionne pas serait des plus utiles.
De plus, ta question semble concerner de la mise en forme (du style) donc du CSS...
Je déplace donc ta question dans le bon forum.
0
BearWithIt > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
On va commencer par le début, voyez-vous des bugs, erreur dans mon html et css ?

De plus, puis-je vous envoyer un .ZIP contenant les images et mes fichiers html et css ?
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > BearWithIt
 
Si tu connais le système de grid bootstrap, tu devrais l'utiliser...
Places tes 3 zones centrales dans des div 

<div class="col-md-6 offset-md-3">
   <img src="bloc-index-conception.jpg" class="img-responsive fit-image">
</div>


et utiliser un peu de css pour que tes images s'adaptent à tes div
par exemple : 
.fit-image{
   width: 100%;
   object-fit: cover;
   height: 350px; /* only if you want fixed height */
  border:0;
}

https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
0
BearWithIt
 
Voici un lien de téléchargement pour obtenir toutes les images et le PDF contenant les consignes, ce que l'on nous demande de faire est le 2eme exercice.

De plus, j'ai un peu modifié comme vous l'avez dit avec les img-responsive

https://fromsmash.com/s752KAscI8-c0
0

Discussions similaires

Musique Du Film "Project X"
AlexiaMartins -
Thibaut -

23 réponses
Musique de " Projet X "
Gwendo443 -
EthanKin -

2 réponses
musique debut project x
warmzire -
LOL -

9 réponses
Je voudrais télécharger project X en français
lelea187 -
aiglenoirdu29 -

2 réponses
Projet x film
cha25f -
samlesheguey -

120 réponses