TLSTOULOUSE

Open In Editor Video Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TLS FICHE DE VISITE</title>
    <link rel="stylesheet" href="ENTRAIN.CSS">
    <script src="Acc.js"></script>
</head>
<body>
    <section class="Toulouse1">
         <nav>
        <h3 class="Wor"> TLS//TOULOUSE</h3>
        <div class="PROPOS">
            <a href="#MONUMENT" class="navy"> Les MONUMENTS</a>
            <a href="#STATS" class="navy">STATS</a>
            <a href="#INNOVATION" class="navy">INNOVATION</a>
            <a href="#CONTACT" class="navy">CONTACT</a>
        </div>
        </nav>
        <div class="intro">
            <h1 class="bigo">TOULOUSE</h1>
            <h4>LA VILLE ROSE</h4>
        </div>
    </section>
    <section class="Occi" id="MONUMENT">
        <div class="Spirt">
       <div> <h1>ESPRIT </h1>
        <h1 style="color: #FF6A9A;">OCCITAN</h1></div>
    <div><p class="disco">Découvrez une ville où l'histoire rencontre le futur.<br> Des briques de terre cuite qui rosissent au coucher du soleil
        jusqu'aux<br> technologie aerospatiales de pointe,Toulouse est un<br> mélange unique de patrimoine  et d'innovation
    </p></div></div>
    <div class="change">
      <div class="idea">
        <h2>01</h2>
        <h3>Architecture</h3>
        <img src="05-assezat-5-didier-descouens_19060.jpg" alt="Hôtel d'Assézat" class="cite-image" height="200px" width="250px">
        <p>La marque distinctive de Toulouse réside dans son architecture unique en briques roses, illustrée de manière emblématique par la grandiose place du Capitole.</p>
      </div>
      <div class="idea">
        <h2>02</h2>
        <h3>Innovation</h3>
        <img src="Cite_de_l_Espace_pillars.jpg" alt="Cité de l'Espace" class="cite-image" height="200px" width="250px">
        <p class="esp">En tant que capitale européenne de l’aéronautique, Toulouse abrite Airbus, la Cité de l’Espace et les technologies de demain.</p></div>
      <div class="idea">
        <h2>03</h2>
        <h3>Espaces Verts</h3>
        <img src="jardin_fumelMossot_800x350px.jpg" height="200px" width="250px">
        <p>Une ville verte traversée par la Garonne, le canal du Midi et de magnifiques jardins luxuriants comme le Jardin japonais.</p>
    </div>
    </section>
    <section id="MONUMENT" class="Occi">
    <div class="capito">
       <div> <img src="https://tse2.mm.bing.net/th/id/OIP.o0DKJx_svtWO9kTkYoqfXAHaE8?cb=ucfimg2&ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3"  height="400px" width="550px">
       </div><div class="tes"><h4>Le coeur de la ville</h4>
        <h1> Place du Capitole</h1>
    <p>Le cœur battant de Toulouse. Cette grande place néoclassique  est bordée  <br> de bâtiments emblématiques en brique rose et d’arcades historiques. Elle abrite <br> l’Hôtel de Ville et le Théâtre du Capitole,  symboles du pouvoir, de la culture et <br> du patrimoine artistique de la ville.</p>
  <a href="https://metropole.toulouse.fr/annuaire/capitole" class="EXPE">EXPLOREZ</a></div>
    </div>
    <div class="capito">
    <div class="tes"><h4>Patrimoine mondial</h4>
    <h1>Basilique Saint- <br> Sernin</h1>
<p>Un chef-d’œuvre de l’architecture romane et site du patrimoine mondial de l’UNESCO. <br> Cette majestueuse basilique était une étape essentielle sur le chemin de pèlerinage vers <br> Saint-Jacques-de-Compostelle et  demeure <br> l’une des plus grandes églises romanes d’Europe.
</p>
<a href="https://www.occitanie-histoire-et-patrimoine.fr/basilique-saint-sernin-toulouse/" class="EXPE">DECOUVREZ</a></div>
   <div> <img class="cris" src="https://tse4.mm.bing.net/th/id/OIP.7JXxBGT41qDntYqzaI0jygHaFj?cb=ucfimg2&ucfimg=1&rs=1&pid=ImgDetMain&o=7&rm=3" height="400px" width="550px">
   </div>
