Skip to content

Commit

Permalink
perf: changed semantics and titles hierrachy
Browse files Browse the repository at this point in the history
  • Loading branch information
@gtcore902
gtcore902 committed Jan 15, 2024
1 parent beaa48e commit 1eb9282
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 133 deletions.
3 changes: 2 additions & 1 deletion assets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,9 +83,10 @@ body {
font-family: 'Spectral';
font-weight: 800;
font-style: italic;
font-size: 1rem;
width: 60%;
}
#about-me p {
#about-me p:not(.about-me__introduction) {
width: 80%;
font-size: 14px;
}
Expand Down
266 changes: 134 additions & 132 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,145 +17,147 @@
<script src="./assets/scripts.js" defer></script>
</head>
<body>
<div class="top-header">
<h3 class="name">Nina Carducci</h3>
<div class="nav">
<ul>
<li><a href="#about">À propos</a></li>
<li><a href="#gallery">Galerie</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<li><a class="social-link" href="https://www.instagram.com/ninacarducci.photo/?hl=fr" target="_blank"><img src="assets/images/instagram.webp" alt="Logo Instagram Nina Carducci"></a></li>
</ul>
</div>
</div>
<div id="header">
<main>
<section class="top-header">
<h1 class="name">Nina Carducci</h1>
<nav class="nav">
<ul>
<li><a href="#about">À propos</a></li>
<li><a href="#gallery">Galerie</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<li><a class="social-link" href="https://www.instagram.com/ninacarducci.photo/?hl=fr" target="_blank"><img src="assets/images/instagram.webp" alt="Logo Instagram Nina Carducci"></a></li>
</ul>
</nav>
</section>
<section id="header">

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/images/slider/photographie-homme-affaire.webp" class="d-block w-100" alt="Nina Carducci - Photographie d'entreprise, professionnel traversant une route">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./assets/images/slider/photographie-homme-affaire.webp" class="d-block w-100" alt="Nina Carducci - Photographie d'entreprise, professionnel traversant une route">
</div>
<div class="carousel-item">
<img src="./assets/images/slider/photographie-evenement.webp" class="d-block w-100" alt="Nina Carducci - Photographie d'événements, jeunes assistants à un événement">
</div>
<div class="carousel-item">
<img src="./assets/images/slider/photographie-danse-maries.webp" class="d-block w-100" alt="Nina Carducci - Photographie de mariages, danse de mariés">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="carousel-item">
<img src="./assets/images/slider/photographie-evenement.webp" class="d-block w-100" alt="Nina Carducci - Photographie d'événements, jeunes assistants à un événement">
</section>
<section id="about">
<div class="picture left">
<img src="./assets/images/portrait-nina-carducci.webp" alt="Portrait de Nina Carducci, photographe professionnelle">
</div>
<div class="carousel-item">
<img src="./assets/images/slider/photographie-danse-maries.webp" class="d-block w-100" alt="Nina Carducci - Photographie de mariages, danse de mariés">
<div id="about-me">
<h2 class="about-me__title">A propos de moi</h2>
<p class="about-me__introduction">Devenir photographe était pour moi une évidence. Comme si j’y étais prédestiné. Saisir un moment, une émotion, une situation, un endroit, une lumière et les rendre immortels, voilà ce qui me fait vibrer.</p>
<p>Nous passons notre vie à chercher le bonheur, et lorsque nous y touchons, nous n’avons qu’une envie : le figer au travers de photographies pour le savourer avec les personnes qui sont importantes à nos yeux, ou le partager au plus grand nombre.
C’est ce que je vous propose : saisir ces merveilleux moments au travers de mon regard, mon approche, ma technique. Rendre ces moments immortels, afin que vous puissiez y puiser de l’amour, du bonheur, de la tendresse et de lumière à chaque fois que vous poserez les yeux sur vos photos.</p>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div id="about">
<div class="picture left">
<img src="./assets/images/portrait-nina-carducci.webp" alt="Portrait de Nina Carducci, photographe professionnelle">
</div>
<div id="about-me">
<h3 class="about-me__title">A propos de moi</h3>
<h6 class="about-me__introduction">Devenir photographe était pour moi une évidence. Comme si j’y étais prédestiné. Saisir un moment, une émotion, une situation, un endroit, une lumière et les rendre immortels, voilà ce qui me fait vibrer.</h6>
<p>Nous passons notre vie à chercher le bonheur, et lorsque nous y touchons, nous n’avons qu’une envie : le figer au travers de photographies pour le savourer avec les personnes qui sont importantes à nos yeux, ou le partager au plus grand nombre.
C’est ce que je vous propose : saisir ces merveilleux moments au travers de mon regard, mon approche, ma technique. Rendre ces moments immortels, afin que vous puissiez y puiser de l’amour, du bonheur, de la tendresse et de lumière à chaque fois que vous poserez les yeux sur vos photos.</p>
</div>
</div>
<div id="gallery">
<h3 class="title">Portfolio</h3>
<div class="container py-3">
<div class="gallery" style="display: none">
<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/photographie-professionelle-concert.webp" alt="Photographie professionnelle d'un concert"/>
<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/photographie-homme-en-costume.webp" alt="Photographie d'un professionnel en costume par Nina Carducci"/>
<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/photographie-femme-en-reunion.webp" alt="Photographie d'une femme en réunion d'entreprise"/>
<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/photographie-mariage-mains-tendues.webp" alt="Photographie d'un événement par Nina Carducci, mains tendues"/>
<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/portrait-professionnel-homme.webp" alt="Portrait professionnel d'un homme par Nina Carducci"/>
<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/photographie-maries.webp" alt="Photographie professionnelle de mariés"/>
<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/portrait-professionnel-femme.webp" alt="Portrait d'une femme par Nina Carducci"/>
<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/photographie-professionelle-chanteur.webp" alt="Photographie d'un concert par Nina Carducci"/>
<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/photographie-femme-au-travail.webp" alt="Photographie professionnelle d'une femme au travail"/>
</div>
</div>
<div class="quote">
<figure>
<blockquote>
<h1 class="quote__text">Un portrait n’est pas une ressemblance. Dès lors qu’une émotion ou qu’un fait est traduit en photo, il cesse d’être un fait pour devenir une opinion. L’inexactitude n’existe pas en photographie. Toutes les photos sont exactes. Aucune d’elles n’est la vérité.</h1>
</blockquote>
<figcaption class="quote__author">- Richard Avedon</figcaption>
</figure>
</div>
</div>
<div id="services">
<h3 class="title">Mes services</h3>
<div class="container">
<div class="service">
<div class="service__description">
<h3>Shooting photo</h3>
<p>Pour capturer vos moments les plus précieux et garder un souvenir impérissable. Je me déplace en Île-de-France pour réaliser vos photos</p>
</div>
<div class="service__price">
<h4>350€/demi journée</h4>
<span>Matériel, déplacement inclus</span>
</section>
<section id="gallery">
<h2 class="title">Portfolio</h2>
<div class="container py-3">
<div class="gallery" style="display: none">
<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/photographie-professionelle-concert.webp" alt="Photographie professionnelle d'un concert"/>
<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/photographie-homme-en-costume.webp" alt="Photographie d'un professionnel en costume par Nina Carducci"/>
<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/photographie-femme-en-reunion.webp" alt="Photographie d'une femme en réunion d'entreprise"/>
<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/photographie-mariage-mains-tendues.webp" alt="Photographie d'un événement par Nina Carducci, mains tendues"/>
<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/portrait-professionnel-homme.webp" alt="Portrait professionnel d'un homme par Nina Carducci"/>
<img data-gallery-tag="Mariages" class="gallery-item" src="./assets/images/gallery/mariage/photographie-maries.webp" alt="Photographie professionnelle de mariés"/>
<img data-gallery-tag="Portrait" class="gallery-item" src="./assets/images/gallery/portraits/portrait-professionnel-femme.webp" alt="Portrait d'une femme par Nina Carducci"/>
<img data-gallery-tag="Concert" class="gallery-item" src="./assets/images/gallery/concerts/photographie-professionelle-chanteur.webp" alt="Photographie d'un concert par Nina Carducci"/>
<img data-gallery-tag="Entreprises" class="gallery-item" src="./assets/images/gallery/entreprise/photographie-femme-au-travail.webp" alt="Photographie professionnelle d'une femme au travail"/>
</div>
</div>
<aside class="quote">
<figure>
<blockquote>
<h1 class="quote__text">Un portrait n’est pas une ressemblance. Dès lors qu’une émotion ou qu’un fait est traduit en photo, il cesse d’être un fait pour devenir une opinion. L’inexactitude n’existe pas en photographie. Toutes les photos sont exactes. Aucune d’elles n’est la vérité.</h1>
</blockquote>
<figcaption class="quote__author">- Richard Avedon</figcaption>
</figure>
</aside>
</section>
<section id="services">
<h2 class="title">Mes services</h2>
<div class="container">
<article class="service">
<div class="service__description">
<h3>Shooting photo</h3>
<p>Pour capturer vos moments les plus précieux et garder un souvenir impérissable. Je me déplace en Île-de-France pour réaliser vos photos</p>
</div>
<div class="service__price">
<h4>350€/demi journée</h4>
<span>Matériel, déplacement inclus</span>
</div>

</div>
<div class="service">
<div class="service__description">
<h3>Retouches</h3>
<p>Vous souhaitez retoucher vos photos pour un résultat professionnel ? Bénéficier d’un rendu optimal pour vos publications</p>
</div>
<div class="service__price">
<h4>50€/photo</h4>
<span>2 AR par photo</span>
</div>
</div>
<div class="service">
<div class="service__description">
<h3>Album photos</h3>
<p>Partagez avec vos proches et vos clients les photos des moments partagés ensemble à travers un album photo personnalisé</p>
</article>
<article class="service">
<div class="service__description">
<h3>Retouches</h3>
<p>Vous souhaitez retoucher vos photos pour un résultat professionnel ? Bénéficier d’un rendu optimal pour vos publications</p>
</div>
<div class="service__price">
<h4>50€/photo</h4>
<span>2 AR par photo</span>
</div>
</article>
<article class="service">
<div class="service__description">
<h3>Album photos</h3>
<p>Partagez avec vos proches et vos clients les photos des moments partagés ensemble à travers un album photo personnalisé</p>
</div>
<div class="service__price">
<h4>400€ album A4</h4>
<span>30 pages recto/verso</span>
</div>
</article>
</div>
<div class="service__price">
<h4>400€ album A4</h4>
<span>30 pages recto/verso</span>
</section>
<aside class="quote">
<figure>
<blockquote>
<h1 class="quote__text">De manière inconsciente, je crois, je guette un regard, une expression, des traits ou une nostalgie capable de résumer ou plus exactement de révéler une vie</h1>
</blockquote>
<figcaption class="quote__author">- Richard Avedon</figcaption>
</figure>
</aside>
<section id="contact">
<div class="container">
<div class="form-container">
<h2>Une question ? Une demande de devis ?</h2>
<p> N’hésitez pas à m’écrire ! Je vous répondrais en moins de 24 heures</p>
<form action="" method="post">
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Envoyer"/>
</form>
</div>
<div class="picture right">
<img src="./assets/images/camera-nina-carducci.webp" alt="Appareil photo de Nina Carducci, photographe professionnelle">
</div>
</div>
</div>
</div>
</div>
<div class="quote">
<figure>
<blockquote>
<h1 class="quote__text">De manière inconsciente, je crois, je guette un regard, une expression, des traits ou une nostalgie capable de résumer ou plus exactement de révéler une vie</h1>
</blockquote>
<figcaption class="quote__author">- Richard Avedon</figcaption>
</figure>
</div>
<div id="contact">
<div class="container">
<div class="form-container">
<h3>Une question ? Une demande de devis ?</h3>
<p> N’hésitez pas à m’écrire ! Je vous répondrais en moins de 24 heures</p>
<form action="" method="post">
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom">
<label for="email">Email</label>
<input type="email" name="email" id="email">
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
<input type="submit" value="Envoyer"/>
</form>
</div>
<div class="picture right">
<img src="./assets/images/camera-nina-carducci.webp" alt="Appareil photo de Nina Carducci, photographe professionnelle">
</div>
</div>
</div>
</section>
</main>
</body>
</html>

0 comments on commit 1eb9282

Please sign in to comment.