From 4f3c9a29fb763f3673502b92c3c5688d84d883de Mon Sep 17 00:00:00 2001 From: aprilkrgonzales Date: Tue, 25 Jan 2022 20:44:13 -0700 Subject: [PATCH 1/4] create html elements --- index.html | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 8cd37ffb..33d97ca2 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,23 @@ Hello Front-End -

Hello Front-End

+ +
+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

+ San Francisco + New York + London + +
+ +
+

Just for the Weekend

+

Discover new, inspiring places close to home

+ Napa + Sonoma + San Francisco + +
From 8b324fd1d9cfe55d01ced995543915fb84cd5f4d Mon Sep 17 00:00:00 2001 From: aprilkrgonzales Date: Tue, 25 Jan 2022 20:48:44 -0700 Subject: [PATCH 2/4] link images to html --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 33d97ca2..3c5d3333 100644 --- a/index.html +++ b/index.html @@ -11,18 +11,18 @@

Meet Guidebooks

Discover hundreds of local spots recommended by Airbnb hosts

- San Francisco - New York - London + Image showing rooftops and fogSan Francisco + Image of New York skyline.New York + Image of the Thames river, showing Big Ben.London

Just for the Weekend

Discover new, inspiring places close to home

- Napa - Sonoma - San Francisco + Image showing air balloons over Napa vineyards.Napa + Image showing fields in the foreground, with blue mountains in the background.Sonoma + Image shows colorful houses on a hill in San Francisco.San Francisco
From 0f84cbabe6c990fdbd60a9e385d9d523833859ce Mon Sep 17 00:00:00 2001 From: aprilkrg Date: Wed, 10 Aug 2022 10:06:48 -0600 Subject: [PATCH 3/4] finish homework --- css/style.css | 12 +++++++++--- index.html | 35 +++++++++-------------------------- notes.md | 29 +++++++++++++++++++++++++++++ readme.md | 2 +- 4 files changed, 48 insertions(+), 30 deletions(-) create mode 100644 notes.md diff --git a/css/style.css b/css/style.css index 26f119bf..408fce3f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,9 @@ -h1 { - color: salmon; -} +* { + /* browser css reset */ + margin: 0; + box-sizing: border-box; + /* set some basic font styling */ + font-family: "Raleway", sans-serif; + /* use digital color picker to get hex values */ + color: #4b4c4e; +} \ No newline at end of file diff --git a/index.html b/index.html index 3c5d3333..1fe8aa0e 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,12 @@ - - - - - Hello Front-End - - - -
-

Meet Guidebooks

-

Discover hundreds of local spots recommended by Airbnb hosts

- Image showing rooftops and fogSan Francisco - Image of New York skyline.New York - Image of the Thames river, showing Big Ben.London - -
- -
-

Just for the Weekend

-

Discover new, inspiring places close to home

- Image showing air balloons over Napa vineyards.Napa - Image showing fields in the foreground, with blue mountains in the background.Sonoma - Image shows colorful houses on a hill in San Francisco.San Francisco - -
- + + + + + Hello Front-End + + + + diff --git a/notes.md b/notes.md new file mode 100644 index 00000000..b315df81 --- /dev/null +++ b/notes.md @@ -0,0 +1,29 @@ +- First let's all create the pull request +- Fist to 5, how do you feel after working on that deliverable? +- What is semantic html? [slack thread] +- How would you translate this to an outline format? [discussion - how did you organize the information in your head? what sections do you see?] +- Given our file structure, how do you link to the New York image? [slack thread] +- How does css class inheiritance work? +- What is the alt tag used for? [slack thread] +- Who can link to div dicumentation on csstricks fastest? [slack thread] +- Who can get a link to rem documentation fastest? [slack thread] +- Tell me one thing you learned? [slack thread before I cede the floor] + + +OUTLINE +- Title: Meet Guidebooks + - Sub-title: Discover hundreds of local spots recommended by Airbnb hosts + - Images: + - San Francisco + - New York + - London + - Button: See All Guidebooks +- Title: Just for the Weekend + - Sub-title: Discover new, inspiring places close to home + - Images: + - Napa + - Sonoma + - San Francisco + - Button: See All Destinations + +I'm using a div when I want to effect the flow of objects inside, and using a section when I want to group things together so they can be styled as one \ No newline at end of file diff --git a/readme.md b/readme.md index 2fc29d76..035855fe 100644 --- a/readme.md +++ b/readme.md @@ -34,4 +34,4 @@ Here's a screenshot of the portion that should be replicated. Deliver the mockup ## Licensing 1. All content is licensed under a CC-BY-NC-SA 4.0 license. -2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co. +2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co. \ No newline at end of file From 58d674ca2a444fb5cb6fda4ed4c6de50894f5569 Mon Sep 17 00:00:00 2001 From: aprilkrg Date: Wed, 8 Mar 2023 09:32:36 -0700 Subject: [PATCH 4/4] style buttons --- css/style.css | 30 +++++++++++++++++++++++++++ index.html | 57 +++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 85 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 408fce3f..d0d6a84e 100644 --- a/css/style.css +++ b/css/style.css @@ -6,4 +6,34 @@ font-family: "Raleway", sans-serif; /* use digital color picker to get hex values */ color: #4b4c4e; +} +body { + background-color: #E9EBE7; +} +button { + padding: 1rem 6rem; + font-weight: 600; +} +.images img { + width: 20rem; + height: 25rem; + object-fit: cover; +} +.card { + text-align: center; +} +.card section { + display: inline-block; + position: relative; + padding: 20px; +} +.images p { + color: white; + font-size: 35px; + font-weight: 600; + width: max-content; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } \ No newline at end of file diff --git a/index.html b/index.html index 1fe8aa0e..46f43349 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,63 @@ - + Hello Front-End - + +
+
+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

+
+
+ +
+ san francscio +

San Francisco

+
+
+ new york +

New York

+
+
+ london +

London

+
+ +
+ +
+
+
+ + +
+
+

Just for the weekend

+

Discover new, inspiring places close to home

+
+
+ +
+ napa +

Napa

+
+
+ sonoma +

Sonoma

+
+
+ san francscio +

San Francisco

+
+ +
+ +
+
+
+