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

- -

Meat Pies

+ + + + +
+ +
+

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