</section>
<section id="STATS">
  <div class="Stats"><div><h1>2000</h1>
  <h4>ANS D'HISTOIRE</h4></div>
  <div><h1>1ERE</h1><h4>VILLE AERONOTIQUE</h4></div>
  <div><h1>160</h1><h4>PARC ET JARDIN</h4></div>
  <div><h1>460K+</h1><h4>HABITANTS</h4></div>
  </div>
</section>
<section id="INNOVATION" class="yama">
  <div class="Evo"> <h1>Science & </h1>
        <h1 style="color: #FF6A9A;">Culture</h1></div>
<section class="science-section">
  <div class="cards">

<div class="card card-large">
      <div class="card-icon">
        <svg viewBox="0 0 24 24">
          <path d="M12 2l4 8-4 12-4-12 4-8z" />
        </svg>
      </div>
      <h3>Cité de l'Espace</h3>
      <p>
       Un parc à thème immersif consacré à l’espace et à la conquête des étoiles.
Vivez l’apesanteur et marchez sur la Lune.
      </p>
    </div>

<div class="card">
      <div class="card-icon">
        <svg viewBox="0 0 24 24">
          <path d="M4 20V8l8-4 8 4v12" />
        </svg>
      </div>
      <h3>Hôtel d'Assézat</h3>
      <p>Un palais de la Renaissance abritant la collection d’art de la Fondation Bemberg.
</p>
    </div>

<div class="card">
      <div class="card-icon">
        <svg viewBox="0 0 24 24">
          <path d="M12 2C8 6 6 10 6 14a6 6 0 0012 0c0-4-2-8-6-12z"/>
        </svg>
      </div>
      <h3>La Garonne</h3>
      <p>La ligne de vie de la ville, parfaite pour les promenades au coucher du soleil et les festivals d’été.</p>
    </div>

</div>
</section></section>

<div class="footer-left">
      <span class="footer-logo">WEBPIRATE</span>
    </div>

<div class="footer-center">
      <p>Site à valeur d'entrainement</p>
    </div>

</div>
</footer>

</body>
</html>

CSS

nav{
    display: flex;
      color: white;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    font-family: Arial, Helvetica, sans-serif;}
.TLS{
  font-family: 'Times New Roman', Times, serif;
}
html{
  scroll-behavior: smooth;
}
section {
  scroll-margin-top: 120px ;
}

