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;
}
*/
@stephengfriend
Copy link

stephengfriend commented Jul 20, 2020

Screen Shot 2020-07-20 at 12 50 38 PM

<html lang="en">
	<head>
		<style type="text/css">
			* {
				box-sizing: border-box;
			}
			body,
			h1,
			h2,
			h4,
			p,
			ul,
			li {
				margin: 0;
				padding: 0;
			}

			.container {
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				width: 80%;
				padding: 10px 10px;
			}

			.branding > div {
				display: inline;
			}

			nav {
				margin: 5px;
			}

			nav 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: 12px;
			}
			nav ul a {
				text-decoration: none;
			}
		</style>
	</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>
	</body>
</html>

@Cool-sami12
Copy link
Author

Cool-sami12 commented Jul 21, 2020

please how do i achieve this https://www.w3schools.com/howto/howto_css_image_transparent.asp in this section ` all the 3 div should be on the same row

Notebook> <div class=

Events Management

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

Notebook

Cake Varieties

We bake cake for various occasion namely: wedding, anniversary, graduation and many numerous occassion, to meet your needs. we bake to your taste

Notebook

Training

We have skilled personnel who organised and trained individuals willingly to know more about event management and Baking

// css so far

.services>.container{
padding: 50px;
}
.services>.container div{
position:relative;
width: 300px;
height: 300px;
border: 2px solid black;
}
.services>.container img {vertical-align: middle;}
.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;
}
*/
its look messing in my page

@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