Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

candy webpage project using bootstrap #114

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+182 −0
Open

candy webpage project using bootstrap #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
48 changes: 48 additions & 0 deletions projects/Candy webpage using bootstrap/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
body{
background:#f5d9d5;
font-family:"Nunito", sans-serif;
}
.cls h2{
color:#EA1C2C;
font-weight: 100;
font-size: 2.6rem;

}
.cls p{
color:azure;
font-weight: 200;
font-size: 1.2rem;
line-height: 2;
}
#mainnav .navbar-brand{
color:#EA1C2C;
font-size: 1.6rem;

}
p{
font-weight: 900;
}

#mainnav .nav-link{
font-weight: 350;
color:white;
}
#mainnav .nav-link:hover{
color:#EA1C2C;
}
#mainnav{
font-size: 1.4rem;
font-weight: 120;
}
.scrolled{
background: rgb(222,192,222);
transition: background 750ms;
}

#headinggroup span{
color:#EA1C2C;
}
#headinggroup h1{
font-weight: 100;
font-size: 4rem;
}
134 changes: 134 additions & 0 deletions projects/Candy webpage using bootstrap/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="app.css">
</head>
<body>
<navbar id="mainnav" class="navbar navbar-dark navbar-expand-md py-0 fixed-top"> <!--py-0 padding-top=0;padding-bottom=0-->
<a href="" class="navbar-brand">CANDY</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggler navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navLinks" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-link">HOME</li>
</ul>
<ul class="navbar-nav">
<li class="nav-link">ABOUT</li>
</ul>
<ul class="navbar-nav">
<li class="nav-link">TICKETS</li>
</ul>
</div>
</navbar>

<section class="container-fluid px-0"> <!--px= padding-right=0;padding-left=0-->
<div class="row align-items-center">
<div class="col-lg-6 ">
<div id="headinggroup" class="text-white text-center d-none d-lg-block">
<h2>Museum<span>/</span> Of<span>/</span> Candy</h2>
<h2>Museum<span>/</span> Of<span>/</span> Candy</h2>
<h2>Museum<span>/</span> Of<span>/</span> Candy</h2>
<h2>Museum<span>/</span> Of<span>/</span> Candy</h2>
<h2>Museum<span>/</span> Of<span>/</span> Candy</h2>
<h2>Museum<span>/</span> Of<span>/</span> Candy</h2>

</div>
</div>
<div class="col-lg-6">
<img class="img-fluid" src="media/hand2.png" alt=""> <!--img fluid= width=100%; height=auto;-->
</div>

</div>
</section>

<section class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img src="media/milk.png" class="img-fluid">

</div>
<div class="col-md-6 text-center order-1 order-md-2 cls">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 mb-5 mb-md-0">
<h2>Museum of candy</h2>
<img src="media/lolli_icon.png" class="d-none d-lg-inline">
<p style="font-weight: 400;">At Museum of Candy, we believe that life is sweeter with a little indulgence. Our candy store is a wonderland of confectionery delights, where every visit is a journey into a world of sweetness and joy.
Explore our extensive collection of candies, each one a tiny masterpiece of flavor. From the timeless classics like silky milk chocolates to the whimsical world of gummy bears and sour belts, there's a candy here for everyone's taste.
</p>
</div>
</div>


</div>
</div>

<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-2">
<img src="media/milk.png" class="img-fluid">

</div>
<div class="col-md-6 text-center order-1 order-md-1 cls">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 b-5 mb-md-0">
<h2>Museum of candy</h2>
<img src="media/lolli_icon.png" class="d-none d-lg-inline">
<p style="font-weight: 400;">We take pride in crafting candies with the utmost care and attention to detail. Our commitment to quality means that every bite is a burst of pure deliciousness, made with the finest ingredients and time-honored techniques.
Candies have a way of bringing people together and evoking cherished memories. Whether it's sharing a box of chocolates on a special occasion or treating yourself to a childhood favorite, candies are more than just sweets – they're a source of joy and nostalgia.
</p>
</div>
</div>




</div>
</div>
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1">
<img src="media/milk.png" class="img-fluid">

</div>
<div class="col-md-6 text-center order-1 order-md-2 cls">
<div class="row justify-content-center">
<div class="col-10 col-lg-8 b-5 mb-md-0">
<h2>Museum of candy</h2>
<img src="media/lolli_icon.png" class="d-none d-lg-inline">
<p style="font-weight: 400;">Looking for the perfect gift? Our curated candy collections make delightful presents for birthdays, anniversaries, or just because. Explore our seasonal treats for festive occasions and holidays.<br>
Thank you for visiting CandyLand, where we celebrate the joy of candies every day. Join us in this delightful journey through the world of sweets, and let's make life a little sweeter, one candy at a time!
</p>
</div>
</div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
$(document).scroll(function(){
$("#mainnav").toggleClass("scrolled",$(this).scrollTop()>$("#mainnav").height());
});
});
</script>
</body>
</html>



Binary file added projects/Candy webpage using bootstrap/media/gumball.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.
Binary file added projects/Candy webpage using bootstrap/media/hand2.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.
Binary file added projects/Candy webpage using bootstrap/media/lolli_icon.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.
Binary file added projects/Candy webpage using bootstrap/media/milk.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.
Binary file added projects/Candy webpage using bootstrap/media/sprinkles.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.