Skip to content

Level3 #2

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 8 commits into
base: master
Choose a base branch
from
Open

Level3 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
e0175da
last change
SanaKhiari Aug 26, 2022
e28e749
home-page mobil
SanaKhiari Aug 30, 2022
039872b
home-page mobil
SanaKhiari Aug 30, 2022
613a93c
home-page mobil mod
SanaKhiari Aug 30, 2022
b62959f
store-page mobil
SanaKhiari Aug 30, 2022
7eab2a3
store-page mobil
SanaKhiari Aug 30, 2022
08de2ed
mob
SanaKhiari Sep 1, 2022
f08145b
mob
SanaKhiari Sep 1, 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
78 changes: 61 additions & 17 deletions css/store.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ body {
main{
width: 100%;
}
.header .logo{
width: 50px;
}

img{
width: 50%;
float: right;
Expand All @@ -16,25 +20,24 @@ form{
}
.store-form{
margin-top: 80px;
width: 40%;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: justify;
margin-left: 5%;
margin-right: 5%;
text-align: flex-start;
}
.store-form h1{
text-align: center;
margin-top: 60px;
font-size: 45px;
font-weight: 500;
letter-spacing: 1px;
font-weight: 400;
color: #cc5500;
}
.store-form .input-box{
margin-bottom:30px ;
width: 100%;
font-weight: 500;
}
.store-form .input-group{
display: flex;
Expand All @@ -46,13 +49,15 @@ form{
border: 2px solid #686868;
border-radius: 5px;
width: 90%;
height: 35px;
height: 45px;

}
.store-form .input-box select{
border: 2px solid #686868;
border-radius: 5px;
width: 95%;
height: 40px;
height: 50px;
color: #686868;
}
.store-form .check-box input{
border: 2px solid #686868;
Expand All @@ -69,7 +74,7 @@ label {
width: 40%;
background: hwb(25 7% 3% / 0.943);
padding: 15px 35px;
margin: 30px;
margin-top: 30px;
border: 0;
border-radius: 3px;
letter-spacing: 1px;
Expand Down Expand Up @@ -114,13 +119,6 @@ label {
.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;
}
Expand Down Expand Up @@ -148,10 +146,56 @@ label {

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

@media screen and (max-width:768px){
.right-image{
margin-top: 1250px;
width:100%
}
.store-form{
position: absolute;
width: 100%;
}
.store-form h1{
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.input-group{
flex-direction: column;
width: 100%;
}
.radio-group{
flex-direction: column ;
align-items: flex-start;
}
.radio{
margin-bottom: 0;
}
.postCode{
width: 40%;
}
.store-form{
width: 80%;
}
.check-box p{
margin-left: 15px;
}
.check-box{
margin-top: 40px;
}

.store-form .button{
width: auto;
padding: 25px 50px;
margin-left: 30%;
}

}
103 changes: 90 additions & 13 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,22 @@ body {
*/


header{
.header{
top: 0;
left: 0;
position: fixed;
height: 80px;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #F5F5F5;
z-index: 1000;
}
header .logo{
margin-left: 60px;
}
.header .logo{
margin-left: 40px;
width: 30px;
}
ul{
display: flex;
list-style-type: none;
Expand All @@ -50,12 +51,14 @@ ul li a:hover{
li a:hover::after{
width: 100%;
}

.menu-hamburger{
display: none;
}
.content-up{
padding-top: 80px;
background-image: url("../img/first-background.jpg");
width: 100%;
height: 650px;
height: 650px;
display: flex;
flex-direction: column;
align-items: center;
Expand Down Expand Up @@ -121,6 +124,7 @@ footer{
bottom: 0;
width: 100%;
background-color: white;
margin-top: 80px;
}
footer .footer-content h4{
font-size: large;
Expand All @@ -129,8 +133,8 @@ footer .footer-content h4{

footer .footer-content ul li a img {
border: 1px solid #D3D3D3;
border-radius: 40%;
padding: 7px ;
border-radius: 60%;
padding: 5px ;
opacity: 0.7;

}
Expand All @@ -147,9 +151,7 @@ footer .footer-bottom{
align-items: center;
}
.new-section-img{
width: 35%;


width: 35%;
}
.new-section .new-right{
display: flex;
Expand All @@ -172,10 +174,85 @@ footer .footer-bottom{
border: none;
font-weight: 600;
text-transform: capitalize;
border-radius: 5px;
border-radius: 10px;

}
.new-section span{
color: #cc5500;

}
@media screen and (max-width:768px) {
.header ul{
flex-direction: column;
position: absolute;
top: 55px;
right: 0;
background-color: #F5F5F5;
font-size: 20px;
width: 100%;
text-align: center;
display: none ;
}
.header li{
margin-top: 10px;
}
.header .logo{
position: absolute;
left: 25px;
width: 25px;
}
.menu-hamburger{
display:block;
position: absolute;
top: 25px;
right: 20px;
}
.active{
display: block;
}
.content-up{
background-size: 100% 100%;
}
.content-up h1 {
align-items: center;
text-align: center;
margin-top: 60px;
font-size: 50px;
}
.content-up p {
font-size: 30px;
}
.Learn-More-button{
padding: 25px 40px;
font-size: x-large;
font-weight: lighter;
}
.content-down .row1{
flex-direction: column;
height: 50%;
margin-top: 50px;
margin-bottom: 50px;
}
.new-section{
flex-direction: column;
}
.new-section img{
width: 100%;
height: auto;
}
.new-section p{
margin: 70px 55px ;
padding: 25px;
text-align: center;
font-weight: 400;
}
.new-section button{
display: flex;
align-items: center;
padding: 25px 65px;
margin-bottom: 70px;
font-size: x-large;
font-weight: 400;
}

}
42 changes: 27 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,28 @@
<!-- 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>
<div class="logo">
<img src="./img/karma-logo.svg" alt="logo" >
</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>
<div class="header">
<div class="logo">
<img src="../img/karma-logo.svg" alt="logo" >
</div>
<div class="container">
<div class="nav-list" id="nav-bar" ></div> <!--id="nav-bar"-->
<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 class="menu-hamburger" id="hamburger-button">
<img src="../level-3/menu-hamburger.svg" alt="" height="35px" width="35px" >
</div>
</div>
</div>
<div class="content-up">
<h1>Introducing Karma</h1>
<p>Bring WiFi with you, everywhere you go.</p>
Expand Down Expand Up @@ -81,4 +86,11 @@ <h4>Join us on</h4>
</div>
</footer>
</body>
<script>
const hamburgerButton = document.getElementById('hamburger-button');
const navList = document.getElementById('nav-bar');
hamburgerButton.addEventListener('click', ()=>{
navList.classList.toggle('active');
})
</script>
</html>
Loading