Skip to content

nwclass-alex #193

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

Closed
allosaurus1 wants to merge 2 commits into from
Closed

nwclass-alex #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
663a20f
updates
allosaurusss May 23, 2021
a8c6566
update - media queries
allosaurusss May 24, 2021
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
2 changes: 1 addition & 1 deletion css/normalize.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
* user zoom.
*/

html {
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
Expand Down
203 changes: 202 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,21 @@

/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}


body {
font-family: 'Roboto', sans-serif;
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-weight: normal;
line-height: 1.5;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
}

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

nav {
background: white;
padding 5px 20px;
}

ul {
list-style-type: none;
}

a {
color: black;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.menu li {
font-size: 16px;
padding: 15px 5px;
}

.menu li a {
display: block;
}

.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.item {
width: 100%;
text-align: center;
order: 2;
}

.item.active {
display: block;
}

.toggle {
cursor: pointer;
order: 1;
}

.bars {
background: grey;
display: inline-block;
height: 2px;
position: relative;
width: 18px;
}

.bars::before, .bars::after {

@mike-shields-cyf mike-shields-cyf Jun 20, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

nice use of pseudo elements

background: grey;
content: "";
display: inline-block;
height: 2px;
position: absolute;
width: 18px;
}

.bars::before {
top: 5px;
}

.bars::after {
top: -5px;
}

.parallax {
display: flex;
flex-flow: column wrap;
align-items: center;
padding-top: 200px;
padding-bottom: 200px;
background-repeat: no-repeat;
background: url(C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/first-background.jpg);
background-position: center;
width: 100%;
}

.parallax h1, .parallax h3, .parallax button {
text-align: center;

color: white;
}

button {
background-color: orange;
padding: 10px;
border: none;
border-radius: 5%;
}

button:hover {
background-color: white;
color: orangered;
}

h2, p {
text-align: center;
}

.features {
display: flex;
flex-direction: column;
}

.features-1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.features-1 img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}


.social-media, .social-media p {
display: flex;
flex-flow: column wrap;
align-items: center;
}

.social img {
width: 20px;
padding: 10px;
border: 2px solid lightgrey;
border-radius: 50%;
}

footer {
display: flex;
justify-content: center;
}

/* Desktop view */

@media all and (min-width: 768px) {
/* nav bar desktop */
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.logo {
order: 0;
}
.item {
order: 1;
}
.menu li {
padding: 15px 10px;
}
.menu li.button {
padding-right: 0;
}
/* three features desktop */
.features {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.features-1 {
display: grid;
grid-template-columns: auto auto auto;

@mike-shields-cyf mike-shields-cyf Jun 20, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

for repetetive values, consider using repeat(), for example: grid-template-columns: repeat(3, auto);

gap: 60px;
}

.features-1 img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}

@mike-shields-cyf mike-shields-cyf Jun 20, 2021 •
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.

try to use ems/rems wherever it is appropriate, this will improve responsiveness. For example use rems to set font-sizes and ems to set padding, margin & border-radius based on the font size of the current element.

}
50 changes: 45 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,52 @@
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</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 -->

<nav class="navbar">

@mike-shields-cyf mike-shields-cyf Jun 20, 2021 •
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.

nav should be in a <header>

<ul class="menu">
<img src="C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/karma-logo.svg" class="logo" width="20px"/>
<li class="item"><a href="#how">How It Works</a></li>
<li class="item"><a href="#store">Store</a></li>
<li class="item"><a href="#blog">Blog</a></li>
<li class="item"><a href="#help">Help</a></li>
<li class="item"><a href="#login">Login</a></li>
<li class="toggle"><a href="#"><span class="bars"></span></a></li>

@mike-shields-cyf mike-shields-cyf Jun 20, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

The hamburger icon should be within a button, since toggling the menu is an action.

</ul>
</nav>
<main>
<section class="parallax">
<h1>Introducing Karma</h1>
<h3>Bring WiFi with you, everywhere you go.</h3>
<button><a>Learn More</a></button>
</section>
<section class="features">
<h2>Everyone needs a little Karma.</h2>
<div class="features-1">
<div>
<img src="C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/icon-devices.svg"/>
<p>Internet for all devices</p>
</div>
<div>
<img src="C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/icon-coffee.svg"/>
<p>Boost your productivity</p>
</div>
<div>
<img src="C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/icon-refill.svg"/>
<p>Pay as You Go</p>
</div>
</div>
</section>
<section class="social-media">
<div class="social">
<p>Join us on</p>
<img src="C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/twitter-icon.svg"/>
<img src="C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/facebook-icon.svg"/>
<img src="C:/Users/aciun/Documents/GitHub/HTML-CSS-Coursework-Week2/img/instagram-icon.svg"/>

@mike-shields-cyf mike-shields-cyf Jun 20, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

All images should have alt attributes even if it the value is empty.

</div>
</section>
<footer>© Karma Mobility, Inc.</footer>

@mike-shields-cyf mike-shields-cyf Jun 20, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

<footer> should be outside <main>

</main>
</body>
</html>

@mike-shields-cyf mike-shields-cyf Jun 20, 2021

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Overall, good use of semantic HTML tags