Skip to content

NW6 | Hadika Malik | HTML-CSS | Module-Project | Week 1 + Week 2 #639

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

NW6 | Hadika Malik | HTML-CSS | Module-Project | Week 1 + Week 2 #639

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
90603d5
draft 1
HadikaMalik Sep 27, 2023
a829614
draft 1
HadikaMalik Sep 27, 2023
4764489
draft 2
HadikaMalik Sep 28, 2023
94623e8
draft2
HadikaMalik Sep 28, 2023
d22b047
final version
HadikaMalik Sep 30, 2023
5fd3daf
level 2 feature homepage draft 1
HadikaMalik Oct 4, 2023
8d52894
homepage addition
HadikaMalik Oct 5, 2023
316c426
trial for feedback css styling
HadikaMalik Oct 6, 2023
229b06f
feedback implemented added homepage feature
HadikaMalik Oct 9, 2023
83e2062
speechmarks colour added
HadikaMalik Oct 9, 2023
59f1491
semantic html
HadikaMalik Oct 9, 2023
daa5cd5
semantic htmls draft
HadikaMalik Oct 11, 2023
e726eb2
form completed, radio check button arrow left
HadikaMalik Oct 13, 2023
4a87ccf
final version
HadikaMalik Oct 17, 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
202 changes: 193 additions & 9 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,198 @@ body {
-webkit-font-smoothing: antialiased;
}

/**
* Add your custom styles below
*
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/
h1,
h2,
h3,
h4,
h5,
h6,
p{
font-weight: lighter;
}

.header{
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
margin: auto;
background-color:#f9f9f9;
}

.header_logo{
width: 20px;
height: 10rem;
margin-left: 80px;
}

nav{
margin-right: 80px;
}

.navigation_list{
display: flex;
align-items: center;
list-style: none;
}

.navigation_item{
padding: 20px;
font-size: large;
}

.navigation_link{
text-decoration: none;
color: #999ea5;
}

.navigation_link1{
text-decoration: none;
color: #62656b;
}

.navigation_link:hover, .navigation_link1:hover{
color: #e08464;
}

.hero{
background-image: url(../img/first-background.jpg);
background-repeat: no-repeat;
background-position: center;
color: white;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
font-size: xx-large;
height: 700px;
}

main h1{
margin: 0 0 -1rem 0;
}

.orange-button{
background-color: #e0633a;
border: none;
color: white;
padding: 15px 35px;
border-radius: 5px;
font-size: 18px;
font-weight: lighter;
width: min-content;
text-wrap: nowrap;
}

.second_heading{
text-align: center;
margin-top: 5rem;
font-size: 35px;
}

.container{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4rem;
}

.images{
width: 100px;
padding-bottom: 20px;
}

.article_title{
font-size: 16px;
text-wrap: nowrap;
font-weight:410;
}

.articles{
padding: 20px 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.footer{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.footer p {
font-size: 20px;
}

.Join{
font-weight: 400;
}

.copyright{
color: #bcbec3;
}

.footer_img{
padding: 10px;
width: 20px;
height: 20px;
border: solid 1px lightgray;
border-radius: 50%;
margin: 5px;
}

hr{
width: 90%;
border: 0px;
border-top: solid 1px #e4e6ea;
}

.feature{
width: 90%;
margin: auto;
display: flex;
align-content: center;
margin-bottom: 5rem;
}


.feedback{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fcefeb;
}

.speechmarks{
text-wrap: wrap;
text-align: center;
font-size: 35px;
font-weight: 400;
font-style: italic;
padding: 0px 180px;
}

.feedback span{
color: #e0633a;
font-size: 40px;
font-style: italic;
}

.homepage-feature{
width: 40vw;
object-fit:cover;
}

.aside-img{
width: 50vw;
}

.name{
display: flex;
flex-direction: row;
}
109 changes: 106 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,113 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<header class="header">
<a href="#">
<img
src="img/karma-logo.svg"
alt="karma logo"
class="header_logo"
/>
</a>
<nav>
<ul class="navigation_list">
<li class="navigation_item">
<a class="navigation_link1" href="#">Meet Karma</a>
</li>
<li class="navigation_item">
<a class="navigation_link" href="#">How it Works</a>
</li>
<li class="navigation_item">
<a class="navigation_link" href="#">Store</a>
</li>
<li class="navigation_item">
<a class="navigation_link" href="#">Blog</a>
</li>
<li class="navigation_item">
<a class="navigation_link" href="#">Help</a>
</li>
<li class="navigation_item">
<a class="navigation_link" href="#">Login</a>
</li>
</ul>
</nav>
</header>

<!-- 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 -->
<main class="content">
<section class="hero">
<h1>Introducing Karma</h1>
<p>Bring WiFi with you, everywhere you go.</p>
<button class="orange-button">Learn More</button>
Copy link
Copy Markdown

@bunday bunday Oct 5, 2023

Choose a reason for hiding this comment

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

this class orange-button doesnt exist in your css, you can remove unused classes. Also, this button seems to have a border width on it, can you remove it?

</section>
<section class="points">
<h2 class="second_heading">Everyone needs a little Karma.</h2>

<section class="container">
<article class="articles">
<img
class="images"
src="img/icon-devices.svg"
alt="devices image"
/>
<p class="article_title">Internet for all devices</p>
</article>

<article class="articles">
<img
class="images"
src="img/icon-coffee.svg"
alt="devices image"
/>
<p class="article_title">Boost your productivity</p>
</article>

<article class="articles">
<img
class="images"
src="img/icon-refill.svg"
alt="devices image"
/>
<p class="article_title">Pay as You Go</p>
</article>
</section>

</section>

<section class="feature">
<img
class="homepage-feature"
src="level-2/homepage-feature.png"
alt="happy woman"
/>

<article class="feedback">
<p class="speechmarks"><span>"</span>Wherever I am, I just don't worry about my connection anymore!<span>"</span></p>
<button class="orange-button">Get Karma today</button>
</article>
</section>

</main>
<hr>
Copy link
Copy Markdown

@bunday bunday Oct 5, 2023

Choose a reason for hiding this comment

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

the color for this element is a bit different

<footer class="footer">
<section class="footer_content">
<p class="Join">Join us on</p>
<img
class="footer_img"
src="img/twitter-icon.svg"
alt="twitter-icon"
/>
<img
class="footer_img"
src="img/facebook-icon.svg"
alt="facebook-icon"
/>
<img
class="footer_img"
src="img/instagram-icon.svg"
alt="instagram-icon"
/>
<p class="copyright">@Karma Mobility Inc.</p>
</section>
</footer>
</body>
</html>
Loading