Skip to content
This repository has been archived by the owner on Oct 26, 2020. It is now read-only.

Homeworks/week2/nosayba #82

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

Homeworks/week2/nosayba #82

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
d79bb3f
first style
nos6 May 25, 2020
68e0dba
second clone
nos6 May 31, 2020
0bad1f7
cloned but not responsive
nos6 Jun 7, 2020
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
240 changes: 225 additions & 15 deletions week2/2-website/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,229 @@

/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 1rem;
}

body {
font-family: 'Roboto', sans-serif;
-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'
*/
line-height:1;
margin:0;
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;

}

.nav-bar ul {
text-align: center;
display:block;
font-size:1.04rem;
margin:0 ;
padding:0 ;
background-color:white;
position: fixed;
width:100%;
height: 4.375rem;
border-bottom: 1px solid #ddd;
}


.nav-bar li {

display:inline-block;
margin-left:1.563rem;
margin-top:1.7rem;
list-style-type:none;


}
nav a {
color: #838994;
font-size: 1.04rem;
text-decoration: none;
}



li .active {
color:#4c5058;
font-weight:500;
}

li a:hover{
cursor: pointer;
color:#333333;
}

ul .logo {
width:20%;
height: 2.375rem;
margin-top: 0.7rem;

}


.backimg{
background-image: url('https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/master/week2/2-website/img/first-background.jpg');
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
height:45.938rem;
overflow: auto;
}


h1 {
display :block;
color: white;
text-align: center;
font-weight:300 ;
margin-top: 17.5rem;
font-size: 3.125rem;
}

.middle{
text-align: center;
}

.middle > h3{
color:white;
font-weight:300;
margin-top: 1.25rem;
font-size: 1.563rem;

}

button {

width: 9.688rem;
background-color: #f15a29;
border-style: none;
border-radius: 4px;
padding: 1rem 1.5rem;
color: white;
font-size: 1.125rem;

}
button:hover{
background-color: #d9400e;
border-color: #cf3d0e;
cursor: pointer;
}

.last {
text-align: center;
}

.cases h2{
font-size: 2.75rem;
margin: 1.625rem 0 3.125rem;
font-weight: 300;
text-align:center;
}

.cases {
display:block;
margin-top: 7.875rem;
background-color: #fff;
padding-bottom: 5rem;
}

.cases ul {
display:flex;
flex-direction:row;
justify-content:center;
}

.cases .one > li {
width: 20%;
list-style-type: none;

}

.cases div > h3{

font-weight: 400;
font-size: 1.563rem;
margin: 2.5rem 0px 1.875rem;
}


/*footer */
footer {
background-color: #fff;
overflow: auto;
padding-bottom: 9.375rem;
text-align: center;
}


.footer hr {
border: 0;
border-top: 1px solid #eaebec;
margin-: 1.313rem 0;
width:50%;

}



h5{
font-size: 1em;
font-weight:400;

}

.icons > li {
border-radius: 1.25rem;
width: 2.5rem;
height: rem;
display: inline-block;
margin: 1.25rem 5px;
border: 1px solid #eaebec;
padding: 0.625rem 0;
text-align: center;
}
ul li:hover {
cursor: pointer;
}

.twitter{
color: #55acee;
}
.facebook{
color: #4c66a4;
}
.insta{
color: #3f729b;
}
span {
font-size: 0.9rem;
font-weight: 300;
color: #838994;

}




/* Responsive Design*/

@media (min-width: 600px) {



}
@media (min-width: 62rem) {


}
@media (min-width: 75rem) {

}







67 changes: 64 additions & 3 deletions week2/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,71 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<nav class="nav-bar">
<div class="content">

<ul> <img class="logo" src="http://thinkful-ed.github.io/karma-clone/img/karma-logo.svg" width="20" height="20">

<li> <a class="active" href="#">Meet Karma</a></li>
<li><a href=" #">How it Works</a></li>
<li><a href=" #"> Store</a></li>
<li><a href=" #"> Blog </a></li>
<li><a href=" #"> Help </a></li>
<li><a href=" #"> Login</a></li>

</ul>
</div>
</nav>

<main>
<section class="backimg">
<div class="content">
<h1>Introducing Karma</h1>
<h3> Bring WiFi with you, everywhere you go.</h3>
<button >Learn More</button>
</div>
</section>

<section class="cases">
<div class="content">
<h2>Everyone needs a little Karma.</h2>

<!-- 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 -->

<ul class="one">
<li> <img src="https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/8004049f99301ff26fd806c44043597dabb4775b/week2/2-website/img/icon-devices.svg" width="127" height="127" >
<div>
<h3>Internet for all devices</h3> </div> </li>

<li> <img src="https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/8004049f99301ff26fd806c44043597dabb4775b/week2/2-website/img/icon-coffee.svg" width="127" height="127">
<div>
<h3>Boost your productivity</h3></div>
</li>
<li> <img src="https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Homework/8004049f99301ff26fd806c44043597dabb4775b/week2/2-website/img/icon-refill.svg" width="127" height="127" >
<div>
<h3> Pay as You Go</h3>
</div>
</li>
</ul>
</div>
</section>

<footer>
<div class="content">
<hr>
<h5>Join us on</h5>
<ul class="icons">
<li class="twitter"> <i class="fa fa-twitter"></i></li>
<li class="facebook" > <i class="fa fa-facebook"></i>
</li>
<li class="insta"> <i class="fa fa-instagram"></i>
</li>
</ul>
<span>
&copy; Karma Mobility, Inc.
</span>
</div>
</footer>

</main>
</body>
</html>