Skip to content
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

NW6/Sabella-Fisseha/ HTML-CSS-Module-project-karma/week 2 #641

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

NW6/Sabella-Fisseha/ HTML-CSS-Module-project-karma/week 2 #641

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a66ad13
Karma Website
Sabella-8 Sep 29, 2023
8f2114c
svg to img
Sabella-8 Sep 30, 2023
02ce7aa
Karma Project
Sabella-8 Oct 6, 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
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 @@
{
"liveServer.settings.port": 5501
}
Empty file added How.html
View file
Open in desktop
Empty file.
Empty file added blog.html
View file
Open in desktop
Empty file.
0 img/first-background.jpg → css/first-background.jpg
100755 → 100644
View file
Open in desktop
File renamed without changes
149 changes: 145 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,147 @@ body {
*
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/
.nav {
display: flex;
margin: 20px;
justify-content: space-between;
}
.navigation {
margin-right: 50px;
margin-top: 20px;
display: flex;
text-align: end;
gap: 30px;
justify-content: end;
}

a {
color: black;
text-decoration: none;
}
a:hover {
color: rgb(250, 107, 55);
}
.first_section {
background-image: url("first-background.jpg");
padding: 150px;
padding-bottom: 200px;
margin-top: 30px;
text-align: center;
color: white;
font-size: 20px;
}
.first_section h1 {
font-weight: lighter;
font-size: 40px;
}
p {
font-weight: lighter;
font-size: 20px;
}
.dev_cof_ref_ {
height: 150px;
width: 150px;
}
.tw_fa_in_ {
height: 30px;
width: 30px;
padding: 25px;
}
.second_section {
display: flex;
gap: 100px;
}
.second_second {
padding: 50px;
}
#seco1 {
padding-left: 200px;
}
.pic_section {
display: flex;
margin-bottom: 80px;
background-color: rgb(250, 214, 220);
font-weight: lighter;
}

.pic_par {
padding-top: 60px;
padding-left: 100px;
font-size: 42px;
text-align: center;
margin-right: 95px;
}
.button_karma,
.fir_b {
margin-top: 40px;
font-size: 20px;
padding: 10px 15px;
color: white;
background-color: rgb(250, 107, 55);
border-radius: 5px;
border: none;
}
.last_section {
text-align: center;
}
.sec_h1 {
font-weight: lighter;
text-align: center;
margin-top: 80px;
}
.quo {
color: rgb(250, 107, 55);
}
hr {
width: 90%;
}
.inp_all {
margin: 20px;
padding: 20px;
}
form {
margin: 10px;
}
.rad {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.all_section {
display: flex;
}
.stor_h {
margin-left: 60px;
font-size: 35px;
color: rgb(250, 107, 55);
}
.forname {
display: flex;
gap: 20px;
}

input,
select {
margin-top: 10px;
margin-bottom: 10px;
}
#address,
#address2 {
width: 81%;
}
.post {
margin-left: 20px;
}
.post input {
width: 100px;
}
#city {
padding: 3px;
width: 250px;
}
.footimg img {
width: 30px;
height: 30px;
padding: 21px;
}
Empty file added help.html
View file
Open in desktop
Empty file.
0 level-2/homepage-feature.png → homepage-feature.png
View file
Open in desktop
File renamed without changes
87 changes: 76 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,84 @@
<!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 -->
<header>
<nav class="nav">
<nav >
<img src="favicon.ico" >
</nav>
<nav class="navigation">
<a href="meet.html">Meet Karma</a>
<a href="/How.html">How it Works</a>
<a href="store.html">Store</a>
<a href="blog.html">Blog</a>
<a href="help.html">Help</a>
<a href="log.html">Log in</a>
</nav>
</nav>
</header>
<main>
<section class="first_section">
<h1>Introducing Karma</h1>
<p>Bring WiFi with you, everywhere you go.</p>
<button class="fir_b">Learn More</button>
</section>
<section>
<h1 class="sec_h1">Everyone needs a little karma</h1>
<section class="second_section">
<section class="second_second" id="seco1">
<img src="img/icon-devices.svg">
<p>Internet for all devices</p>
</section>
<section class="second_second">
<img src="img/icon-coffee.svg">
<p>Boost your productivity</p>
</section>
<section class="second_second">
<img src="img/icon-refill.svg">
<p>Pay as you Go</p>
</section>
</section>
</section>
<section class="pic_section">
<img width="500px" height="350" src="homepage-feature.png" />

<p class="pic_par">
<span class="quo">"</span>Wherever I am I just don't worry about my
connection <br />anymore!<span class="quo">"</span>
<br />

</body>
<button class="button_karma">Get Karma today</button>
</p>
</section>
</main>
<footer class="last_section">
<hr />
<p>Join us on</p>
<section class="footimg">
<img src="img/twitter-icon.svg">
<img src="img/facebook-icon.svg">
<img src="img/instagram-icon.svg">
</section>
</section>
</footer>
</body>
</html>
Empty file added log.html
View file
Open in desktop
Empty file.
Empty file added meet.html
View file
Open in desktop
Empty file.
0 ...2/store-image_by-andrew-neel-unsplash.jpg → store-image_by-andrew-neel-unsplash.jpg
View file
Open in desktop
File renamed without changes
126 changes: 126 additions & 0 deletions store.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!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" />
</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>
<nav class="nav">
<nav>
<img src="favicon.ico" />
</nav>
<nav class="navigation">
<a href="meet.html">Meet Karma</a>
<a href="/How.html">How it Works</a>
<a href="store.html">Store</a>
<a href="blog.html">Blog</a>
<a href="help.html">Help</a>
<a href="log.html">Log in</a>
</nav>
</nav>
</header>
<main>
<section class="all_section">
<section>
<h1 class="stor_h"> Order your Karma wifi<br> device today!</h1>
<section class="inp_all">

<section>
<form class="forname">
<section>
<label type="text" for="fname">First name * </label><br>
<input id="fname"><br></section><section>
<label type="text" for="lname">Last name * </label><br>
<input id="lname">
</section>
</form>
</form>
</section>

<section>
<form>
<label type="text" for="address">Address * </label><br>
<input id="address"><br>
<label type="text" for="address2">Address 2 </label><br>
<input id="address2">
</form>
</section>

<section>
<form class="forname">
<section>
<label type="text" for="city" >city * </label><br>
<select id="city">
<option value="Select your city...">Select your city...</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Eritrea">Eritrea</option>
<option value="United Kingdom">United Kingdom</option>
</select>
</section>
<section class="post">
<label type="text" for="postcode">postcode * </label><br>
<input id="postcode">
</section>
</form>
</section>

<section>
<p> select a colour</p>
<form class="rad">
<input type="radio" id="karmaorange" checked="checked" >
Copy link

Choose a reason for hiding this comment

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

shouldn't be checked already.


<label for="karmaorange">Karma orange</label><br>
<input type="radio" id="spacegrey" >
<label for="spacegrey">Space Grey</label><br>
</form>
</section>

<section>
<form>
<input type="checkbox" id="policy" checked="checked">

<label for="policy"> By placing your order you agree to Karma's <span class="quo">Terms and conditions</span>*</span></label><br>
</section>

<button class="button_karma"> Place my order</button>
</section>

</section>


<section> <img height="700px" width="150%" src="store-image_by-andrew-neel-unsplash.jpg"></section>

</section>

</main>
<footer class="last_section">
<hr />
<p>Join us on</p>
<section class="footimg">
<img src="img/twitter-icon.svg">
<img src="img/facebook-icon.svg">
<img src="img/instagram-icon.svg">
</section>
</section>
</footer>
</body>

</html>