Skip to content

Instantly share code, notes, and snippets.

@teethnclaws

teethnclaws/index.html

Created October 23, 2016 00:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save teethnclaws/a9ef39e3448101326093da9cd93d147a to your computer and use it in GitHub Desktop.
Save teethnclaws/a9ef39e3448101326093da9cd93d147a to your computer and use it in GitHub Desktop.
Download ZIP
Test Gist
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- for this project we've linked to a css we downloaded called normalize & placed it in the vendor folder
For an unspoken reason, we are required to list this one first -->
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<!-- copy and paste or highlight and used ctrl + D to copy.
The grid used is an augmented file pulled from responsivegridsystem.com -->
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<!-- after downloading icons fonts and css files from ionicons.com, we are able to add them to the page -->
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<!-- for this project we've linked to a specific css file in the resources folder that we created -->
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<!-- pulled this from Google Fonts, cutomizing the font type Lato -->
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400,400i,700" rel="stylesheet">
<title>Megan's Omnifood Udemy Project</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="Omnifood (white) Logo" class="logo">
<ul class="main-nav">
<li><a href="#">Food Delivery</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">Our Cities</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food. <br>Hello super healthy meals.</h1>
<a class="btn btn-full" href="#">I'm Hungry</a>
<a class="btn btn-ghost" href="#">Show Me More</a>
</div>
</header>
<!-- like headers, sections are containers -->
<section class="section-features">
<div class="row">
<h2>Get food fast &mdash; not fast food.</h2>
<!-- watch copy and pasting things like apostrophies and slashes. They need to be replaced with typed ' -->
<p class="long-copy">Hello, we're Omnifood, your new premium food delivery service.
We know you're always busy. No time for cooking. So let us take care of that,
we're really good at it, we promise!</p>
</div>
<div class="row">
<!-- we have to create a col div, using the grid.css, and there will be four of them in this example embedded within the row class -->
<div class="col span-1-of-4 box">
<!-- after downloading icons from ionicons.com, we add them to the page by placing them in an i class"" -->
<i class="ion-android-calendar icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>Never cook again! We really mean that. Our subscription plans include up to 365 days/year
coverage. You can also choose to order more flexibly if that's your style.</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-clock icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>You're only twenty minutes away from your delicious and super healthy meals delivered
right to your home. We work with the best chefs in each town to ensure that you're 100% happy.</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-earth icon-big"></i>
<h3>100% organic</h3>
<p>All our vegetables are fresh, organic and local.
Animals are raised without added hormones or antibiotics.
Good for your health, the environment, and it also tastes better!</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-fork icon-big"></i>
<h3>Order anything</h3>
<p>We don't limit your creativity, which means you can order whatever you feel like.
You can also choose from our menu containing over 100 delicious meals. It's up to you!</p>
</div>
</div><!-- end of row div -->
</section>
<!-- start of new section, lecture 43 -->
<section class="section-meals">
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Simple italian pizza with cherry tomatoes">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
<!-- start of 2nd meal-showcase -->
<ul class="meals-showcase clearfix">
<li>
<figure class="meal-photo">
<img src="resources/img/5.jpg" alt="Paleo beef steak with vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/6.jpg" alt="Healthy baguette with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/7.jpg" alt="Burger with cheddar and bacon">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/8.jpg" alt="Granola with cherries and strawberries">
</figure>
</li>
</ul>
</section>
<!-- end of meal-showcase with images -->
<!-- start of section 3 -->
<section class="section-steps">
<div class="row">
<h2>How it works &mdash; Simple as 1, 2, 3</h2>
</div>
<div class="row">
<div class="col span-1-of-2 steps-box">
<img src="resources/img/app-iPhone.png" alt="Omnifood app on iPhone" class="app-screen">
</div>
<div class="col span-1-of-2 steps-box">
<div class="works-step">
<div>1</div>
<p>Choose the subscription plan that best fits your needs and sign up today.</p>
</div>
<div class="works-step">
<div>2</div>
<p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
</div>
<div class="works-step">
<div>3</div>
<p>Enjoy your meal after less than 20 minutes. See you the next time!</p>
</div>
<a href="#" class="btn-app"><img src="resources/img/download-app.svg" alt="Apple App Store Button"></a>
<a href="#" class="btn-app"><img src="resources/img/download-app-android.png" alt="Google Play Store Button"></a>
</div> <!-- end of 2nd col span 1 of 2 -->
</div> <!-- end of row -->
</section>
<!-- end of section-steps -->
<section class="section-cities">
<div class="row">
<h2>We're currently in these cities</h2>
</div>
<div class="row">
<!-- so these are styled the same as the above col + box -->
<div class="col span-1-of-4 box">
<img src="resources/img/lisbon-3.jpg" alt="Lisbon">
<h3>Lisbon</h3>
<div class="city-feature">
<i class="ion-happy-outline icon-small"></i>
1600+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star icon-small"></i>
60+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter-outline icon-small"></i>
<a href="#">@omnifood_lx</a>
</div>
</div>
<!-- so these are styled the same as the above col + box -->
<div class="col span-1-of-4 box">
<img src="resources/img/san-francisco.jpg" alt="San Francisco, California">
<h3>San Francisco</h3>
<div class="city-feature">
<i class="ion-happy-outline icon-small"></i>
3700+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star icon-small"></i>
160+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter-outline icon-small"></i>
<a href="#">@omnifood_sf</a>
</div>
</div>
<!-- so these are styled the same as the above col + box -->
<div class="col span-1-of-4 box">
<img src="resources/img/berlin.jpg" alt="Berlin, Germany">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-happy-outline icon-small"></i>
2300+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star icon-small"></i>
110+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter-outline icon-small"></i>
<a href="#">@omnifood_berlin</a>
</div>
</div>
<!-- so these are styled the same as the above col + box -->
<div class="col span-1-of-4 box">
<img src="resources/img/london.jpg" alt="London, England">
<h3>Berlin</h3>
<div class="city-feature">
<i class="ion-happy-outline icon-small"></i>
1200+ happy eaters
</div>
<div class="city-feature">
<i class="ion-star icon-small"></i>
50+ top chefs
</div>
<div class="city-feature">
<i class="ion-social-twitter-outline icon-small"></i>
<a href="#">@omnifood_london</a>
</div>
</div>
</div><!-- end of row class in cities -->
</section>
<!-- end of cities -->
<!-- start of customer testimonials section -->
<section class="section-testimonials">
<div class="row">
<h2>Our customers can't live without us</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<blockquote>
Omnifood is just awesome! I just launched a startup which leaves me with no time for cooking,
so Omnifood is a life-saver. Now that I got used to it, I couldn't live without my daily meals!
<cite><img src="resources/img/customer-1.jpg" alt="customer image">Alberto Duncan</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
Inexpensive, healthy and great-tasting meals, delivered right to my home.
We have lots of food delivery here in Lisbon, but no one comes even close to Omifood.
Me and my family are so in love!
<cite><img src="resources/img/customer-2.jpg" alt="customer image">Joana Silva</cite>
</blockquote>
</div>
<div class="col span-1-of-3">
<blockquote>
I was looking for a quick and easy food delivery service in San Franciso.
I tried a lot of them and ended up with Omnifood. Best food delivery service in the Bay Area.
Keep up the great work!
<cite><img src="resources/img/customer-3.jpg" alt="customer image">Milton Chapman</cite>
</blockquote>
</div>
</div>
</section>
<!-- end of customer testimonials section -->
<!-- start of sign up section -->
<section class="section-plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
<div class="row">
<div class="col span-1-of-3">
<div class="plan-box">
<div><!-- the plan -->
<h3>Premium</h3>
<!-- giving this paragraph a class makes it easier to isolate later for this project -->
<!-- span allows us to style the element within the paragraph easier -->
<p class="plan-price">$399 <span>/ month</span></p>
<p class="plan-price-meal">That's only $13.30 per meal</p>
</div>
<div><!-- the details -->
<ul>
<!-- using prestyle class icon-small alongside these icons as well -->
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal every day</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
<!-- reusing styled button class from earlier -->
<a href="#" class="btn btn-full">Sign Up Now</a>
</div>
</div><!-- end of plan box div -->
</div><!-- col div -->
<div class="col span-1-of-3">
<div class="plan-box">
<div><!-- the plan -->
<h3>Pro</h3>
<!-- giving this paragraph a class makes it easier to isolate later for this project -->
<p class="plan-price">$149 <span>/ month</span></p>
<p class="plan-price-meal">That's only $14.90 per meal</p>
</div>
<div><!-- the details -->
<ul>
<!-- using prestyle class icon-small alongside these icons as well -->
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal 10 days/month</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order 24/7</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Access to newest creations</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
<!-- reusing styled button class from earlier -->
<a href="#" class="btn btn-ghost">Sign Up Now</a>
</div>
</div><!-- end of plan box div -->
</div><!-- col div -->
<div class="col span-1-of-3">
<div class="plan-box">
<div><!-- the plan -->
<h3>Starter</h3>
<!-- giving this paragraph a class makes it easier to isolate later for this project -->
<p class="plan-price">$19 <span>/ meal</span></p>
<!-- used a special character to create a space so the layout of the plans looks more polished -->
<p class="plan-price-meal"> &nbsp; </p>
</div>
<div><!-- the details -->
<ul>
<!-- using prestyle class icon-small alongside these icons as well -->
<li><i class="ion-ios-checkmark-empty icon-small"></i>1 meal</li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Order from 8 am to 12 pm</li>
<li><i class="ion-ios-close-empty icon-small"></i></li>
<li><i class="ion-ios-checkmark-empty icon-small"></i>Free delivery</li>
</ul>
</div>
<div>
<!-- reusing styled button class from earlier -->
<a href="#" class="btn btn-ghost">Sign Up Now</a>
</div>
</div><!-- end of plan box div -->
</div><!-- col div -->
</div><!-- end of row -->
</section>
<!-- end of sign up section -->
</body>
</html>
<!--
Section 7: Contact form
Title: We're happy to hear from you
Fields to include:
Name
Email
How did you find us?
Newsletter
Drop us a line
-->
Raw
style.css
/* ---------------------------Basic Set Up----------------------------------------------*/
/* best to strip out all margins and padding initially */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #FFF;
color: #222222;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
/* created clearfix in lecture 46 to deal with clearing the floats in the meal-showcase ul items so that the
How It Works header would have proper white space between it and the image gallery */
.clearfix {zoom:1}
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
/* --------------------------------Logo & Main Text-----------------------------*/
header {
/* sets up and darkens background image, in this case with 0.7 or 70% transparency, without needing a separate overlay */
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
/* fills the screen, than reduces the image to fit within the viewport while also positioning it center */
background-size: cover;
background-position: center;
height: 100vh;
/* this locks the background image in place like parallax */
background-attachment: fixed;
}
.logo {
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.hero-text-box {
/* vertically and horizontally centering the contents of this box */
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
/* translate the element's half of it's width and height */
transform: translate(-50%, -50%);
}
/* --------------------------------Buttons-----------------------------*/
/* common button style; both buttons have this section in common psuedo classes of link and visited were added to the button classesso that when they are clicked they will always look the same */
.btn:link,
.btn:visited {
/* changing the a element from an inline element to an inline block */
display: inline-block;
/* top and bottom, left and right */
padding: 10px 30px;
font-weight: 300;
/* removing underline from button link */
text-decoration: none;
/* create rounded-edge buttons, set a high border radius */
border-radius: 200px;
/* creating a transition property for the buttons so that the color change is gradual */
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
/* individual button styles - including psuedo classes of link and visited */
.btn-full:link,
.btn-full:visited {
background-color: #e67e22;
/* because of the box-model of content + padding + border, the two buttons will appear to be the same size, thus I have to apply the same border to the smaller of the two to adjust for that */
border: 1px solid #e67e22;
color: #FFF;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
/* button text color was originally white, applied under .btn */
color: #e67e22;
}
/* we can also define how the buttons will look when they are hovered over and active */
.btn:hover,
.btn:active {
/* this color will appear when the button is hovered over or active (we used the 0to255.com tool */
background-color: #924d10;
}
/* these are the changes that occur when the button is hovered over or active */
.btn-full:hover,
.btn-full:active {
border: 1px solid #e67e22;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #e67e22;
color: #FFF;
}
/* ---------------------------Reusable Components--------------------------------*/
/* our content will be in rows; the only value defined in pixels */
.row {
max-width: 1140px;
/* top & bottom 0, left & right auto */
margin: 0 auto;
}
section {
/* top & bottom, left & right; using padding in lieu of margin because there will be colors used later */
padding: 80px 0;
}
/* we DON'T want to make any changes in our grid.css;
so in order to add style to the columns we add box as an additional class */
.box {
padding: 1%;/*to separate the columns a little */
}
/* --------------------------------Paragraphs------------------------------------*/
.long-copy {
line-height: 145%;
width: 70%;
/* with limiting the width to 70%, in this case, the content will not be centered
this we assign a margin-left of 15% as that is half of the remaining 30% */
margin-left: 15%;
}
.box p {
font-size: 90%;
line-height: 145%;
}
/* --------------------------------Icons----------------------------------------*/
/* we added icon-big as an additional class to the icons in order to style them.
You can style icons the same way as text */
.icon-big {
font-size: 350%;
display: block;
color: #e67e22;
margin-bottom: 10px;
}
/* --------------------------------Headings-------------------------------------*/
/* we edit the headings so that the common shared elements are together,
while the individual ones are assigned to each */
h1, h2, h3 {
/* When we use very large text, you should decrease the font weight */
font-weight: 300;
/* changing the text to uppercase, and place in a little spacing */
text-transform: uppercase;
}
h1 {
margin-top: 0;
margin-bottom: 20px;
color: #FFF;
/* we want the size to be relative; example: 200% aka 40px since we set the overall html font to 20px */
font-size: 240%;
word-spacing: 4px;
letter-spacing: 1px;
}
h2 {
font-size: 180%;
word-spacing: 2px;
text-align: center;
margin-bottom: 30px;
letter-spacing: 1px;
}
h2:after {
display: block;
height: 2px;
background-color: #e67e22;
/* the content with a space is required for the :after */
content: " ";
width: 100px;
/* top & bottom, left & right */
margin: 0 auto;
margin-top: 30px;
}
h3 {
font-size: 110%;
margin-bottom: 15px;
}
/* --------------------------------Navigation-----------------------------------*/
.main-nav {
float: right;
/* none removes the bullet points on the list */
list-style: none;
margin-top: 55px;
}
.main-nav li {
/* we make them inline-block so that they are side by side */
display: inline-block;
margin-left: 40px;
}
/* adding link and visited ensures the links will look the same no matter what state it's in */
.main-nav li a:link,
.main-nav li a:visited {
/* top and bottom, left and right padding */
padding: 8px 0;
color: #FFF;
text-decoration: none;
text-transform: uppercase;
/* 18px/20px(current px default) = 0.9 or 90% */
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
/* adding hover and active ensures the links will look the same no matter what state it's in */
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #e67e22;
}
/* ---------------------------Features--------------------------------------*/
.section-features .long-copy {
/* isolating where we want more white space between the paragraph & the columned features */
margin-bottom: 30px;
}
/* --------------------------Meals------------------------------------------ */
.section-meals {
/* removes excess white space between the section-features and the section-meals images */
padding: 0;
}
.meals-showcase {
list-style: none;
width: 100%;
}
.meals-showcase li {
display: block;
/* placing them side by side */
float: left;
/* the width is 25% because I have 4 li items in each list */
width: 25%;
}
.meal-photo {
/* keeps the same width as its parent element this class is contained in */
width: 100%;
/* removes whatever margin is created in the field */
margin: 0;
overflow: hidden;
/* added a black background in the parent class of the meal-photo img so we can make the image appear
darker with an opacity of 70% */
background-color: #000000;
}
.meal-photo img {
opacity: 0.7; /* 70% */
/* keeps the same width as its parent element this class is contained in */
width: 100%;
height: auto;
/* we scale up from 100% to 115% in order to set the base effect for the transform in :hover */
transform: scale(1.15);
/* this makes the scale effect appear smoother + added opacity transition later in lesson */
transition: transform 0.5s, opacity 0.5s;
}
.meal-photo img:hover {
/* returning the opacity to 100% */
opacity: 1;
/* means when we hover, the image will shrink from 115% to 103%. 103% vs 100% so we don't
see a white space appear below the pictures as they scale */
transform: scale(1.03);
}
/* ------------------------- How it Works (responsive section with %'s) ---------------------------- */
.section-steps {
background-color: #F4F4F4;
}
/* this selector rule will isolate changes only to the first of the two steps-box classes we created */
.steps-box:first-child {
/* text-align applies to all inline and inline block elements including images */
text-align: right;
padding-right: 3%;
margin-top: 30px;
}
/* this selector rule will isolate changes only the last of the steps-box classes we created,
in this case the 2nd one as we only created two */
.steps-box:last-child {
padding-left: 3%;
margin-top: 70px;
}
.app-screen {
width: 40%;
}
.works-step {
margin-bottom: 50px;
}
.works-step:last-of-type {
/* while the other worksteps have 50px margins, the last one will have 80px */
margin-bottom: 80px;
}
/* this selector isolates the div, with the numbers in them, so we can style those specifically */
.works-step div {
color: #e67e22;
border: 2px solid #e67e22;
display: inline-block;
/* creating a circle & centering number */
border-radius: 50%;
height: 55px;
width: 55px;
text-align: center;
padding: 5px;
float: left;
font-size: 150%;
margin-right: 25px;
}
/* removes orange border-bottom from city-feature links below, though I could have
called those .city-feature a, etc. and likely had better specificity */
.btn-app:link,
.btn-app:visited {
border: 0;
}
.btn-app img {
/* making both images the same size with an assigned height and an auto width */
height: 50px;
width: auto;
margin-right: 10px;
}
/* ----------------------------Cities Section-------------------------*/
.box img {
/* assigning a width the complete size of the box it is in & set the height to auto */
width: 100%;
height: auto;
margin-bottom: 15px;
}
.city-feature {
margin-bottom: 5px;
}
.icon-small {
/* so I can assign a width */
display: inline-block;
width: 30px;
text-align: center;
color: #e67e22;
font-size: 120%;
margin-right: 10px;
/* how to align text and icons together */
line-height: 120%;
vertical-align: middle;
margin-top: -5px;
}
/*-----------------------------------Links-----------------------------------*/
/* I considered calling this .city-feature a etc.. in order to create specificity */
a:link, a:visited {
text-decoration: none;
color: #e67e22;
padding-bottom: 1px;
border-bottom: 1px solid #e67e22;
/* allows for a slight delay in the change when hovering over this section */
transition: border-bottom 0.3s, color 0.3s;
}
a:hover, a:active {
color: #924d10;
border-bottom: 1px solid transparent;
}
/*-------------------------------Testimonials-----------------------------------*/
.section-testimonials {
/* applying a background image with linear opacity */
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9)), url(img/back-customers.jpg);
/* cover the full width of the browser */
background-size: cover;
color: #FFFFFF;
/* this locks the background image in place like parallax */
background-attachment: fixed;
}
blockquote {
/* creating a space between each of the three testimonials */
padding: 2%;
/* we can apply this style because we defined it in our google fonts when we linked to them */
font-style: italic;
line-height: 145%;
/* the child blockquote:before has a position of absolute, therefore this has to be defined as relative */
position: relative;
/* creating a little space between the title and the testimonials */
margin-top: 40px;
}
/* what we want to appear before the text */
blockquote:before {
/* to place text using css I had to use an ISO glyph */
content: "\201C";
font-size: 500%;
display: block;
/* define top and left attribute for the quote while in the block */
position: absolute;/* the parent, in this case blockquote, has to be relative for this to work*/
/* adjusting the placement of the quotes symbol */
top: -5px;
left: -5px;
}
cite {
font-size: 90%;
margin-top: 25px;
/* we add display block to create a break between the blockquote and the cite + image */
display: block;
}
cite img {
height: 45px;
border-radius: 50%;
margin-right: 10px;
/* this aligns the cite text with the image */
vertical-align: middle;
}
/*-------------------------------Sign Up Pricing Plans-----------------------------------*/
.section-plans {
background-color: #F4F4F4;
}
/* placed inside the columns */
.plan-box {
background-color: #FFFFFF;
border-radius: 5px;
width: 90%;
/* half of the remaining 10% of the parent width, as we assigned this section 90% */
margin-left: 5%;
/* creating box-shadow, first value x-axis, then y-axis, blur, and color */
box-shadow: 0 2px 2px #dddddd;
}
.plan-box div {
padding: 15px;
border-bottom: 1px solid #cccccc;
}
.plan-box div:first-child {
/* creating a subtle background */
background-color: #fcfcfc;
/* reassigning the border-radius we lost in this section */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* centering the buttons */
.plan-box div:last-child {
text-align: center;
border: 0;
}
.plan-price {
font-size: 300%;
margin-bottom: 10px;
font-weight: 100;
color: #e67e22;
}
.plan-price span {
/* span allows us to style the element within the paragraph easier */
/* this span is a child of the plan-price, therefore the aforementioned class will influence it */
font-size: 30%;
font-weight: 300;
}
.plan-price-meal {
font-size: 80%;
}
.plan-box ul {
list-style: none;
}
.plan-box ul li {
/* top, bottom, then left and right */
padding: 5px 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment