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.

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

Big change always starts with small ideas! Project 3 #58

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
5469728
added several pages, menu bar
RebeccaBrogli Sep 27, 2022
055ca98
Added a button, links and About me page
RebeccaBrogli Sep 28, 2022
64f415d
Add files via upload
RebeccaBrogli Sep 28, 2022
5fba1c9
Delete IMG_1695.JPG
RebeccaBrogli Sep 28, 2022
6574b2f
Delete IMG_5727.jpg
RebeccaBrogli Sep 28, 2022
c58ce75
Delete 61b17f92-53a3-4bc9-bddf-f0606e35f36b.jpg
RebeccaBrogli Sep 28, 2022
a5419fb
Delete heading.jpg
RebeccaBrogli Sep 28, 2022
25779fa
Delete katrina-wright-yMg_SMqfoRU-unsplash.jpg
RebeccaBrogli Sep 28, 2022
a41a49b
Delete rebeccawithflowers.jpg
RebeccaBrogli Sep 28, 2022
f1fb1eb
Delete example-recipe-background.png
RebeccaBrogli Sep 28, 2022
1d5c812
Delete diego-ph-fIq0tET6llw-unsplash.jpg
RebeccaBrogli Sep 28, 2022
1ca6957
Delete CCE99C82-87A0-4844-BE77-372764A5ABB3.png
RebeccaBrogli Sep 28, 2022
fa2f678
Add files via upload
RebeccaBrogli Sep 28, 2022
e3d92fd
Added a Favicon
RebeccaBrogli Sep 28, 2022
392f056
Delete about.html
RebeccaBrogli Sep 28, 2022
a4a156e
Delete index.html
RebeccaBrogli Sep 28, 2022
f998a05
Delete style.css
RebeccaBrogli Sep 28, 2022
7b1eba7
Delete toolbox.html
RebeccaBrogli Sep 28, 2022
45fd77a
Delete 61b17f92-53a3-4bc9-bddf-f0606e35f36b.jpg
RebeccaBrogli Sep 28, 2022
04cb49e
Delete IMG_1695.JPG
RebeccaBrogli Sep 28, 2022
8de7d24
Delete IMG_5727.jpg
RebeccaBrogli Sep 28, 2022
27c0aee
Delete rebeccawithflowers.jpg
RebeccaBrogli Sep 28, 2022
05b6569
Delete katrina-wright-yMg_SMqfoRU-unsplash.jpg
RebeccaBrogli Sep 28, 2022
57f199c
Delete heading.jpg
RebeccaBrogli Sep 28, 2022
f08d28c
Started with responsive design
RebeccaBrogli Oct 5, 2022
3a079c4
Add files via upload
RebeccaBrogli Nov 5, 2022
a6f9160
Add files via upload
RebeccaBrogli Nov 8, 2022
f5baf19
Add files via upload
RebeccaBrogli Nov 21, 2022
7b30f41
Add files via upload
RebeccaBrogli Nov 23, 2022
bdb7a7a
Add files via upload
RebeccaBrogli Nov 23, 2022
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
8 changes: 3 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
# Project Name
Big change always starts with small ideas!

Replace this readme with your own information about your project.

Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
A guide to create bold ideas

## The problem

Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
I wanted to build a website that helps the reader to be in the perfect mind space to develop ideas and unleash creativity. It is a collection of videos, links, and ideas to guide the reader to create bold ideas.

## View it live

Expand Down
77 changes: 77 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>This is me!</title>
<link rel="icon" type="image/x-icon" href="/Users/rebeccabrogli/Desktop/Project1/project-p1-first-webpage-master/images/bulb_on.svg">
<link rel="stylesheet" type="text/css" href="style.css"/>

<style>
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;700&family=Raleway:wght@500;700&display=swap');
</style>
</head>

<body>

<header>
<nav>
<a href="./index.html">Home</a>
<a href="./toolbox.html">Toolbox</a>
<a href="./about.html">This is me!</a>
</nav>

<div class="hamburger">
<div> </div>
<div> </div>
<div> </div>
</div>

<img src="/Users/rebeccabrogli/Desktop/Desktop - Rebecca’s MacBook Air/Project1/project-p1-first-webpage-master/images/bulb_on.svg" alt="Big Idea Logo">

</header>

<section class="welcome-comtainer2">
<div class="titel_about">
<h1> About me! </h1>
<h2> Rebecca Brogli</h2>
</div>
</section>

<section class="about">
<div class="image_about"></div>

<div class="text_about">
<p> Analytical and detail-oriented biochemist with experience in asking the right question, understanding complex interrelationships, gathering data sets and turning this data into information, information into insights and then asking an even better question. <p>
<br> Now seeking to advance my career and take on different responsibilities in a new challenging environment. </h4>

<ul style="list-style-type:disc">
<li> hit a perfect tennis shot 🎾</li>
<li> reading until I fall asleep 📖</li>
<li> host unforgettable exciting evenings for friends 💥</li>
<li> the tasty meal after a tough hike in the mountains 🏔</li>
</ul>
</div>

</section>

<div class="image_bottom_about">
<h4> Let your ideas and thoughts give you inspiration. All creativity comes from your imagination - you first imagine and then you create <br> Catherine Pulsifer </h4>
<h4> </h4>
</div>

<footer>
<div class="footer-content">
<h4>More about me!</h4>
<ul class="socials">
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
</div>

</footer>

</body>
</html>
124 changes: 124 additions & 0 deletions code/about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>This is me!</title>
<link rel="icon" type="image/x-icon" href="/Users/rebeccabrogli/Desktop/Project1/project-p1-first-webpage-master/images/bulb_on.svg">
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;700&family=Raleway:wght@500;700&display=swap');
</style>
</head>

<body>

