diff --git a/README.md b/README.md index 61644f44..6b20e29f 100644 --- a/README.md +++ b/README.md @@ -16,9 +16,9 @@ It should include the following elements: - A page header with a title and description for the site. - An articles section with three articles, each including a title, summary and a link. - A page footer containing info about you or the site. -- Proper use of the semantic HTML tags we discussed. - Research the `:first-child` pseudo-class and use it to style the first article so that it stands out from the others. - Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks of contents to fill your website. +- Proper use of the semantic HTML tags we discussed. - **Commit often (with good meaningful commit messages), and Push to Github regularly.** - Use the sketch below to guide you towards the layout and content you are trying to achieve. _Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page._ diff --git a/assest/pic-nuts-1.jfif b/assest/pic-nuts-1.jfif new file mode 100644 index 00000000..60f8f7e4 Binary files /dev/null and b/assest/pic-nuts-1.jfif differ diff --git a/assest/pic-nuts-2.jfif b/assest/pic-nuts-2.jfif new file mode 100644 index 00000000..149575ba Binary files /dev/null and b/assest/pic-nuts-2.jfif differ diff --git a/assest/pic-nuts-3.jfif b/assest/pic-nuts-3.jfif new file mode 100644 index 00000000..9aca91ae Binary files /dev/null and b/assest/pic-nuts-3.jfif differ diff --git a/assest/pic-nuts-logo-1.jpg b/assest/pic-nuts-logo-1.jpg new file mode 100644 index 00000000..a327ea5d Binary files /dev/null and b/assest/pic-nuts-logo-1.jpg differ diff --git a/assest/pic-nuts-logo.jpg b/assest/pic-nuts-logo.jpg new file mode 100644 index 00000000..9a425c37 Binary files /dev/null and b/assest/pic-nuts-logo.jpg differ diff --git a/css/style.css b/css/style.css index 75e9841e..2973b27f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,149 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Josefin+Sans:wght@500&family=Lato:wght@700&display=swap'); +body { + background-color: #fef6e4; + padding: 0; + margin: 0; + line-height: 1.2; +} + +h1, +h2 { + color: #c24914; + text-transform: uppercase; + font-family: 'Lato', sans-serif; +} + +h1 { + color: transparent; + background: #c24914; + -webkit-background-clip: text; + -moz-background-clip: text; + background-clip: text; + text-shadow: 0px 3px 3px rgba(255, 255, 255, 0.5); + font-size: 50px; +} + +h2 { + padding-bottom: 20px; +} + +header, +main, +footer { + box-sizing: border-box; + width: 100%; +} + +article { + background-color: whitesmoke; + border: 1px solid #eeeded; + margin: 50px 0; +} + +img, +video { + width: 100%; +} + +i { + font-size: 12px; +} + +p { + font-family: 'Josefin Sans', sans-serif; + padding: 20px; +} + +header { + background: #603813; + /* fallback for old browsers */ + background: -webkit-linear-gradient(to bottom, #b29f94, #603813); + /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to bottom, #b29f94, #603813); + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0); + box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0); + color: whitesmoke; +} + +.container { + display: flex; + flex-wrap: wrap; + margin: 25px auto; + width: 60%; +} + +.box { + text-align: center; + width: 100%; +} + +article:first-child { + background-color: #6d3f048c; + border: 1px solid #666962; + border-radius: 5px; + -webkit-box-shadow: 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0, 0, 0, 0); + box-shadow: 2px 5px 16px 0px #0B325E, 5px 5px 15px 5px rgba(0, 0, 0, 0); + color: whitesmoke; +} + +article a { + background-color: #6d3f04; + cursor: pointer; + padding: 10px 50px; + margin-bottom: 20px; + border: none; + color: whitesmoke; + font-family: 'Inconsolata', sans-serif; + text-decoration: none; +} + +article a:hover { + font-size: large; +} + +footer { + background: #603813; + /* fallback for old browsers */ + background: -webkit-linear-gradient(to bottom, #b29f94, #603813); + /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to bottom, #b29f94, #603813); + /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + color: whitesmoke; + padding: 20px 0; +} + +.social-media { + display: flex; + align-items: center; + padding-top: 20px; + justify-content: center; +} + +.social-media i { + padding-right: 10px; +} + + +/************** BOOTSTRAP PAGES **********/ + +.jumbotron { + background-repeat: no-repeat; + margin-bottom: 1em; +} + +@media screen and (max-width: 580px) { + .container { + width: 100%; + padding: 0; + margin: 0; + } + article:first-child { + border: none; + box-shadow: none; + border-radius: none; + } + article { + border: none; + } +} \ No newline at end of file diff --git a/index copy.html b/index copy.html new file mode 100644 index 00000000..ec07c20f --- /dev/null +++ b/index copy.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + Hello, world! + + + +
+
+
+
+
+

The Nut Factory

+

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque, mollitia.

+
+
+
+
+ +
+
+
+ ... +
+
Why we love Nuts
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Read More +
+
+
+
+
+ ... +
+
We Sell a Variety of Imported and Local Nuts +
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Read More +
+
+
+
+
+ ... +
+
Types of Nuts?
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Read More +
+
+
+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..d21ca5e9 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,58 @@ - - - - My Blog - - - - - - - - - + + + + + + + The Nut Cracker + + + +
+
+

The Nut Factory

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat ea adipisci earum perferendis officia ex.

+
+
+
+
+

Why we Love Nuts

+ picture of random nuts +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed tempora facere corrupti consectetur ut? Assumenda, maxime dolores. Dolore laborum perspiciatis fugit deleniti laudantium culpa, error, atque magni consectetur nostrum perferendis? +

+ Read more +
+ +
+

We Sell a Variety of Imported and Local Nuts

+ picture of random nuts +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed tempora facere corrupti consectetur ut? Assumenda, maxime dolores. Dolore laborum perspiciatis fugit deleniti laudantium culpa, error, atque magni consectetur nostrum perferendis? +

+ Read more +
+ +
+

Types of Nuts?

+ +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed tempora facere corrupti consectetur ut? Assumenda, maxime dolores. Dolore laborum perspiciatis fugit deleniti laudantium culpa, error, atque magni consectetur nostrum perferendis? +

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis cupiditate consequatur, autem in excepturi illo! Molestiae placeat dolor neque error eos? Fugit harum explicabo, quas accusamus ipsa quasi quod cumque?Voluptatibus assumenda + exercitationem eligendi consectetur, voluptates eaque ducimus dolores omnis, nostrum, quisquam pariatur facilis sequi facere ipsum corporis veniam suscipit? Eveniet recusandae maiores rerum deserunt quas. Magnam minima officia optio!

+ Read more +
+
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +}