Skip to content

Instantly share code, notes, and snippets.

@Cool-sami12

Cool-sami12/index.html

Last active July 21, 2020 16:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Cool-sami12/8aec69961f15dc33c033f8ac2702e10c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Cool-sami12/8aec69961f15dc33c033f8ac2702e10c to your computer and use it in GitHub Desktop.
Download ZIP
Header issue
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JEROME CITY CAKE </title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&family=Roboto:wght@100;400;700&display=swap"
rel="stylesheet">
</head>
<body>
<header class="container">
<div class="branding">
<img src="./images/jlogo.png" alt="logo ">
<div>Jerome<span>city cake</span></div>
</div>
<nav>
<ul>
<li>About</li>
<li>Services</li>
<li>portfolio</li>
<li>Contact</li>
<li><button>Order Now</button></li>
</ul>
</nav>
</header>
<section>
<div class="container">
<div class="first">
<h1>We Build<br> Awesome Cake<br> for You</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi distinctio quae eos quas consequatur facilis!
Consectetur, quisquam aliquid nostrum cupiditate, eligendi minus doloribus ullam deserunt pariatur, mollitia
atque repudiandae architecto.</p>
<button>View our work</button>
<button>Order now </button>
</div>
<div>
<img src="./images/headerimg.png" alt="header image">
</div>
</div>
</section>
<section>
<div class="container">
<div id="founder">
</div>
<div id="about">
<p>Jerome City Cakes has been making great bakery products for over 5 years. We make tasty cakes, mouth watering pastries
and a variety of bread. Our products are made fresh daily, crafted by hand and made with love. Exceptional customer
service is at the heart of what we do.</p>
<p>Our growth is attributed to the hard work and dedication of each member of the Jerome City Cakes family.</p>
<p>Our Vision: To be the first choice of consumers in Africa and create a benchmark in quality standards in the bakery
industry.</p>
<p>Our Mission: We create tastes that make memorable moments and experiences.</p>
<p>Positioning Statement: For quality conscious individuals who need dependable service and bakery products.Jerome CIty
Cakes is a one-stop shop that provides a variety of premium products that create memorable moments and experiences.
Unlike other bakeries, we offer quality products and excellent customer services at affordable prices.</p>
</div>
</div>
</section>
<section class="services">
<div class="container">
<div>
<img src="./images/j1.jpg" alt="Notebook>
<div class="content">
<h4>Events Management</h4>
<p>we plan, design, create and make your event a memorable one,we developed plans for small and/or large-scale personal
or corporate events such as festivals,conferences, ceremonies, weddings, formal parties, concerts, or conventions
</p>
</div>
<div>
<img src="./images/j2.jpg" alt="Notebook">
<div class="content">
<h4>Cake Varieties</h4>
<p>We bake cake for various occasion namely: wedding, anniversary, graduation and many numerous occassion, to meet your
needs. we bake to your taste</p>
</div>
<div>
<img src="./images/j3.jpg" alt="Notebook">
<div class="content">
<h4>Training</h4>
<p>We have skilled personnel who organised and trained individuals willingly to know more about event management and
Baking </p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div>
<img src="./images/001.jpg">
<img src="./images/002.jpg">
<img src="./images/003.jpg">
<img src="./images/004.jpg">
<img src="./images/005.jpg">
<img src="./images/006.jpg">
</div>
</div>
</section>
<section>
<div class="container">
<div>
<form>
<input type="text" name="" placeholder="Name ">
<input type="email" name="" placeholder="Email ">
<input type="number" name="" placeholder="Phonenumber">
<textarea placeholder=" PLACE YOUR ORDER"></textarea>
<button class="button">SUBMIT ORDER</button>
</form>
</div>
<div>
</div>
</div>
</section>
<footer>
<div class="container">
<nav>
<img src="./images/jlogo.png" alt="logo ">
<h2>Jerome city cake</h2>
<ul>
<li>About</li>
<li>Services</li>
<li>portfolio</li>
<li>Contact</li>
<button>Order Now</button>
</ul>
<hr>
</nav>
<div>
<p class="copyright"> Copyright 2020,Coded by <a href="#"></a>cool-sami</p>
<a><img src="./images/icon-facebook.svg"></a>
<a><img src="./images/icon-twitter.svg"></a>
<a><img src="./images/icon-pinterest.svg"></a>
<a><img src="./images/icon-instagram.svg"></a>
</div>
</div>
</footer>
</body>
</html>
Raw
style.css
/*font-family: 'Karla', sans-serif;
font-family: 'Roboto', sans-serif;
*/
*{
box-sizing: border-box;
}
body,h1,h2,h4,p,ul,span,li{
margin: 0;
padding: 0;
font-family: 'Karla' sans-serif;
}
header{
background: linear-gradient(-45deg, rgb(153, 79, 0), rgb(255, 163, 26), rgb(255, 128, 0), rgb(255, 230, 204));
background-size: 400% 400%;
-webkit-animation: Gradient 20s ease infinite;
-moz-animation: Gradient 20s ease infinite;
animation: Gradient 20s ease infinite;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.container{
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 80%;
padding: 10px 10px;
}
.branding > div{
display:inline;
font-size:1.8em;
font-weight: 700;
color: white;
}
.branding >div span {
font-size:0.5em;
font-weight: 400;
padding: 0px 5px;
}
nav{
margin: 10px;
color: white;
}
.branding img{
margin:0;
padding:0;
}
nav ul {
display:flex;
padding:0;
list-style-type: none;
}
nav ul li{
margin-left: 30px;
text-transform: uppercase;
font-size: 1.2em;
}
nav ul a{
text-decoration: none;
}
nav ul button{
width:140px;
border: 1px solid rgb(255, 128, 0);
border-radius: 10px;
height:40px;
padding: 5px;
text-transform: uppercase;
color:rgb(255, 128, 0);
background-color: white;
font-size: 0.7em;
font-weight:bold;
}
section >.container{
display: flex;
flex-direction: row;
}
.first{
padding:80px 50px;
}
.first h1{
padding:20px 0px;
font-size: 3em;
font-weight:700;
color:rgb(255, 128, 0);
}
.first p{
padding:20px 0px;
font-size: 1em;
font-weight:400;
color:rgb(255, 163, 26);
}
.first button{
width:140px;
border: 1px solid rgb(255, 128, 0);
border-radius: 10px;
height:40px;
padding: 5px;
text-transform: uppercase;
color:white;
background-color: rgb(255, 128, 0);
font-size: 0.7em;
font-weight:bold;
margin-left:20px;
}
#founder{
width: 90%;
height: 300px;
border-radius: 200px;
margin:20px 90px;
padding:80px 50px;
background-image: url("./images/jerome.jpg");
background-repeat: no-repeat;
background-position: cover;
}
#about{
padding:30px;
}
#about p{
padding:5px 0px;
font-size: 1em;
font-weight:400;
color:rgb(255, 163, 26);
}
.services>.container{
padding: 50px;
display:flex;
justify-content: space-between;
}
.services>.container div{
position:relative;
width: 300px;
height: 300px;
border: 2px solid black;
}
.services>.container div .content{
position: absolute;
bottom: 0;
background: rgb(255, 163, 26);
background: rgba(255, 163, 26, 0.5);
color: white;
width:10%;
padding: 20px;
}
*/
@Cool-sami12
Copy link
Author

Cool-sami12 commented Jul 21, 2020

issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment