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

Week3 selina hussain #83

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

Week3 selina hussain #83

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0b06c58
Added wireframe for desktop and mobile in pdf. Added logo image and j…
selinahussain Jun 3, 2020
5090666
Added Jumbotron section. Changed background image for jumbotron. Adde…
selinahussain Jun 3, 2020
4fae636
Created 4 Card section. advanced a little from the original wireframe…
selinahussain Jun 4, 2020
087d145
created form section. Added order image to cake folder.
selinahussain Jun 5, 2020
d8fe8c2
Made Footer section and added styling.
selinahussain Jun 5, 2020
6c05837
Added media queries for larger screens so text is more bigger and eas…
selinahussain Jun 8, 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
created form section. Added order image to cake folder.
  • Loading branch information
@selinahussain
selinahussain committed Jun 5, 2020
commit 087d14525fc6127f6f5f9646468b0e96bb60e981
Binary file added week3/2-website/images/Cakes/order-cakes.jpg
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.
146 changes: 134 additions & 12 deletions week3/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,8 @@ <h1 class="display-6 font-weight-bold mt-5 pt-3">
<h5 class="card-title">Trendy Cakes</h5>
<p class="card-text">
Officia proident in ipsum et. Do sunt dolor amet pariatur.
Sunt culpa aliquip dolor duis elit est. Duis ullamco cupidatat
ex velit consectetur deserunt qui ut amet consectetur
reprehenderit pariatur eiusmod labore.
Sunt culpa aliquip dolor duis elit est. Cillum voluptate amet
reprehenderit ea.
</p>
<a href="#" class="btn card-btn">More</a>
</div>
Expand All @@ -142,9 +141,8 @@ <h5 class="card-title">Trendy Cakes</h5>
<h5 class="card-title">Fruit Cakes</h5>
<p class="card-text">
Officia proident in ipsum et. Do sunt dolor amet pariatur.
Sunt culpa aliquip dolor duis elit est. Duis ullamco cupidatat
ex velit consectetur deserunt qui ut amet consectetur
reprehenderit pariatur eiusmod labore.
Sunt culpa aliquip dolor duis elit est. Cillum voluptate amet
reprehenderit ea.
</p>
<a href="#" class="btn card-btn">More</a>
</div>
Expand All @@ -161,9 +159,8 @@ <h5 class="card-title">Fruit Cakes</h5>
<h5 class="card-title">Wedding Cakes</h5>
<p class="card-text">
Officia proident in ipsum et. Do sunt dolor amet pariatur.
Sunt culpa aliquip dolor duis elit est. Duis ullamco cupidatat
ex velit consectetur deserunt qui ut amet consectetur
reprehenderit pariatur eiusmod labore.
Sunt culpa aliquip dolor duis elit est. Cillum voluptate amet
reprehenderit ea.
</p>
<a href="#" class="btn card-btn">More</a>
</div>
Expand All @@ -180,9 +177,8 @@ <h5 class="card-title">Wedding Cakes</h5>
<h5 class="card-title">Tart&Etc.</h5>
<p class="card-text">
Officia proident in ipsum et. Do sunt dolor amet pariatur.
Sunt culpa aliquip dolor duis elit est. Duis ullamco cupidatat
ex velit consectetur deserunt qui ut amet consectetur
reprehenderit pariatur eiusmod labore.
Sunt culpa aliquip dolor duis elit est. Cillum voluptate amet
reprehenderit ea.
</p>
<a href="#" class="btn card-btn">More</a>
</div>
Expand All @@ -192,6 +188,132 @@ <h5 class="card-title">Tart&Etc.</h5>
</div>
</section>

<!-- Form Section -->
<section class="container">
<div class="row ">
<div class="col">
<h2
class="display-12 font-weight-bold mt-5 pt-3 mb-5 pb-3 text-center"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use my and py if the passing or margin is the same for top & bottom. That means you don't have to write out the classes twice.

https://getbootstrap.com/docs/4.4/utilities/spacing/

>
Contact Us
</h2>
</div>
</div>
<div class="row">
<div class="col d-none d-md-block col-md-6 col-lg-6 text-center">
<img
src="images\Cakes\order-cakes.jpg"
class="img-thumbnail mx-auto d-block"
alt="Several cakes for order"
/>
</div>
<div class="col col-sm-12 col-md-6 col-lg-6 mt-2">
<form>
<div class="form-group row">
<label for="inputName1" class="col-sm-5 col-form-label"
>Your Name:</label
>
<div class="col-sm-7">
<input
type="Text"
class="form-control"
id="inputName1"
placeholder="e.g. John Banks"
/>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-5 col-form-label"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work on adding accessible labels for the forms.

>Email:</label
>
<div class="col-sm-7">
<input
type="email"
class="form-control"
id="inputEmail3"
placeholder="name@example.com"
/>
</div>
</div>
<div class="form-group row">
<label for="exampleFormControlSelect1" class="col-sm-5"
>What Would You Like?</label
>
<select
class="form-control col-sm-7"
id="exampleFormControlSelect1"
>
<option>Menu 1</option>
<option>Menu 2</option>
<option>Menu 3</option>
<option>Menu 4</option>
<option>Menu 5</option>
</select>
</div>
<div class="form-group row">
<div class="col-sm-5">Dietary Requirements:</div>
<div class="col-sm-7">
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="gridCheck1"
/>
<label class="form-check-label" for="gridCheck1">
Option 1
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="gridCheck2"
/>
<label class="form-check-label" for="gridCheck2">
Option 2
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="gridCheck3"
/>
<label class="form-check-label" for="gridCheck3">
Option 3
</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="checkbox"
id="gridCheck4"
/>
<label class="form-check-label" for="gridCheck4">
Option 4
</label>
</div>
</div>
</div>
<div class="form-group row ml-auto">
<label for="exampleFormControlTextarea1">Comments?</label>
<textarea
class="form-control"
id="exampleFormControlTextarea1"
rows="3"
placeholder="Any questions? Need a personalised message? Special requests? Any extras you would like to add?"
></textarea>
</div>
<div class="form-group row text-center">
<div class="col-sm-10">
<button type="submit" class="btn btns">Send</button>
</div>
</div>
</form>
</div>
</div>
</section>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
Expand Down
3 changes: 2 additions & 1 deletion week3/2-website/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,5 @@

.card-btn:hover {
background: #db96a0;
}
}