Skip to content

i did some rework on css and html #3

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.

Sign up for GitHub

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

Open
marifm1986 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

i did some rework on css and html #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
95 changes: 58 additions & 37 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
.main_title {
text-align: center;
margin: auto;
}

.about {
padding: 1em 3em;
}

.recipe_list {
max-width: 25em;
}
147 changes: 95 additions & 52 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,117 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="author" content="Jason Ho">
<meta name="description" content="Dawg Pizza mainpage">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/pizza-icon.png">
<meta name="author" content="Jason Ho">
<meta name="description" content="Dawg Pizza mainpage">

<title>Dawg Pizza</title>
</head>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="shortcut icon" href="img/pizza-icon.png">

<body>
<main>
<header>
<h1>Dawg Pizza</h1>
<p>Feeding Hungry Huskies Since 2013</p>
</header>
<title>Dawg Pizza</title>
</head>

<section class="general">
<h2>Address</h2>
<p><a href="https://goo.gl/maps/CKrRF">4529 University Way NE<br>Seattle, WA 98105</a></p>
<body>
<main>
<header>
<h1>Dawg Pizza</h1>
<p>Feeding Hungry Huskies Since 2013</p>
</header>

<h2>Hours</h2>
<p>Open daily from noon to midnight</p>
<section class="general">
<h2>Address</h2>
<p><a href="https://goo.gl/maps/CKrRF">4529 University Way NE<br>Seattle, WA 98105</a></p>

<h2>To Order</h2>
<p>Call us at <a href="tel:206-555-1212">206-555-1212</a></p>
</section>
<h2>Hours</h2>
<p>Open daily from noon to midnight</p>

<section class="menu">
<h2>Our Menu</h2>
<h2>To Order</h2>
<p>Call us at <a href="tel:206-555-1212">206-555-1212</a></p>
</section>

<h3>Meat Pies</h3>
<section class="menu">
<h2 class="title">Our Menu</h2>
<div class="recipe_list">
<h3 class="title">Meat Pies</h3>
<hr>
<dl>
<dt>Bacon &amp; Pinapple</dt>
<dd>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.</dd>
<dt>Duck, Duck, Goose</dt>
<dd>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.</dd>
<dt>The Bambi</dt>
<dd>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!</dd>
<div class="single_recipe">
<strong>Bacon &amp; Pinapple</strong>
<p>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.</p>
</div>
<div class="single_recipe">
<strong>Duck, Duck, Goose</strong>
<p>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.</p>
</div>
<div class="single_recipe">
<strong>The Bambi</strong>
<p>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!</p>
</div>

</dl>

</dl>
</div>
<div class="recipe_list">
<h3>Veggie Pies</h3>
<hr>
<dl>
<dt>Forest Floor</dt>
<dd>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.</dd>
<dt>Green Monster</dt>
<dd>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?</dd>
<dt>Caprese</dt>
<dd>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!</dd>
<strong>Forest Floor</strong>
<p>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.</p>
<strong>Green Monster</strong>
<p>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?</p>
<strong>Caprese</strong>
<p>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!</p>
</dl>
</section>
</div>


</section>

<section class="about">
<h2>About Us</h2>

<section class="about">
<h2>About Us</h2>
<p>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!</p>

<p>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!</p>
<p>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.</p>
</section>

<p>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.</p>
</section>
<footer>
<p>&copy; 2014, Dawg Pizza, <a href="mailto:info@dawgpizza.com">info@dawgpizza.com</a></p>
<p><a href=#>Back to Top &uarr;</a></p>
</footer>
</main>
</body>

<footer>
<p>&copy; 2014, Dawg Pizza, <a href="mailto:info@dawgpizza.com">info@dawgpizza.com</a></p>
<p><a href=#>Back to Top &uarr;</a></p>
</footer>
</main>
</body>
</html>