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

Homework: Bootstrap lab Instructor: Edgardo Molina Lab Instructor: Silu #71

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

Homework: Bootstrap lab Instructor: Edgardo Molina Lab Instructor: Silu #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5913ed8
bootstrap lab
Unaiza898 Sep 17, 2021
d7723a0
bootstrape
Unaiza898 Sep 17, 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
16 changes: 16 additions & 0 deletions .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [


{
"type": "pwa-chrome",
"request": "launch",
"name": "Open index.html",
"file": "c:\\Users\\nizam\\OneDrive\\Desktop\\College spring 2021\\bootstrap-lab\\index.html"
}
]
}
103 changes: 103 additions & 0 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,104 @@
.selector-for-some-widget {
box-sizing: content-box;
}
/* // Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up) */
html, body {
max-width: 100%;
overflow-x: hidden;
}
.container{
position:relative;
padding: 0%;
}

.no-padding {
padding: 0 !important;
}
title{

text-align: center;

}
h1{
text-align: center;
}
.container-fluid{
margin-left: 0%;
margin-right: 0%;
}
.text-block{
position: absolute;
bottom:500px ;
top: 40px;
left: 250px;
right: 250px;
align-content: center;
background-color:black;
opacity: 0.5;
color: white;
/* padding-left: 20px;
padding-right: 20px; */
margin-left: 0%;
margin-right: 0%;


}
.box{
position: absolute;

background-color:teal;
color: white;
/* width: 100%;
margin-left: 0%;
margin-right: 0%;
padding-bottom: 10px; */
text-align: center;
width: 100%;
padding: auto;




}
/* body {
overflow-x:hidden;
} */
.oval{
border: 1px solid;
border-radius: 50%;
padding: 0%;
width: 250px;
height: 200px;
bottom: 20%;

}

/* .rounded-circle{
border: 1px solid;
border-radius: 10%;
width: 20px;
height: 20px;
bottom: 20%;
} */
.block{
position: absolute;
background-color: grey;
color: white;
text-align:center;
margin-top: 5%;
margin-left: 0%;
margin-right: 0%;
/*
width: 100%;
left:0;
padding-left: 20px;
padding-right: 20px;
top:10%; */
/* bottom: -200%;
padding-top: 10px; */
/* // padding-bottom: 10px; */

}
139 changes: 112 additions & 27 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,132 @@
<!DOCTYPE html>
<html>
<head>
<title>Cookie Store</title>
<!-- <div class = "container-fluid">
<div class = "row">
<div class = "col" style="padding: 0;">
<img src= "img/milkbg.jpg" width="100%" height="60%">
</div>
</div>
</div> -->
<div class = "row">
<img src= "img/milkbg.jpg" width="100%" height="350px">
<div class = "container-fluid no padding">
<div class = "text-block">
<title>Cookie Store</title>
<link rel = "stylesheet" href = "css/styles.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<body>
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<h1 style="text-align:center">Cookie Store</h1>

<h1>Cookie Store</h1>

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

<h2>The Cookies</h2>
<p style="text-align:center">Buy our awesome cookies. All proceeds go to charity!</p>
</div>
</div>
</div>
<h2 style="text-align:center" >The Cookies</h2>
<div class="container-fluid no padding">
<div class="row no padding" >
<div class=" col-lg-3 col-md-8 col-sm-6">

<h3>Thin Mint Cookies</h3>
<p>Tasty mint chocolate cookies</p>
<!-- //<div class="col-lg-3 "> -->
<img class = "rounded-circle img-fluid" src="img/mint.png"style="width:80%">
<!-- </div> -->
</div>
<div class="col-lg-3 col-md-8 col-sm-6" >
<h3> Peanut Butter Cookies </h3>
<p>Yummy peanut buttery goodness!</p>
<img class = "rounded-circle img-fluid" src="img/peanut.png"style="width:80%">
</div>
<div class="col-lg-3 col-md-8 col-sm-6">
<h3>Short Bread Cookies</h3>
<p>Santa's favorite classic.</p>
<img class = "rounded-circle img-fluid" src="img/shortbread.png" style="width:80%">
</div>
<div class = " col-lg-3 col-md-8 col-sm-6">
<h3>Smore's Cookies</h3>
<p>Camp fire favorite!</p>
<img class = "rounded-circle img-fluid" src="img/smores.png" style="width:80%">

<h3>Thin Mint Cookies</h3>
</div>
</div>
</div>
<!-- <h3>Thin Mint Cookies</h3>
<p>Tasty mint chocolate cookies</p>
<img src="img/mint.png">
<img class = "oval" src="img/mint.png" >

<h3>Peanut Butter Cookies</h3>
<p>Yummy peanut buttery goodness!</p>
<img src="img/peanut.png">
<img class = "oval" src="img/peanut.png">

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

<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>
<img class = "oval"src="img/smores.png"> -->


<div class = "container-fluid">
<div class = "row">
<div class = "block col">
<img src= "img/cmonster.png" ALIGN = "left" >
<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>
</div>
</div>

<div class = "container-fluid no padding " >
<div class = "row ">
<div class = "box col" >
<h2 >Contact us</h2>
<p > 100 Broadway Avenue,<br>
New York, NY 10001<br>
(212) 555-1234</p>
</div>
</div>
</div>
</body>
</html>


<!--

<div class="container-fluid no padding">
<div class="row no padding" >
<div class=" col-lg-3 col-md-8 col-sm-6">
<h3>Thin Mint Cookies</h3>
<p>Tasty mint chocolate cookies</p>
<img class = "rounded-circle img-fluid" src="img/mint.png"style="width:80%">
</div>
<div class="col-lg-3 col-md-8 col-sm-6" >
<h3> Peanut Butter Cookies </h3>
<p>Yummy peanut buttery goodness!</p>
<img class = "rounded-circle img-fluid" src="img/peanut.png"style="width:80%">
</div>
<div class="col-lg-3 col-md-8 col-sm-6">
<h3>Short Bread Cookies</h3>
<p>Santa's favorite classic.</p>
<img class = "rounded-circle img-fluid" src="img/shortbread.png" style="width:80%">
</div>
<div class = " col-lg-3 col-md-8 col-sm-6">
<h3>Smore's Cookies</h3>
<p>Camp fire favorite!</p>
<img class = "rounded-circle img-fluid" src="img/smores.png" style="width:80%">

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