Skip to content

Commit

Permalink
deploy: 77df59a
Browse files Browse the repository at this point in the history
  • Loading branch information
@aferreira-deo
aferreira-deo committed Jun 10, 2024
1 parent 1e4e841 commit 1f87b8f
Show file tree
Hide file tree
Showing 8 changed files with 242 additions and 5 deletions.
9 changes: 8 additions & 1 deletion app.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
console.log("Hello World");
// scripts.js
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
form.addEventListener('submit', function(event) {
event.preventDefault();
alert('Form submitted successfully!');
});
});
Binary file added assets/asset_espagne.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/asset_mexique.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/asset_tahiti.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/asset_usa.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/cookie_profile_picture.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
102 changes: 98 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,108 @@
<!DOCTYPE html>
<!-- something important is missing in the html tag.... what is it? -->
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World</title>
<title>Cookie the Rabbit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
<header>
<h1>Cookie</h1>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#veterinaires">Vétérinaires</a></li>
<li><a href="#jouets">Jouets</a></li>
<li><a href="#conseils">Nos Conseils</a></li>
</ul>
<select id="language-picker">
<option value="fr">Français</option>
<option value="en">English</option>
<option value="zh">中文</option>
</select>
</nav>
</header>
<section id="accueil">
<h2 class="section-title a-propos">À propos</h2>
<div class="profile">
<img src="assets/cookie_profile_picture.jpg" alt="Cookie" class="profile-pic">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<section id="voyages">
<h2 class="section-title voyages">Voyages</h2>
<div class="carousel">
<div class="voyage card">
<img src="assets/asset_mexique.jpg" alt="Voyage au Mexique">
<p aria-hidden="true">⭐⭐⭐⭐⭐</p>
<p class="sr-only">5 étoiles</p>
<h3>Mexique</h3>
<p>The trip was awesome lorem ipsum bla bla bla bla</p>
<a href="https://en.wikipedia.org/wiki/Travel">Read more</a>
</div>
<div class="voyage card">
<img src="assets/asset_usa.jpg" alt="Voyage aux USA">
<p aria-hidden="true">⭐⭐⭐⭐</p>
<p class="sr-only">4 étoiles</p>
<h3>United States</h3>
<p>The trip was awesome lorem ipsum bla bla bla bla</p>
<a href="https://en.wikipedia.org/wiki/Travel">Read more</a>
</div>
<div class="voyage card">
<img src="assets/asset_espagne.jpg" alt="Voyage en Espagne">
<p aria-hidden="true">⭐⭐⭐⭐⭐</p>
<p class="sr-only">5 étoiles</p>
<h3>Espagne</h3>
<p>The trip was awesome lorem ipsum bla bla bla bla</p>
<a href="https://en.wikipedia.org/wiki/Travel">Read more</a>
</div>
<div class="voyage card">
<img src="assets/asset_tahiti.jpg" alt="Voyage à Tahiti">
<p aria-hidden="true">⭐⭐⭐⭐⭐</p>
<p class="sr-only">5 étoiles</p>
<h3>Tahiti</h3>
<p>The trip was awesome lorem ipsum bla bla bla bla</p>
<a href="https://en.wikipedia.org/wiki/Travel">Read more</a>
</div>
</div>
</section>
<section id="reseaux">
<h2 class="section-title reseaux">Réseaux</h2>
<p>
<a href="https://instagram.com/cookiethefluffyrabbit">Instagram</a> |
<a href="https://youtube.com/cookiethefluffyrabbit">YouTube</a> |
<a href="https://linkedin.com/cookie_business">LinkedIn</a>
</p>
</section>
<section id="contact">
<h2 class="section-title contact">Contact</h2>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="telephone">Téléphone:</label>
<input type="tel" id="telephone" name="telephone" required>
</div>
<div class="form-group">
<label for="pays">Pays:</label>
<select id="pays" name="pays" required>
<option value="france">France</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label>Avez-vous un lapin?</label>
<input type="radio" id="oui" name="hasRabbit" value="oui" required>
<label for="oui">Oui</label>
<input type="radio" id="non" name="hasRabbit" value="non" required>
<label for="non">Non</label>
</div>
<button type="submit">Submit</button>
</form>
</section>
<script src="app.js"></script>
</body>
</html>
136 changes: 136 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,139 @@ body {
h1 {
color: #333;
}
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}

header {
background-color: #ffcc00;
padding: 1em;
text-align: center;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin: 0 10px;
}

nav ul li a {
text-decoration: none;
color: #000;
}

nav select {
margin-left: 20px;
}

.section-title {
margin-bottom: 0;
}

.a-propos {
color: #FFD700; /* Gold */
}

.voyages {
color: #1E90FF; /* Dodger Blue */
}

.reseaux {
color: #32CD32; /* Lime Green */
}

.contact {
color: #FF69B4; /* Hot Pink */
}

section {
padding: 2em;
}

.profile {
display: flex;
align-items: center;
}

.profile-pic {
width: 150px;
height: auto;
border-radius: 50%;
margin-right: 20px;
}

.carousel {
display: flex;
overflow-x: auto;
gap: 20px;
}

.card {
flex: 0 0 auto;
width: 200px;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.card img {
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
}

.form-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}

form label {
margin-right: 10px;
}

form input, form select {
padding: 5px;
margin: 5px 0;
}

form button {
padding: 10px;
background-color: #ffcc00;
border: none;
cursor: pointer;
margin-top: 10px;
}

form button:hover {
background-color: #ffaa00;
}

/* Pink underline focus indicator */
a:focus, input:focus, select:focus, button:focus {
outline: none;
border-bottom: 2px solid #FF69B4;
}

/* Screen reader only text */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}

0 comments on commit 1f87b8f

Please sign in to comment.