Skip to content

London10-Afsha-Hossain-HTML/CSS-Week1 #598

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

London10-Afsha-Hossain-HTML/CSS-Week1 #598

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
debb935
Created the basic HTML layout with some CSS
Afsha10 Feb 10, 2023
922bd30
Made some strange changes
Afsha10 Feb 13, 2023
258619c
Completed the tasks
Afsha10 Feb 13, 2023
42bb502
Corrected logo image location
Afsha10 Feb 14, 2023
143ab22
Completed Level 1 of Karma Clone
Afsha10 Mar 20, 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
154 changes: 154 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,160 @@ body {
-webkit-font-smoothing: antialiased;
}

/* This is the header part */

header {
display: flex;
flex-direction: row;
margin: 1rem;
justify-content: center;
align-items: center;
justify-content: space-between;
}

.logo {
width: 3rem;
height: 3rem;
}

#nav-item1 {
font-weight: bold;
}

.nav-item {
margin: 1rem;
text-align: center;
width: auto;

}

.nav-item:hover {
color: #E0633A;
}

.top-navbar {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 3rem;
}

/* This is the hero section */

.hero {
background-image: url("../img/first-background.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 39rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

h1 {
color: white;
font-weight: lighter;
font-size: 3.25rem;
margin: 0;
}

.hero-text {
color: white;
margin: 1rem;
font-weight: lighter;
font-size: 2rem;
}

.learn-btn {
background-color: #E0633A;
font-size: 1.5rem;
border: none;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.25rem;
margin: 2rem;
}

/* This is the icon section */

.product-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

h2 {
font-weight: lighter;
font-size: 2.5rem;
margin-top: 5rem;
}


.product-nav {
display: flex;

@d-odumosu d-odumosu May 7, 2023

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Hi Afsha, such great job you've done, may i suggest implementing the DRY principle of not repeating code, so you could group all your flex items together.


}

.sevices {
display: flex;
flex-direction: column;
/* border: #E0633A solid 1px; */
width: 14rem;
height: 12rem;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 1rem;

}

.icon {
width: 65%;
height: 65%;
}

.product-descriptions {
margin-top: 2rem;
font-size: 1.25rem;

}


/* This is the footer section */

footer {
border-top: 2px solid #ECEDEE;
/* border: 2px solid #E0633A; */
margin: 2rem 10rem 2rem 10rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.contact-nav {
display: flex;
flex-direction: row;
}

.social-media-btn {
border-radius: 5em;
background-color:transparent;
padding: .75rem 1rem;
border: #EEEFEF solid 2px;
margin: 0 0.45rem;
}

.social-media-links {
width: .75rem;
}

#copyright-section {
color: #9DA1A9;
}

/**
* Add your custom styles below
*
Expand Down
44 changes: 43 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,49 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<header>
<img class="logo" src="./img/karma-logo.svg" alt="brand logo">
<nav class="top-navbar">
<div class="nav-item" id="nav-item1">Meet Karma</div>
<div class="nav-item" >How it Works</div>
<div class="nav-item" >Store</div>
<div class="nav-item" >Blog</div>

@Bedi06 Bedi06 Feb 22, 2023 •
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.

Hi Afsha i'm doing a code review to complete the homework :

What i would suggest is usig ul tag to group the navigation items, add aria-label attributes to the nav and ' a' tags to improve accessibility for screen readers, and used descriptive text for each navigation item.
Use appropriate HTML tags: The nav tag should be used to wrap the navigation links, and each navigation item should be an a tag with appropriate attributes.
Add href attributes to each navigation item to create clickable links.
Use descriptive text for each navigation item that conveys its purpose to users, and avoid using generic or ambiguous text.
Adding aria-label attributes to the nav and 'a' tags to improve accessibility for screen readers.

<div class="nav-item" >Help</div>
<div class="nav-item" >Login</div>
</nav>
</header>
<section class="hero">
<!-- <img class="hero-img" src="../img/first-background.jpg"> -->
<h1>Introducing Karma</h1>
<p class="hero-text">Bring WiFi with you, everywhere you go</p>
<button class="learn-btn">Learn More</button>
</section>
<section class="product-section">
<h2>Everyone needs a little Karma.</h2>
<div class="product-nav">
<div class="sevices">
<img class="icon" src="./img/icon-devices.svg" alt="icon of desktop screen, tablet and mobile phone">
<p class="product-descriptions">Internet for all devices</p>
</div>
<div class="sevices">
<img class="icon" src="./img/icon-coffee.svg" alt="icon of a cup with steam on top">
<p class="product-descriptions">Boost your productivity</p>
</div>
<div class="sevices">
<img class="icon" src="./img/icon-refill.svg" alt="icon of a mobile device charging">
<p class="product-descriptions">Pay as You Go</p>
</div>
</div>
</section>
<footer>
<p class="footer-text">Join us on</p>
<div class="contact-nav">
<button class="social-media-btn"><img class="social-media-links" src="./img/twitter-icon.svg"></button>
<button class="social-media-btn"><img class="social-media-links" src="./img/facebook-icon.svg"></button>
<button class="social-media-btn"><img class="social-media-links" src="./img/instagram-icon.svg"></button>
</div>
<p id="copyright-section">© Karma Mobility, Inc.</p>
</footer>
<!-- 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 -->
Expand Down