Skip to content
This repository has been archived by the owner on Oct 26, 2020. It is now read-only.

Html css/week3/adebola #79

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Html css/week3/adebola #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
582c9a3
The webpage created
Ade0211 Jun 3, 2020
1241234
Webpage adjusted
Ade0211 Jun 3, 2020
8b8a646
webpage color change
Ade0211 Jun 6, 2020
227243f
button color change
Ade0211 Jun 6, 2020
ee5d9b5
Alt Added
Ade0211 Jun 6, 2020
020893c
Merge branch 'master' into html-css/week3/Adebola
Ade0211 Jun 6, 2020
9ada85b
Indentation
Ade0211 Jun 6, 2020
094e9dc
Merge branch 'html-css/week3/Adebola' of https://github.com/Ade0211/H…
Ade0211 Jun 6, 2020
2755553
Body and footer
Ade0211 Jun 9, 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
187 changes: 176 additions & 11 deletions week3/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,181 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<!-- Add a link to your css file here -->
<title>My Cake</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body style="background-color: saddlebrown;" class="jumbotron-fluid">
<div class="container-fluid w-100 p-3 my-3 bg-dark ">
<img
class="img-fluid header-image rounded-circle"
src="https://images.pexels.com/photos/227432/pexels-photo-227432.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=80"
alt="Responsive image"
/>
<span>
<button style="background-color:rgb(167, 30, 15);" class="btn float-right btn-light btn-sm my-2 my-sm-0 text-uppercase " type="submit">Contact</button>
</span>
</div>
<nav style="background-color: rgb(167, 30, 15);" class="col container-fluid p-0">
<ul class="nav nav-pills flex-column flex-sm-row nav-justified">
<li class="nav-item">
<a class="flex-sm-fill text-sm-center nav-link text-white" href="#">Home</a>
</li>
<li class="nav-item">
<a class="flex-sm-fill text-sm-center nav-link text-white " href="#">Cakes</a>
</li>
<li class="nav-item">
<a class="flex-sm-fill text-sm-center nav-link text-white " href="#">Ordering</a>
</li>
<li class="nav-item">
<a class="flex-sm-fill text-sm-center nav-link text-white " href="#">Lessons</a>
</li>
<li class="nav-item">
<a class="flex-sm-fill text-sm-center nav-link text-white " href="#">About</a>
</li>
</ul>
</nav>
<div class="card-group">
<div style="background-color: salmon;" class="card border-dark">
<div class="card-body text-white">
<h5 class="card-title">Cake World</h5>
<p class="card-text "><P>
Order cake for dessert
Or to celebrate a birthday
An accomplishment
Or anniversary
No one bats an eye
But order cake for breakfast?
Might just incite a riot
<br>
There is a time and place for cake
Society has deemed it so
We are not the rulers of our own lives
(Though we could be)
Instead our culture dictates
The rules of life
Steak for breakfast or for dinner
But not lunch
Bread goes with every meal
Eggs and bacon are for the morning
But at night is a nice treat - on occasion
Beer after five
But it’s five o’clock somewhere
</P>
<div>
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/863006/pexels-photo-863006.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=200" alt="P-cake" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/934728/pexels-photo-934728.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" alt="icing-cake" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/3992396/pexels-photo-3992396.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" alt="brown-cake" style="width:100%">
</div>
</div>
</div>
</div>
</div>
<div style="background-color:salmon;" class="card border-dark">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.pexels.com/photos/433527/pexels-photo-433527.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block w-100" alt="sub-column-image">
<div class="carousel-caption d-none d-md-block">
<h5>Pinky</h5>
<p>Share the experience of your pinky with your loved ones.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/140831/pexels-photo-140831.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block w-100" alt="sub-column-image">
<div class="carousel-caption d-none d-md-block">
<h5>Berry Blast</h5>
<p>A little touch of berry is all you need.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/3383129/pexels-photo-3383129.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="d-block w-100" alt="sub-column-image">
<div class="carousel-caption d-none d-md-block">
<h5>My cup cake</h5>
<p>A cup of cake that makes the difference.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-body">
<p class="card-text font-weight-bold font-italic">Giving Clients a good experience. The very essence of esoteric taste that connects ovation with splendour...</p>
</div>
</div>
</div>
</div>
<section>
<div class="container container-fluid justify-content-end">
<div class="row">
<div class="col--xs-8 sm-8 m-4 lg-4">
<div class="demo-content">
<img class=" img-fluid rounded-pill border border-primary" src="https://images.pexels.com/photos/3923555/pexels-photo-3923555.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150"class="pull-right" alt="Section-image">
<h3 class="text-dark">Chocolate</h3>
</div>
</div>
<div class="col-xs-8 sm-8 m-4 lg-4">
<div class="demo-content bg-alt">
<img class="img-fluid rounded-pill border border-secondary" src="https://images.pexels.com/photos/2531546/pexels-photo-2531546.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" class="pull-right" alt="Section-image">
<h3 class="text-dark">Baby Shower</h3>
</div>
</div>
<div class="col-xs-8 sm-8 m-4 lg-4">
<div class="demo-content">
<img class="img-fluid rounded-pill border border-info" src="https://images.pexels.com/photos/410398/pexels-photo-410398.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" class="pull-right" alt="Section-image">
<h3 class="text-dark">D-Cocktail</h3>
</div>
</div>
<div class="col-xs-8 sm-8 m-4 lg-4">
<div class="demo-content">
<img class=" img-fluid rounded-pill border border-warning" src="https://images.pexels.com/photos/1038711/pexels-photo-1038711.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" class="pull-right" alt="Section-image">
<h3 class="text-dark">I-Compromise</h3>
</div>
</div>
<div class="col-xs-8 sm-8 m-4 lg-4">
<div class="demo-content">
<img class=" img-fluid rounded-pill border border-success" src="https://images.pexels.com/photos/3012214/pexels-photo-3012214.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" class="pull-right" alt="Section-image">
<h3 class="text-dark">Renaissance</h3>
</div>
</div>
</section>

<body>
<!-- Add your markup here -->
<!-- Footer -->
<footer class="container-fluid page-footer font-small mdb-color darken-3 pt-4">
<div class="container-fluid">
<div class="row d-flex justify-content-center">
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/XAGdt6xJkhg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="container-fluid footer-copyright text-center p-0">© 2020 Copyright:
<a class="footer-text ml-2 mr-5 text-white" href="#">Services</a>
<a class="footer-text text-white" href="#">Delivery</a>
</div>
</footer>
</body>

</html>
</html>
23 changes: 22 additions & 1 deletion week3/2-website/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,22 @@
/* Add your styling here */
.column:hover, .demo-content:hover {
transform: scale(1.1);
transition: ease 1s;

}

.column {
float: left;
width: 33.33%;
padding: 5px;
}

.row::after {
content: "";
clear: both;
display: table;
}
.footer-copyright{
background-color: rgb(167, 30, 15);
}