Skip to content

NW6 | Fikret Ellek | HTML-CSS | Module-Project | Week 1-2 #649

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

NW6 | Fikret Ellek | HTML-CSS | Module-Project | Week 1-2 #649

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
95b7050
html elements created
fikretellek Oct 3, 2023
c5a23cb
header style added - css, few lines updated - html
fikretellek Oct 3, 2023
7d151a4
main section 1 css created, few changes in html
fikretellek Oct 4, 2023
d805ac6
article are style added, few changes in html
fikretellek Oct 4, 2023
878dce2
footer style added, hr added to html
fikretellek Oct 4, 2023
1466f20
formatted code, last version
fikretellek Oct 4, 2023
1b743fd
nav elements hover function added
fikretellek Oct 7, 2023
c9bf7e0
home page extension added, few changes updated
fikretellek Oct 13, 2023
f2ce152
store page created, few updates on index header
fikretellek Oct 13, 2023
75d15da
store page edited
fikretellek Oct 13, 2023
b86666c
checkmark updated
fikretellek Oct 14, 2023
0925812
finished mobile query
fikretTest Nov 9, 2023
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
151 changes: 147 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 @@ -15,5 +14,149 @@ body {
*
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/
:root {
--gap: 2vh;
--sectionHeight: 90vh;
--headerLineSize: calc(3.5vw + 25px);
--subHeaderLineSize: calc(2vw + 15px);
--logoColor: #e0633a;
--reverseColor: white;
--color: black;
--navColor: rgb(150, 150, 150);
}

body {
font-weight: 400;
}
main {
margin: 0;
}

h3 {
color: var(--reverseColor);
font-size: var(--headerLineSize);
font-weight: 100;
margin: var(--gap);
}

h4 {
color: var(--reverseColor);
font-size: var(--subHeaderLineSize);
font-weight: 100;
margin: var(--gap);
}
Copy link

@musayuksel musayuksel Oct 4, 2023

Choose a reason for hiding this comment

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

As we discussed last week, there is no need for you to repeat yourself. For ex

//common styles
h3,h4 {
  color: var(--reverseColor);
  font-size: var(--headerLineSize);
  font-weight: 100;
  margin: var(--gap);
}
h4 {//override font size only 
font-size: var(--subHeaderLineSize);
}


/* header styles */

header {
margin: 3vh 9vw;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.karmaIcon {
height: 60px;
}
nav ul {
list-style: none;
display: flex;
flex-direction: row;
gap: 2.5vw;
padding: 0;
}
nav ul li:nth-child(1) {
color: rgb(75, 75, 75);
font-weight: 500;
}
li {
font-size: 1.5vw;
color: var(--navColor);
}

/* first section styles */

.main-area {
height: var(--sectionHeight);
background-position: center;
background-size: cover;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.main-area button {
margin: calc(3 * var(--gap));
font-size: calc(var(--subHeaderLineSize) / 2);
color: var(--reverseColor);
background-color: var(--logoColor);
padding: calc(1.5 * var(--gap)) calc(3 * var(--gap));
border: none;
border-radius: 10px;
}

/* second section styles */
.article-area {
height: var(--sectionHeight);
margin: 0 9vw 5vh 9vw;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.article-area h3 {
margin: 8vh;
color: var(--color);
font-size: calc(var(--headerLineSize) / 1.3);
}

.article-area h4 {
color: var(--color);
font-size: calc(var(--subHeaderLineSize) / 1.3);
}

.article-icon {
height: 25vh;
}

.article-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
text-align: center;
gap: 40px;
}

/* footer styles */
footer {
margin: 0 9vw 5vh 9vw;
text-align: center;
}
.media-logo {
border-radius: 27px;
padding: 10px;
border: var(--navColor) solid 2px;
height: 30px;
margin: 0 5px;
}
footer h5 {
font-size: 1.3vw;

color: var(--color);
font-weight: 300;
margin: 30px;
}
footer h6 {
font-size: 1vw;
color: rgb(150, 150, 150);
font-weight: 200;
margin: 40px 0 100px;
}
hr {
border: var(--navColor) solid 2px;
}
76 changes: 74 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,91 @@
<!DOCTYPE html>
<html lang="en">

<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">
<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 -->


<!-- header part -->
<header>
<img class="karmaIcon" src="./img/karma-logo.svg" alt="karma's icon">
<nav>
<ul>
<li>
Meet Karma
</li>
<li>
How it Works
</li>
<li>
Store
</li>
<li>
Blog
</li>
<li>
Help
</li>
<li>
Login
</li>
</ul>
</nav>
Copy link

@musayuksel musayuksel Oct 4, 2023

Choose a reason for hiding this comment

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

It is suggested to use a tag for each nav item as they will be used as links.
you can put # for now or a related section of the page. For logo img you can navigate to home page as a best practice and better UX

<li>
      <a href="#">Meet Karma </a>
 </li>

</header>

<main>

<!-- first section part -->
<section class="main-area" style="background-image: url(./img/first-background.jpg);" role="img"
Copy link

@musayuksel musayuksel Oct 4, 2023

Choose a reason for hiding this comment

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

It's great to see that you are using semantic elements effectively.

aria-label="half of a man in the frame, mam is sitting at a table and working, tablet and karma device on the table">
<h3>Introducing Karma</h3>
<h4>Bring WiFi with you, everywhere you go.</h4>
<button>Learn More</button>
</section>


<!-- second section part -->
<section class="article-area">
<h3>Everyone needs a little Karma.</h3>
<div class="article-grid">
<img class="article-icon" src="./img/icon-devices.svg" alt="icon of pc, tablet and mobile phone">
<img class="article-icon" src="./img/icon-coffee.svg" alt="icon of a coffee mug with steam coming out">
<img class="article-icon" src="./img/icon-refill.svg" alt="icon of a gas pump from a refill station">
<h4>Internet for all devices</h4>
<h4>Boost your productivity</h4>
<h4>Pay as You Go</h4>
</div>
</section>

</main>
<!-- footer part -->
<footer>
<hr>
<h5>Join us on</h5>
<div>
<img class="media-logo" src="./img/twitter-icon.svg" alt="twitter icon">
Copy link

@musayuksel musayuksel Oct 4, 2023

Choose a reason for hiding this comment

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

Same as the header, it is best practice to add a tag for each social media link.

<img class="media-logo" src="./img/facebook-icon.svg" alt="facebook icon">
<img class="media-logo" src="./img/instagram-icon.svg" alt="instagram icon">
</div>
<h6>@ Karma Mobility, Inc.</h6>
</footer>





</body>
</html>

</html>