From 21b80e270e2978bc0d85bcac84e184c0155cccc5 Mon Sep 17 00:00:00 2001 From: arif matubbber <43994458+marifm1986@users.noreply.github.com> Date: Thu, 1 Oct 2020 23:40:09 +0600 Subject: [PATCH] i did some rework on css and html --- css/main.css | 95 ++++++++++++++++++++------------- index.html | 147 +++++++++++++++++++++++++++++++++------------------ 2 files changed, 153 insertions(+), 89 deletions(-) diff --git a/css/main.css b/css/main.css index b12ed66..9c66873 100644 --- a/css/main.css +++ b/css/main.css @@ -1,87 +1,108 @@ @import url(http://fonts.googleapis.com/css?family=Raleway:300); @import url(http://fonts.googleapis.com/css?family=Lato:300,400); -body{ - font-family: Lato, 'Helvetica Neue', Helvetica, sans-serif; +:root { + --primary_color: #fa5a0f; + --secondary_color: #fa5a0f; +} + +body { + font-family: Lato, "Helvetica Neue", Helvetica, sans-serif; font-size: 18px; font-weight: 300; - background: url('../img/background.jpg') fixed; + background: url("../img/background.jpg") fixed; background-size: cover; } -h1, h2, h3{ - font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif; - font-weight: 300; +h1, +h2, +h3 { + font-family: Raleway, "Helvetica Neue", Helvetica, sans-serif; + font-weight: 500; } -h1{ +h1 { font-size: 300%; margin: 0; } -h2, h3{ - color: #505050 +h2, +h3 { + color: #505050; } -h2{ +h2 { font-size: 150%; } -h3{ +h3 { font-size: 125%; } -a:link, a:visited { +a:link, +a:visited { text-decoration: none; - color: #0000AA; + color: #0000aa; } -a:hover, a:focus{ - color: #0000EE; +a:hover, +a:focus { + color: #0000ee; } -main{ +main { margin: 20px 20px 20px 30%; - background-image: url('../img/ricepaper_v3.png'); + background-image: url("../img/ricepaper_v3.png"); opacity: 0.9; } -header{ - padding: 1em; - background-color: #FA5A0F; - border-bottom: solid 5px #EA4A00; - color: #FFFFFF; +header { + padding: 1em 5em; + background: var(--primary_color); + border-bottom: solid 5px var(--primary_color); + color: #ffffff; } -header p{ +header p { margin: 0; font-size: 120%; - color: #EEEEEE; + color: #eeeeee; } -footer{ - padding: 1em; - background-color: #FC892F; - border-top: solid 5px #EC791F; +footer { + padding: 1em 3em; + background: var(--secondary_color); + border-top: solid 5px var(--secondary_color); font-size: 80%; text-align: right; } -dd{ - font-size: 80%; +dd { + font-size: 1.1rem; font-style: italic; margin: 0 0 1em 1em; } -.general{ - padding: 1em; +.general { + padding: 1em 3em; } .menu { - padding: 1em; - background-color: rgba(207,205,105,.5); + padding: 1em 3em; + background: rgba(207, 205, 105, 0.5); + display: flex; + justify-content: space-between; } -.about{ - padding: 1em; -} \ No newline at end of file +.main_title { + text-align: center; + margin: auto; +} + +.about { + padding: 1em 3em; +} + +.recipe_list { + max-width: 25em; +} diff --git a/index.html b/index.html index 51c32e1..06bcf5f 100644 --- a/index.html +++ b/index.html @@ -1,74 +1,117 @@ - - - - - + + + - - - + + - Dawg Pizza - + + + - -
-
-

Dawg Pizza

-

Feeding Hungry Huskies Since 2013

-
+ Dawg Pizza + -
-

Address

-

4529 University Way NE
Seattle, WA 98105

+ +
+
+

Dawg Pizza

+

Feeding Hungry Huskies Since 2013

+
-

Hours

-

Open daily from noon to midnight

+
+

Address

+

4529 University Way NE
Seattle, WA 98105

-

To Order

-

Call us at 206-555-1212

-
+

Hours

+

Open daily from noon to midnight

-
-

Our Menu

+

To Order

+

Call us at 206-555-1212

+
-

Meat Pies

+
+

Our Menu

+
+

Meat Pies

+
-
Bacon & Pinapple
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet hic iste iure sequi. Ad autem consectetur, delectus eligendi enim incidunt ipsum molestiae, nemo nulla quis reprehenderit veniam voluptatem voluptates voluptatum.
-
Duck, Duck, Goose
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dolores earum eum labore maxime nemo nesciunt nulla quasi quia, reiciendis repellat sint voluptates? Architecto dignissimos iste iure nobis praesentium.
-
The Bambi
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dignissimos dolor dolores ea, explicabo laborum quidem sequi similique vel voluptatem? A architecto corporis dolores hic pariatur recusandae, similique vero voluptas!
+
+ Bacon & Pinapple +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet hic iste iure sequi. Ad autem + consectetur, delectus eligendi enim incidunt ipsum molestiae, nemo nulla quis reprehenderit + veniam + voluptatem voluptates voluptatum.

+
+
+ Duck, Duck, Goose +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dolores earum eum + labore + maxime nemo nesciunt nulla quasi quia, reiciendis repellat sint voluptates? Architecto + dignissimos + iste iure nobis praesentium.

+
+
+ The Bambi +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dignissimos dolor dolores + ea, + explicabo laborum quidem sequi similique vel voluptatem? A architecto corporis dolores hic + pariatur + recusandae, similique vero voluptas!

+
-
+ +
+

Veggie Pies

+
-
Forest Floor
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam aut blanditiis consectetur, consequuntur cumque delectus dolorem doloremque inventore minus nisi nobis quibusdam, quis reprehenderit, repudiandae saepe sed sit vero.
-
Green Monster
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis culpa dolorum eligendi impedit itaque laudantium nostrum odit, pariatur placeat porro quia rerum sed tempora, totam, unde vel voluptate! Facere, quia?
-
Caprese
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, dolor dolores eaque facere incidunt mollitia nulla quasi. Aperiam architecto dolorem ea, ipsa itaque molestias numquam quas suscipit ullam ut voluptas!
+ Forest Floor +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid aperiam aut blanditiis + consectetur, consequuntur cumque delectus dolorem doloremque inventore minus nisi nobis + quibusdam, + quis reprehenderit, repudiandae saepe sed sit vero.

+ Green Monster +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis culpa dolorum eligendi impedit + itaque laudantium nostrum odit, pariatur placeat porro quia rerum sed tempora, totam, unde vel + voluptate! Facere, quia?

+ Caprese +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, dolor dolores eaque facere + incidunt mollitia nulla quasi. Aperiam architecto dolorem ea, ipsa itaque molestias numquam quas + suscipit ullam ut voluptas!

-
+ + + +
+ +
+

About Us

-
-

About Us

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam error expedita, laudantium nulla + repellat repellendus? Aperiam at earum eum exercitationem illum inventore, laboriosam, nobis numquam + pariatur perspiciatis quod temporibus voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing + elit. Ad amet cum eius exercitationem facilis harum illo incidunt iste maxime, pariatur perferendis quae + recusandae totam velit veniam vero voluptatibus? Delectus, soluta. Lorem ipsum dolor sit amet, + consectetur adipisicing elit. Alias aliquam aperiam aut consequatur facere libero magni maiores nobis + provident quae, qui quo, vel velit. Autem consequatur esse fuga recusandae voluptatibus!

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam error expedita, laudantium nulla repellat repellendus? Aperiam at earum eum exercitationem illum inventore, laboriosam, nobis numquam pariatur perspiciatis quod temporibus voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet cum eius exercitationem facilis harum illo incidunt iste maxime, pariatur perferendis quae recusandae totam velit veniam vero voluptatibus? Delectus, soluta. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam aperiam aut consequatur facere libero magni maiores nobis provident quae, qui quo, vel velit. Autem consequatur esse fuga recusandae voluptatibus!

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur delectus dolorem doloremque + eaque esse fuga ipsa magnam, maiores nam non officia porro provident ratione sapiente sed sint tempora + ullam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam debitis explicabo fugiat + impedit molestiae reprehenderit rerum tempore ullam ut vitae? Alias aspernatur fugit molestiae nihil + numquam obcaecati quisquam sapiente vel.

+
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aspernatur delectus dolorem doloremque eaque esse fuga ipsa magnam, maiores nam non officia porro provident ratione sapiente sed sint tempora ullam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam debitis explicabo fugiat impedit molestiae reprehenderit rerum tempore ullam ut vitae? Alias aspernatur fugit molestiae nihil numquam obcaecati quisquam sapiente vel.

-
+ +
+ - - - \ No newline at end of file