.Wor{
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
}
.navy{
  text-decoration: none;
  color: white;
  font-size: 12px;
  gap: 15px;
}
.navy h3{
  font-size: 30px;
}
.Toulouse1{
  background-image: url('Capitole Toulouse Background.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.bigo{
  margin-left: 20%;
  font-size: 80px;
  font-family: 'Montserrat', sans-serif;
  color: white;
}

/* =========================================
   RESET & BASE
   ========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  color: #ffffff;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  background: linear-gradient(135deg, #0B0609 0,#2A0E1C 0%, #0B0609 100%);

;
}

/* =========================================
   HERO TOULOUSE (PHOTO + FUSION)
   ========================================= */

.Toulouse1 {
  position: relative;
  width: 100%;
  min-height: 100vh;

background-image: url("Capitole Toulouse Background.png"); /* TA PHOTO */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

background-color: #0b0609;
  overflow: hidden;

isolation: isolate;
}

/* OMBRES / ASSOMBRISSEMENT */
.Toulouse1::before {
  content: "";
  position: absolute;
  inset: 0;

background: linear-gradient(
    to bottom,
    rgba(11, 6, 9, 0.05) 0%,
    rgba(11, 6, 9, 0.35) 20%,
    rgba(11, 6, 9, 0.75) 75%,
    rgba(11, 6, 9, 0.9) 100%
  );

z-index: 1;
}

/* TEINTE ROSE + BRIQUE (FUSION PHOTO) */
.Toulouse1::after {
  content: "";
  position: absolute;
  inset: 0;

background:
    radial-gradient(
      circle at 50% 15%,
      rgba(227, 74, 120, 0.35),
      transparent 60%
    ),
    radial-gradient(
      circle at 40% 45%,
      rgba(201, 107, 79, 0.25),
      transparent 60%
    );

mix-blend-mode: screen;
  z-index: 2;
}

/* =========================================
   NAVBAR
   ========================================= */

nav {
  position: relative;
  z-index: 3;

display: flex;
  justify-content: space-between;
  align-items: center;

padding: 40px 80px;
}

nav h3 {
  font-size: 14px;
  letter-spacing: 0.15em;
  font-weight: 600;
}

.PROPOS {
  display: flex;
  gap: 32px;
}

.navy {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.navy:hover {
  color: #e34a78;
}

/* =========================================
   INTRO TEXTE
   ========================================= */

.intro {
  position: relative;
  z-index: 3;

padding: 120px 80px;
  max-width: 900px;
}

/* GROS TITRE */
.bigo {
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;

text-shadow:
    0 6px 20px rgba(0, 0, 0, 0.9),
    0 0 45px rgba(227, 74, 120, 0.45);
}

/* SOUS-TITRE */
.intro h4 {
  margin-top: 10px;
  margin-bottom: 24px;
  margin-left: 65%;
  font-size: 14px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #e34a78;
}

/* PARAGRAPHE */
.intro p {
  max-width: 520px;

font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);

text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}
.tes a {
  text-decoration: none;
  color: white;
  margin-left: 30px;
}
.Evo{
  margin-left: 40px;
  padding-top: 30px;
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1024px) {
  nav {
    padding: 32px 48px;
  }

.intro {
    padding: 100px 48px;
  }
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
    gap: 20px;
  }

.PROPOS {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
  }

.intro {
    padding: 90px 32px;
  }

.bigo {
    font-size: clamp(3rem, 14vw, 6rem);
  }
}
.Occi{
  margin-top: 60px;
  margin-left: 60px;
}
.Spirt{
  display: flex;
  gap: 60%;
}
.disco{
  border-left: 3px solid #e34a78 ;
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center;
margin-top: 4px;
padding-left: 8px;}
.change{
  margin-top: 80px;
}

p{
  font-size: 10px;
  border: #e34a78;
}
.idea {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        background-color: rgba(255, 255, 255, 0.1);
        padding: 20px;
        border-radius: 12px;
        max-width: 350px;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        color: white;}

.cite-image {
        max-width: 300px;
        border-radius: 8px;
        margin-bottom: 10px;
        margin-top: 10px;
}
    .change{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      gap: 20px;}
      h2{
        color: rgba(255, 255, 255, 0.1);
      }
      .capito{
        margin-top: 40px;
        display: flex;
      }
      img{
        border-radius: 12px;
      }
      .tes h4 {
          display: inline-block;
  font-size: 12px;
  color: #ff5a8a;
  border: 1px solid #ff5a8a;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
  margin-left: 30px;
      }
        .tes{
          margin-top: 100px;
        }
        .tes p {
          font-size: 10px;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 20px;
  margin-left: 30px;
        }
        .tes h1{
          margin-left: 30px;
        }

.Stats{
  display: flex;
  align-items: center;
  gap: 200px;
  background-color: #2A0E1C;
  margin-top: 10%;
  background-size: cover;
  padding: 50px;
}
.cris{
  margin-left: 10px;
}
.Stats h4{
  color: #ff5a8a ;
  font-size: 10px;
  text-align: center;
}
.Stats h1{
  font-size: 60px;
  text-align: center;
  margin-left: 20px;
}
.cult{
  margin-top: 30px;
  margin-bottom: 40px;
  
}
.yama{
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 80% 70%,
      rgba(138, 43, 226, 0.35),
      transparent 45%
    ),
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 20, 147, 0.25),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #0b0508 0%,
      #12060c 40%,
      #0a0307 100%
    );
  color: white;
}

.cult h1{
  margin-left: 30px;
}

.science-section {
  padding: 80px 40px;
}

.cards {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: auto;
}

/* CARD BASE */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)),
    rgba(18,18,18,0.85);
  border-radius: 20px;
  padding: 64px 28px 28px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
}

/* GRANDE CARD */
.card-large {
  grid-row: span 2;
  background:
    radial-gradient(circle at center, rgba(255,43,130,0.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)),
    rgba(18,18,18,0.85);
}

/* ICONE */
.card-icon {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 28px;
  height: 28px;
  color: #ff2b82;
}

.card-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* TEXTE */
.card h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.card p {
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  line-height: 1.6;
}
/* footer{
  background-color: black;
  padding: 40px;
  display: flex;
   font-family: "Inter", sans-serif;
}
.taff{
  color: rgba(255,255,255,0.65) ;
  justify-content: space-around;
  font-size: 2px;
opacity: 0.6;
gap: 30px;
}
footer h3{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 15px;
} */
 .footer {
  padding: 40px 60px;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.6)
  );
  font-family: "Inter", sans-serif;
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LEFT */
.footer-logo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.8);
}

/* CENTER */
.footer-center {
  display: flex;
  gap: 28px;
}

.footer-center a {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-center a:hover {
  color: #fff;
}

/* RIGHT */
.footer-right {
  display: flex;
  gap: 18px;
}

.footer-right a {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-right a:hover {
  color: #ff2b82;
}

.footer-right img {
  filter: brightness(0) invert(1);
}

.EXPE {
  border: none;
  border-bottom: 1px solid #ff5a8a;
}

.EXPE::before {
  content: "→";
  color: white;
  font-size: 24px;
  margin-right: 10px;
}

/* ---------- NAVBAR MOBILE ---------- */
@media (max-width: 768px) {

nav {
    flex-direction: column;
    padding: 20px;
    gap: 15px;
  }

.PROPOS {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

.navy {
    font-size: 11px;
  }
}

/* ---------- HERO / TOULOUSE ---------- */
@media (max-width: 768px) {

.intro {
    padding: 90px 20px;
    text-align: center;
  }

.bigo {
    font-size: 3.2rem;
    margin-left: 0;
  }

.intro h4 {
    margin-left: 0;
    font-size: 11px;
    letter-spacing: 0.3em;
  }
}

/* ---------- ESPRIT OCCITAN ---------- */
@media (max-width: 768px) {

.Spirt {
    flex-direction: column;
    gap: 30px;
  }

.disco {
    border-left: none;
    border-top: 3px solid #e34a78;
    padding-top: 10px;
    padding-left: 0;
  }
}

/* ---------- CARDS (IDEA) ---------- */
@media (max-width: 768px) {

.change {
    flex-direction: column;
    align-items: center;
  }

.idea {
    width: 90%;
  }
}

/* ---------- IMAGE + TEXTE (CAPITO) ---------- */
@media (max-width: 768px) {

.capito {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }

.tes {
    margin-top: 20px;
  }

.tes h1,
  .tes h4,
  .tes p {
    margin-left: 0;
  }
}

/* ---------- STATS ---------- */
@media (max-width: 768px) {

.Stats {
    flex-direction: column;
    gap: 35px;
    padding: 40px 20px;
  }

.Stats h1 {
    font-size: 42px;
  }
}

/* ---------- SCIENCE / CARDS GRID ---------- */
@media (max-width: 768px) {

.cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- FOOTER ---------- */
@media (max-width: 768px) {

.footer-container {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS