Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

West Midlands class 2 - Cecilia Baggini - HTML/CSS - week 3 #61

Closed
cbaggini wants to merge 5 commits into from
Closed

West Midlands class 2 - Cecilia Baggini - HTML/CSS - week 3 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9117c51
Created html skeleton
cbaggini Nov 21, 2020
8c16a44
Added media queries and general responsive features
cbaggini Nov 23, 2020
85e31b3
added carousel
cbaggini Nov 23, 2020
445b475
Finished carousel, added colours
cbaggini Nov 23, 2020
8df5212
added hover effects
cbaggini Nov 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
28 changes: 28 additions & 0 deletions carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "flex";
dots[slideIndex-1].className += " active";
}
99 changes: 97 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,105 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Add your markup here -->
<header class="header">
<div class="logo-div">
<img class="logo" src="http://www.logocontest.net/48hourslogo_data/2016/11/08/55577_1478543880.jpg"
alt="Logo Image">
</div>
<div class="contact">
<h3>Contact us!</h3>
<p>xx Road Name </p>
<p>City</p>
<p>Country</p>
<p>Phone number</p>
</div>
</header>
<nav class="navigation">
<ul class="links">
<li>Home</li>
<li>Cakes</li>
<li>Ordering</li>
<li>Lessons</li>
<li>About</li>
</ul>
</nav>
<section class="introduction">
<aside>
<h1>Welcome to our website!</h1>
<p>We bake amazing cakes on order and deliver them to your home.</p>
<p>Look at some of our specialties below!</p>
</aside>
<div class="carousel">
<div class="slideshow-container" aria-label="Gallery">
<div class="mySlides fade">
<img class="carousel-img" src="https://www.seriouseats.com/images/2017/04/20170412-vanilla-layer-cake-vicky-wasik-1.jpg">
</div>

<div class="mySlides fade">
<img class="carousel-img" src="https://cdn.vox-cdn.com/thumbor/d51Nn70kszKfahR9x2oVnqzCv74=/0x0:6000x4145/920x613/filters:focal(2520x1593:3480x2553):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/66499915/shutterstock_1192482610.0.jpg">
</div>

<div class="mySlides fade">
<img class="carousel-img" src="https://www.dvo.com/newsletter/weekly/2016/11-11-282/images/cooknart71.jpg">
</div>

<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
</section>
<section class="cakes">
<figure class="cake">
<img class="cake-img" alt="millefoglie" src="https://www.tavolartegusto.it/wp/wp-content/uploads/2018/06/Millefoglie-Ricetta-Millefoglie-alla-crema-1-1.jpg">
<figcaption>Millefoglie cake</figcaption>
</figure>
<figure class="cake">
<img class="cake-img" alt="profiteroles" src="https://images.immediate.co.uk/production/volatile/sites/2/2017/12/xmas-Cover-17-V1-WHITE-90341eb.jpg?webp=true&quality=90&crop=3566px%2C3349px%2C4663px%2C3106px&resize=620%2C413">
<figcaption>Profiteroles</figcaption>
</figure>
<figure class="cake">
<img class="cake-img" alt="fruit tart" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/delish-200612-fruit-tart-0001-landscape-ag-1592424815.jpg?crop=1.00xw:1.00xh;0,0&resize=980:*">
<figcaption>Fresh fruit tart</figcaption>
</figure>
<figure class="cake">
<img class="cake-img" alt="sacher torte" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/SacherTorta-Ribizli.jpg/1280px-SacherTorta-Ribizli.jpg">
<figcaption>Sacher torte</figcaption>
</figure>
</section>
<footer class="footer">
<div class="footer-item">
<h3>Site map</h3>
<p>Home</p>
<p>Cakes</p>
<p>Ordering</p>
<p>Lessons</p>
<p>About</p>
</div>
<div class="footer-item">
<h3>Contact</h3>
<p>xx Road Name </p>
<p>City</p>
<p>Country</p>
<p>Phone number</p>
</div>
<div class="footer-item">
<h3>Delivery</h3>
<p>We offer FREE delivery on orders above £50!</p>
</div>
</footer>
</body>

<script type="text/javascript" src="carousel.js"></script>
</html>
Loading