<header>
<nav>
<a href="./index.html">Home</a>
<a href="./toolbox.html">Toolbox</a>
<a href="./about.html">This is me!</a>
</nav>

<div class="hamburger">
<div> </div>
<div> </div>
<div> </div>
</div>

<img src="/Users/rebeccabrogli/Desktop/Desktop - Rebecca’s MacBook Air/Project1/project-p1-first-webpage-master/images/bulb_on.svg" alt="Big Idea Logo">

</header>

<section class="welcome-comtainer2">
<div class="titel_about">
<h1> About me! </h1>
<h2> Rebecca Brogli</h2>
</div>
</section>

<section class="about">
<div class="image_about"></div>

<div class="text_about">
<p> Analytical and detail-oriented biochemist with experience in asking the right question, understanding complex interrelationships, gathering data sets and turning this data into information, information into insights and then asking an even better question. <p>
<br> Now seeking to advance my career and take on different responsibilities in a new challenging environment. </h4>

<ul style="list-style-type:disc">
<li> hit a perfect tennis shot 🎾</li>
<li> reading until I fall asleep 📖</li>
<li> host unforgettable exciting evenings for friends 💥</li>
<li> the tasty meal after a tough hike in the mountains 🏔</li>
</ul>
</div>

</section>

<section class="Feedback">
<h4> How did you like the journey through the website?</h4>
<h4> Please leave a Feedback 👍🏽</h4>

<form action="https://httpbin.org/anything" method="post">
Copy link
Contributor

Choose a reason for hiding this comment

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

Aha - I guess this is the new part!


<fieldset>
<label>
<span> 😃 / 🤨 / 😟 </span>
<select name="Feedback">
<option value="idontknow">Please choose</option>
<option value="great">😃</option>
<option value="potential">🤨</option>
<option value="bad">😟</option>
</select>
</label>

<label>
<span> Name </span>
<input type="text" name="name" required placeholder="Alex Watson">
</label>

<label>
<span> E-mail </span>
<input type="email" name="email" placeholder="alex.watson@example.com" required>
</label>

<label>
<span> Feedback </span>

<textarea name="feedback" id="feedbacks" cols="40" rows="10" required placeholder="max 200 characters"></textarea>
</label>

<button type="submit" class="SubmitButton">Submit your Feedback</button>
</fieldset>

</form>

</section>




<div class="image_bottom_about">
<h4> Let your ideas and thoughts give you inspiration. All creativity comes from your imagination - you first imagine and then you create <br> Catherine Pulsifer </h4>
<h4> </h4>
</div>

<footer>
<div class="footer-content">
<h4>More about me!</h4>
<ul class="socials">
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
</div>

</footer>

</body>
</html>



Binary file removed code/example-recipe-background.png
Binary file not shown.
103 changes: 93 additions & 10 deletions code/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,101 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Name</title>
<!-- dont forget to add a css file and link it here! -->
<!-- If you're using google fonts, that should be added here -->
<title>BIG CHANGE ALWAYS STARTS WITH SMALL IDEAS!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="icon" type="image/x-icon" href="/Users/rebeccabrogli/Desktop/Project1/project-p1-first-webpage-master/images/bulb_on.svg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Comment on lines +7 to +11
Copy link
Contributor

Choose a reason for hiding this comment

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

Would be so nice with a favicon here as well 😊

<style>
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;700&family=Raleway:wght@500;700&display=swap');
</style>

</head>

<body>
<!--
Write your code here inside the body to make it appear in the browser.
Below is an example on how to use an image tag. Copy it and add it in the body, but outside the comment tag if you want to see how it looks like on the website. Then you can change the size and other styling for it in the css file.

<img src="example-recipe-background.png" alt="Banana Bread">
<header>
<nav>
<a href="./index.html">Home</a>
<a href="./toolbox.html">Toolbox</a>
<a href="./about.html">This is me!</a>
</nav>

<div class="hamburger">
<div> </div>
<div> </div>
<div> </div>
</div>

<img src="/Users/rebeccabrogli/Desktop/Desktop - Rebecca’s MacBook Air/Project1/project-p1-first-webpage-master/images/bulb_on.svg" alt="Big Idea Logo">
Copy link
Contributor

Choose a reason for hiding this comment

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

You need to add any images to your uploads, this will only show on your computer since it's a local path.

</header>

<section class="welcome-comtainer">
<div class="titel">
Comment on lines +36 to +37
Copy link
Contributor

Choose a reason for hiding this comment

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

Spelling of class names will help you when you reuse them ;)

<h1>Big change always starts with small ideas!</h1>
<h2> A guide to create bold ideas</h2>
</div>
</section>

<section class="idea-boxes">
Copy link
Contributor

Choose a reason for hiding this comment

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

Very nice flexboxing!

<div class="box">
<h3>Free Your Mind!</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="box">
<h3>Inspire Yourself!</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<a href="toolbox.html">
<button class="btn" type="button">Click Here </button>
</a>
</div>

<div class="box">
<h3>Be Creative!</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="box">
<h3>Ask Questions!</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<a href="toolbox.html">
<button class= "btn" type="button">Click Here </button>
</a>
</div>

<div class="box">
<h3>Generate Ideas!</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<a href="toolbox.html">
<button class= "btn" type="button">Click Here </button>
</a>
</div>

<div class="box">
<h3>Test Your Idea!</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>

<div class="image_bottom_index">
<h4> Everything begins with an idea! </h4>
</div>

<footer>
<div class="footer-content">
<h4>More about me!</h4>
<ul class="socials">
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
</div>

</footer>
Comment on lines +91 to +101
Copy link
Contributor

Choose a reason for hiding this comment

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

Very nice footer!


-->
<h1>Hello there! 👋🏼</h1>
</body>
</html>
</html>
Loading