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

cake responsive project #82

Closed
Adepeju18 wants to merge 2 commits into from
Closed

cake responsive project #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd06ae0
cake responsive project
Adepeju18 Nov 28, 2020
344b473
Create s.css
Adepeju18 Dec 5, 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
82 changes: 82 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,92 @@
<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>
<img src="https://puttingtheiindesign.files.wordpress.com/2011/08/cake-logo-rgb.jpg"width="300"height="400">
<p>
We Specialize in Custom Cakes </br>
For All Occasions</br>
Wedding Cakes,Birthday Cakes and More.
</p>
</header>
<section>

<nav>
<a class="active" href="#home">Home</a>
<a href="#cakes">Cakes</a>
<a href="ordering">Ordering</a>
<a href="lessons">Lessons</a>
<a href="about">About</a>
</nav>
</section>
<section>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/4</div>
<img src="http://www.oldmusicproject.com/images/CAKES/birthday-cake-popcorn.jpg"style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlide fade">
<div class="numbertext">2/4</div>
<img src="http://www.oldmusicproject.com/images/CAKES/2-Awesome-Birthday-Cake-Ideas-1.jpg"style="width:70%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/4</div>
<img src="http://www.oldmusicproject.com/images/CAKES/m_Matcha_Sakura_Cake_grande.jpg">
<div class="text">Caption Three</div>

</div>
<div class="mySlides fade">
<div class="numbertext">4/4</div>
<img src="http://www.oldmusicproject.com/images/CAKES/old-friend-birthday-cake-763.jpg">
<div class="text">Caption Four</div>
</div>
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next"
onclick="plusSlides(1)">&#10095;</a>
</div>
<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>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<aside>
<h1>
We make you <strong>unique</strong>
Cakes

</h1>
<ul>
<li>Cheesecakes</li>
<li>Pies</li>
<li>Slices</li>
</ul>
<p>Visit us and try our delicious cakes</p>


</aside>
<footer>
<div class="flex-container">
<a href="#">SITEMAP</a>
<a href="#">CONTACT</a>
<a href="#">DELIVERY</a>

</div>
</footer>


</div>
</section>



</body>

</html>
5 changes: 5 additions & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
Create a responsive webpage showcasing your cake business






## Set up
1) Fork this repository (so you have a copy of it in your own Github account)
2) Clone the repository to your computer (so you can access it locally and can add code to it!)
Expand Down
67 changes: 67 additions & 0 deletions s.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
//background(89, 216, 255);
var drawFish = function(centerX,centerY){
var bodyLength = 118;
var bodyHeight = 74;
var bodyColor = color(162, 0, 255);
noStroke();
fill(bodyColor);
// Fish body
ellipse(centerX, centerY, bodyLength, bodyHeight);
// Fish tail
var tailWidth = bodyLength/4;
var tailHeight = bodyHeight/2;
triangle(centerX-bodyLength/2, centerY,
centerX-bodyLength/2-tailWidth, centerY-tailHeight,
centerX-bodyLength/2-tailWidth, centerY+tailHeight);
// Fish eye
fill(33, 33, 33);
ellipse(centerX+bodyLength/4, centerY, bodyHeight/5, bodyHeight/5);
};

// Bubble
var drawBubble = function (bubbleX,bubbleY,bubbleSize){
fill(240, 228, 240);
ellipse(bubbleX, bubbleY, bubbleSize, bubbleSize);
};

var drawManyFish=function(){

drawFish(150,30);
drawFish(172,100);
drawFish(240,240);
drawFish(300,120);
drawFish(110,300);
};

var bubbleArray =[];
var drawBubbles = function() {
s
var bubbleX = random(100,250);

var bubbleY = random(30,450);
var bubbleSize = random(25,50);
for (var i=1; i<11; i++){
var bubble= {X:bubbleX,Y:bubbleY,Size:bubbleSize};
bubbleArray.push(bubble);
drawBubble (bubble.X, bubble.Y ,bubble.Size);

}
text(bubbleArray.length,200,200);
};
drawBubbles();
//drawBubble(100,300,25);
//drawBubble(127,318,30);
//drawBubble(130,350,35);
//drawBubble(150,370,40);
//drawBubble(170,400,45);

var y=400;
draw= function() {
background(89, 216, 255);
drawManyFish();
for (var i=0;i<bubbleArray.length; i++) {
var b =bubbleArray[i];
b.Y-=0.2;
}

};
158 changes: 158 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,159 @@
/* Add your styling here */

*{
box-sizing: border-box;
}
header {
background-color: teal;
padding: 30px;
text-align: right;
color: thistle;
width: 99%;
}
p {
float: left;
color: #000;
font-family:cursive;
font-size: 300%;

}



nav {

width: 100%;
height: 50px;
background: crimson;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 17px;
word-spacing: 30px;
}
.top-navigation a:hover {
background-color: rgb(0, 18, 100);
color: black;
}
.top-navigation a.active {
background-color: blueviolet;
color: burlywood;
}
.mySlides {
display: none;
}
/*img{vertical-align: middle;}*/
.slideshow-container{
max-width: 1000px;
position: relative;
margin: auto;


}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.5s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: lawngreen;
font-size: 50px;

}
.text {
color: rgb(33, 16, 187);
font-size: 15px;
padding: 8px,12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.numbertext {
color: rgb(37, 4, 4);
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 12px;
width: 12px;
margin: 0 2px;
background-color: magenta;
border-radius: 50%;
display: inline-block;
transition: background-color 0.5s ease;
}
.active, .dot:hover {
background-color: mediumaquamarine;

}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.0s;
animation-name: fade;
animation-duration: 1.0s;
}
@-webkit-keyframes fade {
from{opacity: .4}
to{opacity: 1}
}
@keyframes fade {
from{opacity: .4}
to {opacity: 1}
}
aside {
width: 30%;

padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: chartreuse;

}
strong {
font-size: bold;
}
footer {
text-align: center;

background-color: darkgray;
color:black;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
.flex-container > a {
width: 100px;
margin: 100px;
padding: 30px;
line-height: 50px;
font-size: 30px;
background-color: plum;



}
@media only screen and (max-width:620px) {
.prev, .next, .text {
font-size: 10px;
}
}