Skip to content
This repository was 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

Changes from 1 commit
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
Prev Previous commit
Next Next commit
webpage color change 
i was able to sort out how to use my own choice of color in boostrap web design
  • Loading branch information
@Ade0211
Ade0211 committed Jun 6, 2020
commit 8b8a646922d8ac7f6773bf0f51676d8bd3d38269
79 changes: 31 additions & 48 deletions week3/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,46 +9,39 @@
<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 class=" jumbotron jumbotron-fluid bg-secondary">
<div class="container-fluid p-3 my-3 bg-dark ">
<body style="background-color: sandybrown;" class=" jumbotron 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 class="btn float-right btn-light btn-sm my-2 my-sm-0" type="submit">Contact</button>
<button style="background-color: slateblue;" class="btn float-right btn-light btn-sm my-2 my-sm-0 text-uppercase " type="submit">Contact</button>
</span>

</a>

</div>

<!-- </nav> -->
<nav class="col container-fluid p-0">
<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 active bg-dark" href="#">Home</a>
<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 active bg-dark" href="#">Cakes</a>
<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 active bg-dark" href="#">Ordering</a>
<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 active bg-dark" href="#">Lessons</a>
<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 active bg-dark" href="#">About</a>
<a class="flex-sm-fill text-sm-center nav-link text-white " href="#">About</a>
</li>
</ul>
</nav>

<div class="card-group">
<div class="card bg-secondary border-dark">

<div class="card-body text-white">
<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
Expand All @@ -75,11 +68,10 @@ <h5 class="card-title">Cake World</h5>
</P>
</div>
</div>
<div class="card bg-secondary border-dark">
<div style="background-color:salmon;" class="card border-dark">
<img class="card-img-top" src="https://images.pexels.com/photos/236804/pexels-photo-236804.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=100&w=100" alt="responsive">
<div class="card-body">

<ul class="nav col-md-10 justify-content-center ">
<ul class="nav col-md-10 justify-content-center">
<li class="nav-item">
<img class=" img-fluid rounded border border-primary ml-2 mr-2 wd-60% " src="https://images.pexels.com/photos/433527/pexels-photo-433527.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=100" alt="Responsive image">
</li>
Expand All @@ -92,71 +84,62 @@ <h5 class="card-title">Cake World</h5>
<li class="nav-item">
<img class=" img-fluid rounded border border-primary ml-2 mr-2" src="https://images.pexels.com/photos/306070/pexels-photo-306070.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=100" alt="Responsive image">
</li>

</ul>
</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="col--xs-8 sm-8 m-4 lg-4">
<div class="demo-content">
<img class=" img-fluid rounded 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="Responsive image">
<h3 class="text-dark">Blackberry Cake</h3>
<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="Responsive 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 border border-secondary" src="https://images.pexels.com/photos/264985/pexels-photo-264985.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" class="pull-right" alt="Responsive image">
<h3 class="text-dark">Wedding Cake</h3>
<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="Responsive 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 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="Responsive image">
<h3 class="text-dark">Macron Cake</h3>
<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="Responsive 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 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="Responsive image">
<h3 class="text-dark"> Special cake</h3>
<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="Responsive 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 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="Responsive image">
<h3 class="text-dark"> Special cake</h3>
<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="Responsive image">
<h3 class="text-dark">Renaissance</h3>
</div>
<!-- <div class="col-xs-8 sm-8 m-4 lg-4">
<div class="demo-content">
<img class="img-fluid rounded border border-info" src="https://images.pexels.com/photos/2773607/pexels-photo-2773607.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=150" class="pull-left" alt="Responsive image">
<h3 class="text-dark">Macron Cake</h3>
</div>
</div> -->
</div>
</div>
</section>
<hr class="bg-dark">
<footer class="page-footer font-small blue">
<footer style="background-color: rgb(167, 30, 15)" class="font-small blue">


<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active font-weight-bold text-dark ml-2 mr-2" href="#">SITEMAP</a>
<a class="nav-link active font-weight-bold ml-2 mr-2" href="#">SITEMAP</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-weight-bold ml-2 mr-2" href="#">CONTACT</a>
<a class="nav-link font-weight-bold ml-2 mr-2" href="#">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-weight-bold ml-2 mr-2" href="#">DELIVERY</a>
<a class="nav-link font-weight-bold ml-2 mr-2" href="#">DELIVERY</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-weight-bold ml-2 mr-2" href="#">@Copyright 2020</a>
<a class="nav-link font-weight-bold ml-2 mr-2" href="#">@Copyright 2020</a>
</li>
</ul>
</footer>

</body>
</html>