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

Html css week3 jacques #84

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

Html css week3 jacques #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3b2cad
First commit
Jamesdiop Jun 9, 2020
eb97cad
add some colors
Jamesdiop Jun 9, 2020
d1291e8
Add google font
Jamesdiop 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
Binary file added week3/2-website/images/Cakes/logo-cupacake1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
189 changes: 187 additions & 2 deletions week3/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,196 @@
<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 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>

<body>
<!-- Add your markup here -->
<div class="container">

<!-------------------- First Nav ------------------->
<div class="row">
<div class="col-12 ">
<nav class="navbar navbar-expand-md nav-1 ">
<a class="navbar-brand" href="index.html"><img width="100px" src="images/Cakes/logo-cupacake1.png" alt=""></a>

</nav>

</div>

</div>

<!-------------------- Second Nav ------------------->
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-md navbar-dark back-color-nav ">

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">cakes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ordering</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">lessons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">about</a>
</li>
</ul>
</div>
</nav>
</div>
</div>

</div>

<div class="container">
<!-------------------- Jumbotron information ------------------->
<div class="row">
<div class="col-12 col-md-4">
<div class="jumbotron">
<h1 class="justify-txt">Cupcakes</h1>
<p class="justify-txt">We carefully bake in small batches by hand each day using the finest ingredients sourced from local,
sustainable, and whenever possible, organic producers. We are proud to offer cupcakes and cakes that
are freshly baked within hours, if not minutes, for your enjoyment.
</p>
</div>
</div>

<!-------------------- Carousel ------------------->
<div class="col-12 col-md-8">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>

</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/Cakes/cake-with-blackberries.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Cakes/cake-with-macarons.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Cakes/cupcakes.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Cakes/not-technically-a-cake.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/Cakes/wedding-cake.jpg" alt="Fifth slide">
</div>

<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

</div>

<div class="container">


<div class="row ">
<div class="col-12 col-md-6 col-lg-3">
<div class="card text-white back-color-nav">
<img src="images/Cakes/cake-with-blackberries.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Hafsa Cake</h5>
<p class="card-text">KARA’S CHOICE | £4.5 (REG) £3 (MINI) Available in regular or mini cupcakes.</p>
<a href="#" class="btn btn-primary">Gluten free</a>
</div>
</div>
</div>

<div class="col-12 col-md-6 col-lg-3">
<div class="card text-white back-color-nav">
<img src="images/Cakes/cake-with-macarons.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Nabou Cake</h5>
<p class="card-text">HAPPY BDAY DOZEN | £5 (REG) £4 (MINI) 3 sweet vanilla, 3 sweet chocolate.</p>
<a href="#" class="btn btn-primary">Eggs free</a>
</div>
</div>
</div>

<div class="col-12 col-md-6 col-lg-3">
<div class="card text-white back-color-nav">
<img src="images/Cakes/cupcakes.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Sumaya Cupcake</h5>
<p class="card-text">WELCOME BABY DOZEN | £5.7 (REG) £4.2 (MINI)– 3 sweet chocolate.</p>
<a href="#" class="btn btn-primary">Hallal</a>
</div>
</div>
</div>

<div class="col-12 col-md-6 col-lg-3">
<div class="card text-white back-color-nav">
<img src="images/Cakes/wedding-cake.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Malika Cake</h5>
<p class="card-text">THANK YOU DOZEN | £5 (REG) £4 (MINI) 3 sweet vanilla, 3 sweet chocolate.</p>
<a href="#" class="btn btn-primary">Kacher</a>
</div>
</div>
</div>
</div>

</div>


<!--------------- Footer ----------------->
<div class="cointainer">
<div class="row">
<div class="col">
<footer>
<nav class="navbar navbar-expand-md navbar-dark back-color-nav">
<a class="nav-link" href="#">site map</a>
<a class="nav-link" href="#">contact</a>
<a class="nav-link" href="#">delivery</a>
</nav>
</footer>
</div>
</div>
</div>




<!-- Bootstrap Javascript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>

</html>
95 changes: 94 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,94 @@
/* Add your styling here */
h1, h2, h3 {
font-family: 'Roboto', sans-serif;
}

.d-block, .jumbotron {
height: 400px;
}
.jumbotron {
font-family: 'Open Sans', sans-serif;
background-color: #4cd3c2;
color: white;
}
/* Change the size of the Navbar and nav-brand */
.navbar {
min-height: 50px;
margin-bottom: 20px;
font-family: 'Roboto', sans-serif;
}

.navbar-brand {

padding: 0 10px;
height: 120px;
line-height: 120px;
}
.nav-link {
font-family: 'Roboto', sans-serif;
margin: 0 70px;
padding: 5px 10px;
border: 1px solid white;
border-radius: 10px;
text-transform: uppercase;
color: white;
}
.nav-1 {
background-color: #faeee7;
}
.justify-txt {
text-align: center;
}
.carousel {
width:auto; /* Or try to use important */
margin-bottom: 20px;
}
.card {
font-family: 'Open Sans', sans-serif;
height: 24rem;
margin-bottom: 20px;
border-color: #4cd3c2;
}

.card > img {
width: 100%;
height: 50%;
}

.back-color-nav {
background-color: #f54291;
}
.col {
overflow-wrap: break-word;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active {
color: lightYellow ;
background-color: #0a97b0;
margin: 0 auto;
border-color: white;
font-family: 'Open Sans', sans-serif;
}

a:hover,
a:visited {
font-weight: bold;
color: white;
font-family: 'Open Sans', sans-serif;
}
footer .nav-link {
text-align: center;
font-family: 'Open Sans', sans-serif;
}


/* MEDIA QUERY */
@media only screen and (max-width: 767px) {
.nav-link {
border: none;
}
.jumbotron {
height: 250px;
}
}