Skip to content

London 9 - Andriana Saffo - HTML/CSS - Week 1 & 2 #502

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
AndrianaOS wants to merge 19 commits into
base: master
Choose a base branch
from
Open

London 9 - Andriana Saffo - HTML/CSS - Week 1 & 2 #502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
d4c3b34
HMTL elements added
AndrianaOS Oct 23, 2022
3b36f6e
Update to HTML and CSS
AndrianaOS Oct 23, 2022
46dcbe5
Button updated
AndrianaOS Oct 23, 2022
fa569af
Updated HTML and CSS
AndrianaOS Oct 25, 2022
0724cea
Added additional styling and text
AndrianaOS Oct 25, 2022
896cc1c
Deleted commented out styles
AndrianaOS Oct 26, 2022
20fe91e
Image rendered and footer styled
AndrianaOS Oct 26, 2022
c046357
Included section to add more information
AndrianaOS Oct 27, 2022
33ee6a0
Updated CSS styles
AndrianaOS Oct 31, 2022
e11a86f
Updated CSS styles for extended homepage
AndrianaOS Oct 31, 2022
0076308
Change in HTML and CSS
AndrianaOS Oct 31, 2022
cc12c2e
Included new HTML and CSS
AndrianaOS Nov 1, 2022
f7e96ab
link HTML pages
AndrianaOS Nov 2, 2022
edcc9e9
Changed CSS and HTML
AndrianaOS Nov 5, 2022
894ac1f
Updated HTML and CSS
AndrianaOS Nov 5, 2022
8c67690
Tick box css updated
AndrianaOS Nov 5, 2022
3b6a7b9
Update CSS
AndrianaOS Nov 5, 2022
339f2cf
Update .DS_Store
AndrianaOS Nov 9, 2022
9034b1c
Button and margin edited
AndrianaOS Nov 10, 2022
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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"cSpell.words": ["colour", "guildford", "neel", "organised", "smicon"]
}
152 changes: 148 additions & 4 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@

/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
}

/**
Expand All @@ -16,4 +15,149 @@ body {
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/

/*HEADER STYLES*/

#karma-logo {
width: 25px;
margin-left: 50px;
margin-top: 50px;
margin-bottom: 20px;

@bazmurphy bazmurphy Nov 10, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if you want to make this 1 line instead of 3 you can use the shorthand:
margin: 50px 0 20px 50px;
[top right bottom left]

}

nav {
float: right;

@bazmurphy bazmurphy Nov 10, 2022 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i would recommend trying to make your <header> a flex box
and the <img> (logo) and the <nav> will be the flex children
then separate the flex children using justify-content: space-between to push them to either side of the page (the img to the left and the nav to the right)
you can then apply appropriate padding to flex parent
using float can be quite tricky and cause a lot of headaches and can start doing funky things in terms of page layout if you have multiple floated elements.

margin-top: 50px;
margin-right: 50px;
}

nav a {
margin-right: 40px;
text-decoration: none;
color: gray;
}

#karma-meet {
font-weight: bold;
}
nav a:hover {
color: #c05326;
}

/*CONTENT STYLES*/
h1 {
text-align: center;
color: white;
font-size: 75px;
font-weight: lighter;
}

h2 {
text-align: center;
color: white;
font-weight: lighter;
font-size: 40px;
margin-top: 0;
}

button {
align-content: center;

@bazmurphy bazmurphy Nov 10, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

align-content is a property used to adjust flex/grid cells content horizontally/vertically
in order for this to work the element must also be declared as display: flex or display: grid
but the button is not currently a flex/grid container
maybe i am wrong, but i am assuming you are trying to center the button text with this?

color: white;
background-color: #c05326;
border: none;
border-radius: 8px;
padding: 15px 20px;
/*margin-left: 650px;*/
margin-top: 50px;
}

#first-page {
background-image: url("../img/first-background.jpg");
background-repeat: no-repeat;
background-size: 100%;
padding-bottom: 130px;
padding-top: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.need-karma {
color: black;
font-size: 55px;
}

.icons {
width: 100px;
}

#icon-info {
display: flex;
justify-content: space-evenly;
align-items: center;
text-align: center;
margin-top: 50px;
}

#next-page {
margin-top: 100px;
}

#third-page {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-left: 0;
margin-top: 100px;
}

#quote-button {
background-color: #e0633a1a;
height: 440px;
align-items: center;
justify-content: center;
width: 840px;
text-align: center;
}

.quote {
font-size: 42px;
text-align: center;
font-style: italic;
padding-top: 50px;
width: 550px;
padding-left: 140px;
margin-bottom: 0;
}

span {
color: #e0633a;
}

button a {
text-decoration: none;
color: white;
}

/*STYLING FOR FOOTER*/

footer {
text-align: center;
margin: 50px 70px 0 70px;
border-top: 1px solid #ebebeb;
}

.smicon {
width: 20px;
border: 1px solid #ebebeb;
padding: 10px;
border-radius: 20px;
margin-right: 5px;
}

#copyright {
color: #cccccc;
text-align: center;
margin-bottom: 20px;
}
99 changes: 88 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>Karma</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<!-- All the images you need are in the 'img' folder -->

</body>
<header>
<img src="img/karma-logo.svg" alt="karma logo" id="karma-logo" />
<nav id="nav-bar">
<a href="meet-karma" id="karma-meet">Meet Karma</a>
<a href="works">How it Works</a>
<a href="store.html">Store</a>
<a href="blog">Blog</a>
<a href="help">Help</a>
<a href="login">Login</a>
</nav>
</header>

<main>
<section id="first-page">
<h1>Introducing Karma</h1>
<h2>Bring WiFi with you, everywhere you go.</h2>
<button>Learn More</button>
</section>
<section id="next-page">
<h1 class="need-karma">Everyone needs a little Karma.</h1>
<div id="icon-info">
<article>
<img
src="img/icon-devices.svg"
alt="Picture showing a monitor, phone and tablet"
class="icons"
/>
<p>Internet for all devices</p>
</article>
<article>
<img
src="img/icon-coffee.svg"
alt="Picture showing a steamy teacup"
class="icons"
/>
<p>Boost your productivity</p>
</article>
<article>
<img
src="img/icon-refill.svg"
alt="Picture showing gas pump"
class="icons"
/>
<p>Pay as You Go</p>
</article>
</div>
</section>
<section id="third-page">
<img
src="level-2/homepage-feature.png"
alt="woman on a tablet smiling with a coffee cup on the table"
id="pic"
/>
<article id="quote-button">
<p class="quote">
<span>"</span>Wherever I am, I just don't worry about my connection
anymore!<span>"</span>
</p>
<button><a href="store.html">Get Karma today</a></button>
</article>
</section>
</main>
<footer>
<p>Join us on</p>
<div>
<img src="img/twitter-icon.svg" alt="twitter logo" class="smicon" />
<img src="img/facebook-icon.svg" alt="facebook logo" class="smicon" />
<img src="img/instagram-icon.svg" alt="instagram logo" class="smicon" />
</div>
<p id="copyright">&copy; Karma Mobility, Inc.</p>
</footer>
</body>
</html>
Loading