Skip to content

Level2 #3

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
SanaKhiari wants to merge 9 commits into
base: level1
Choose a base branch
from
Open

Level2 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
58fc4aa
form half ready
SanaKhiari Aug 19, 2022
c6203f9
form half ready
SanaKhiari Aug 19, 2022
d719273
last modification on radio input
SanaKhiari Aug 20, 2022
8947197
last modification on radio input
SanaKhiari Aug 20, 2022
d078359
index
SanaKhiari Aug 26, 2022
19755a1
index
SanaKhiari Aug 26, 2022
121673a
index
SanaKhiari Aug 26, 2022
7aa9403
checkbox
SanaKhiari Aug 26, 2022
6ae1d16
checkbox
SanaKhiari Aug 26, 2022
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
157 changes: 157 additions & 0 deletions css/store.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
body {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
margin:0;
width: 100%;
}
main{
width: 100%;
}
img{
width: 50%;
float: right;
}
form{
margin-left: 10%;
}
.store-form{
margin-top: 80px;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: justify;
margin-left: 5%;
margin-right: 5%;
}
.store-form h1{
margin-top: 60px;
font-size: 45px;
font-weight: 500;
letter-spacing: 1px;
color: #cc5500;
}
.store-form .input-box{
margin-bottom:30px ;
width: 100%;
}
.store-form .input-group{
display: flex;
align-items: center;
justify-content: space-between;
width: 95%;
}
.store-form .input-box input{
border: 2px solid #686868;
border-radius: 5px;
width: 90%;
height: 35px;
}
.store-form .input-box select{
border: 2px solid #686868;
border-radius: 5px;
width: 95%;
height: 40px;
}
.store-form .check-box input{
border: 2px solid #686868;
border-radius: 5px;
width: 10%;
height: 20px;
}
label {
display: block;
margin-bottom: 3px;
color:#535353;
}
.store-form .button{
width: 40%;
background: hwb(25 7% 3% / 0.943);
padding: 15px 35px;
margin: 30px;
border: 0;
border-radius: 3px;
letter-spacing: 1px;
cursor: pointer;
color: #ffff;
}
.radio-group{
display: flex;
align-items: center;
justify-content: space-between;
width: 60%;
}
.radio{
display: flex;
flex-direction: row;
vertical-align: middle;
margin-top: 15px;
margin-bottom: 30px;
}
.radio input{
display: none;
}
.radio__radio{
width: 20px;
height: 20px;
border: 2px solid #686868;
border-radius: 50%;
box-sizing: border-box;
margin-right: 10px;
padding: 2px;
}
.radio__radio::after{
content: "";
width: 100%;
height: 100%;
display: block;
background: #cc5500;
border-radius: 50%;
transform: scale(0);
transition: transform 0.15s;
}
.radio input:checked + .radio__radio::after{
transform: scale(1);
}
/*.check-box{
display: flex;
justify-content: center ;
align-items: baseline;
text-align:justify;
cursor: pointer;
} */
.check-box p{
color: #535353;
}
.orange-codition{
color: #F28C28;
}
.check-box input{
display: none;
}
.check-box label{
display: flex;
justify-content: center ;
align-items: baseline;
text-align:justify;
cursor: pointer;
}
.checkmark{
width: 23px;
height: 23px;
border: 1.5px solid #686868;
border-radius: 20%;
box-sizing: border-box;
margin-right: 10px;
padding: 1px;

}
.checkmark::after{
content: url(../level-2/checkmark.svg);
display: none;
}
.check-box input:checked + .checkmark::after {
display: block;
}

10 changes: 6 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@
<!-- All the images you need are in the 'img' folder -->
<header>
<div class="logo">
<img src="./img/karma-logo.svg" alt="logo" width="30px" height="30px">
<img src="./img/karma-logo.svg" alt="logo" >
</div>
<div class="container">
<ul>
<li><a href="#" class="current">Meet Karma</a></li>
<li><a href="index.html" class="current">Meet Karma</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Store</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#" class="login_button">login</a></li>
Expand Down Expand Up @@ -57,7 +57,9 @@ <h1>Everyone needs a little Karma.</h1>
<img src="./level-2/homepage-feature.png" alt="" class="new-section-img">
<div class="new-right">
<p><span>"</span>wherever I am, I just don't worry about my connection anymore!<span>"</span></p>
<button class="Get-karma"> Get Karma today</button>
<form>
<button class="Get-karma" formaction="store.html">Get Karma today</button>
</form>
</div>
</div>

Expand Down
110 changes: 110 additions & 0 deletions store.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<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="stylesheet" href="css/store.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<header>
<div class="logo">
<img src="./img/karma-logo.svg" alt="logo" width="30px" height="30px">
</div>
<div class="container">
<ul>
<li><a href="index.html" class="current">Meet Karma</a></li>
<li><a href="#">How it works</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#" class="login_button">login</a></li>

</ul>
</div>
</header>
<main>
<img class="right-image" src="./level-2/store-image_by-andrew-neel-unsplash.jpg" alt="" >
<div class="store-form">
<h1>Order your Karma wifi divice today!</h1>
<form action="#">
<div class="input-group">
<div class="input-box">
<label class="details">First Name*</label>
<input type="text" placeholder="" required>
</div>
<div class="input-box">
<label class="details">Last Name*</label>
<input type="text" placeholder="" required>
</div>
</div>
<div class="input-box">
<label class="details">Adress*</label>
<input type="email" placeholder="" required>
</div>
<div class="input-box">
<label class="details">Adress2*</label>
<input type="email" placeholder="" required>
</div>
<div class="input-group">
<div class="input-box">
<label class="details">City*</label>
<select>
<option>Select your city...</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="input-box">
<label class="details">Post code*</label>
<input type="text" placeholder="" required>
</div>
</div>
<label class="details">Select Color</label>
<div class="radio-group">
<label class="radio">
<input type="radio" value="Karma-orange" name="color" >
<div class="radio__radio"></div>
Karma Orange

</label>
<label class="radio">
<input type="radio" value="Space-grey" name="color">
<div class="radio__radio"></div>
Space Grey

</label>
</div>
<div class="check-box">
<label class="check">
<input type="checkbox" >
<div class="checkmark"></div>
<p class="conditions">By placing your order you agree to <span class="orange-codition"><u>Karma's Terms and Conditions</u></span> *</p>
</label>
</div>
<input type="submit" value="Place my order" class="button" >
</form>
</div>
</main>
<footer>
<div class="footer-content">
<hr>
<h4>Join us on</h4>
<ul class="socials">
<li><a href="#"><img src="./img/twitter-icon.svg" alt="" width="30px" height="30px"></a></li>
<li><a href="#"><img src="./img/facebook-icon.svg" alt="" width="30px" height="30px"></a></li>
<li><a href="#"><img src="./img/instagram-icon.svg" alt="" width="30px" height="30px"></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> &copy; Karma Mobility , Inc</p>
</div>
</footer>
</body>
</html>