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

Melissa Persaud: Bootstrap Lab Instructor: Donato TA: Elie #68

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

Melissa Persaud: Bootstrap Lab Instructor: Donato TA: Elie #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d76c1df
hello
melissapersaud17 Sep 14, 2021
2d7fbbb
compeleted 3 and 4 requirements
melissapersaud17 Sep 14, 2021
f30a054
continued to work on project
melissapersaud17 Sep 15, 2021
e65a40f
continued to work on project
melissapersaud17 Sep 16, 2021
bb074e7
added nav bar and updated badge
melissapersaud17 Sep 16, 2021
7b3d188
attempted to offset columns
melissapersaud17 Sep 16, 2021
8b9cde2
added google font
melissapersaud17 Sep 16, 2021
4633d3d
made updates
melissapersaud17 Sep 16, 2021
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
58 changes: 58 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,59 @@
*{
text-align: center;
font-family: 'Inconsolata', monospace;
}

.nav{
margin-bottom: 0;
}

.nav-link{
margin: 1%;
padding: 0;
}


.xl-img{
margin-bottom: 5%;
}

.bg-img{
background-image: url('/img/milkbg.jpg');
background-repeat: no-repeat;
height:50vh;
background-position:center center;
}


.transparent{
background: rgba(0,0,0,.5);
margin-top: 10vh;
padding: 3%;
width: 30%;
margin-left:35%;
}


.about-us{
text-align: left;
}


.bg-lightgray{
background-color:lightgrey;
display: inline;
float:left;
margin: 0;
}

.cookie-monster{
background-image: url('/img/cmonster.png');


}

.footer{
color: white;
background-color:#28b3d6;
font-size: 1em;
}
116 changes: 89 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,107 @@
<html>
<head>
<title>Cookie Store</title>

<!--Meta Tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--Bootstrap CSS link-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!--CSS link-->
<link href="css/styles.css" rel='stylesheet'>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&display=swap" rel="stylesheet">
</head>
<body>

<nav class="nav bg-dark text-blue container-fluid">
<a class="nav-link" href="#">index.html</a>
<a class="nav-link" href="#">index1.html</a>
<a class="nav-link" href="#">index2.html</a>
<a class="nav-link" href="#">index3.html</a>
<a class="nav-link" href="#">index4.html</a>
<a class="nav-link" href="#">index5.html</a>
</nav>


<div class="container-fluid">
<div class="row">
<div class="col-lg-12 bg-img">
<div class="transparent text-white">
<h1 class="cookies">Cookie Store</h1>
<p class="cookies">Buy our awesome cookies. All proceeds go to charity!</p>
</div>
</div>
</div>
</div>

<h2>The Cookies</h2>

<h1>Cookie Store</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-xl-9 col-md-12 xl">
<h3 class="col-xl-9">Thin Mint Cookies<span class="badge badge-secondary badge-danger">NEW</span></h3>
<p class="col-xl-9">Tasty mint chocolate cookies</p>
<img src="img/mint.png"class="offset-xl-9 xl-img rounded-circle img-fluid">
</div>

<p>Buy our awesome cookies. All proceeds go to charity!</p>

<h2>The Cookies</h2>
<div class="col-lg-3 col-xl-9 col-md-12">
<h3 class="offset-xl-9 ">Peanut Butter Cookies</h3>
<p class="offset-xl-9 ">Yummy peanut buttery goodness!</p>
<img src="img/peanut.png" class="rounded-circle img-fluid">
</div>

<h3>Thin Mint Cookies</h3>
<p>Tasty mint chocolate cookies</p>
<img src="img/mint.png">
<div class="col-lg-3 col-xl-9 col-md-12">
<h3 class="col-xl-9">Short Bread Cookies</h3>
<p class="col-xl-9">Santa's favorite classic.</p>
<img src="img/shortbread.png "class="offset-xl-9 rounded-circle img-fluid">
</div>


<h3>Peanut Butter Cookies</h3>
<p>Yummy peanut buttery goodness!</p>
<img src="img/peanut.png">
<div class="col-lg-3 col-xl-9 col-md-12">
<h3 class="offset-xl-9 ">Smore's Cookies</h3>
<p class="offset-xl-9 ">Camp fire favorite!</p>
<img src="img/smores.png"class="rounded-circle img-fluid">
</div>

</div>
</div>

<h3>Short Bread Cookies</h3>
<p>Santa's favorite classic.</p>
<img src="img/shortbread.png">

<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-sm-6 center-block bg-lightgray">
<img src="img/cmonster.png" >
</div>
<div class="col-lg-9 col-sm-6 bg-lightgray about-us">
<h2>About us</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


</div>
</div>
</div>

<div class="container-fluid footer">
<h2>Contact us</h2>
<div>
100 Broadway Avenue,<br>
New York, NY 10001 <br>
(212) 555-1234
</div>

<h3>Smore's Cookies</h3>
<p>Camp fire favorite!</p>
<img src="img/smores.png">

<h2>About us</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<h2>Contact us</h2>
<div>
100 Broadway Avenue,<br>
New York, NY 10001 <br>
(212) 555-1234
</div>

</body>
Expand Down