Skip to content

NW6 | Orlando_Morales | HTML-CSS | Module_Project | Week1 #636

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

NW6 | Orlando_Morales | HTML-CSS | Module_Project | Week1 #636

Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
9e902a4
Starting the website, Adding the navigation items and background image
OrlandoMoralesKuan Sep 25, 2023
b875518
Adding text in main with a div class introducing and button
OrlandoMoralesKuan Sep 25, 2023
10f388d
Adding the footing
OrlandoMoralesKuan Sep 25, 2023
13e9266
Adding icon in the Footer
OrlandoMoralesKuan Sep 25, 2023
2bb34de
FinalVersionMeetKarma
OrlandoMoralesKuan Sep 25, 2023
54ccead
Starting with the store website
OrlandoMoralesKuan Sep 26, 2023
57034ce
Adding the radios to the store html
OrlandoMoralesKuan Sep 26, 2023
cc2d26c
Adding Store website
OrlandoMoralesKuan Sep 26, 2023
3c036ea
Adding CSS for Store Website Lv2
OrlandoMoralesKuan Sep 26, 2023
afef89c
Changing the path for get the CSS features
OrlandoMoralesKuan Sep 26, 2023
cb100bf
changing the path from the CSS
OrlandoMoralesKuan Sep 26, 2023
bd5ed69
Adding the CSS because has a new path
OrlandoMoralesKuan Sep 26, 2023
93f2d5b
change size favorite icon logo
OrlandoMoralesKuan Sep 29, 2023
3173bfa
Change position of header_logo
OrlandoMoralesKuan Sep 29, 2023
a233c81
change size favourite icon
OrlandoMoralesKuan Sep 29, 2023
f7c8d62
change color of radio and checkbox
OrlandoMoralesKuan Sep 30, 2023
221dda6
change semantic structure in radio
OrlandoMoralesKuan Sep 30, 2023
5975b31
changes in css
OrlandoMoralesKuan Sep 30, 2023
6ad8fbb
add height and margint-top to .radioText
OrlandoMoralesKuan Sep 30, 2023
f25f71a
change
OrlandoMoralesKuan Sep 30, 2023
f56b496
changes position website
OrlandoMoralesKuan Sep 30, 2023
5bcdb9c
change HTML
OrlandoMoralesKuan Sep 30, 2023
b715162
restoring color for inputRadio2
OrlandoMoralesKuan Sep 30, 2023
fa436d7
Fixing the size of the background image to 100%
OrlandoMoralesKuan Oct 14, 2023
5f08b28
Putting images and text in the same div
OrlandoMoralesKuan Oct 14, 2023
bb95a97
Changing the width size of the screen
OrlandoMoralesKuan Oct 14, 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
196 changes: 196 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,40 @@ body {
-webkit-font-smoothing: antialiased;
}

.h1Introducing{
font-family: 'Roboto';
font-weight: lighter;
font-size: 65px;
margin-top: 80px;
margin-bottom: 0px;
}

.pIntroducing{
font-size: 35px;
font-weight: lighter;
margin-top: 25px;
margin-bottom: 35px;
}

.h2Logos{
font-family: 'Roboto';
font-weight: lighter;
font-size: 50px;
width: 1263px;
height: 50px;
margin-top: 160px;
margin-bottom: 80px;
text-align: center;
}

.h3Content3{
width: 500px;
margin-top: 80px;
font-size: 40px;
font-weight: lighter;
padding-right: 106.5px;
padding-left: 106.5px;
}
/**
* Add your custom styles below
*
Expand All @@ -15,5 +49,167 @@ body {
*
* - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
*/
.header, .footer {
padding: 0rem 1rem 0rem 1rem;
max-width: 1200px;
Copy link

@bunday bunday Oct 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

setting a max width as 1200px limit your design to fit screen size less or equal to 1200px. This is how it renders on larger screen, which isnt what you are trying to achieve. Please look into this, remove the max-width anywhere you have it and work on the structuring again
Screenshot 2023-10-12 at 18 21 01

Copy link
Author

@OrlandoMoralesKuan OrlandoMoralesKuan Oct 14, 2023

Choose a reason for hiding this comment

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

I did the change

margin: 0 auto;
}

/* Header */
.header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
height: 3rem;
margin-bottom: 1rem;
margin-left: 5rem;
padding-top: 0rem;
}

/* Navigation */
.navigation_list {
display: flex;
list-style: none;
width: 600px;
justify-content: space-between;
padding-left: 450px;
}

.navigation_item {
padding: 0.5rem 0;
}

.navigation_link1 {
color: #414040;
font-weight: 600;
text-decoration: none;
}

.navigation_link {
color: #6e6d6d;
font-weight: 400;
text-decoration: none;
}

.navigation_link:hover{
color: #f96203;
}

/* Content*/
.content1{
background-image: url("/img/first-background.jpg");
width: 1263px;
height: 700px;
}

.Introducing{
color: white;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 170px;
}

.content2{
width: 550px;
height: 400px;
padding-top: 120px;
display: flex;
padding-bottom: 80px;
}

.content3{
text-align: center;
background-color: #ffeaf0;
width: 713px;
height: 400px;
}

.imgDrinking{
width: 550px;
height: 400px;
}

.quotation{
color: #ff0000;
font-size: 50px;
}

/* Button */
.btnLearn{
background-color: #e05e0d;
width: 120px;
height: 50px;
border-radius: 5px;
font-size: 17px;
margin-top: 20px;
}

.btnGetKarma{
background-color: #e05e0d;
width: 180px;
height: 50px;
color: white;
border: solid white 2px;
border-radius: 5px;
font-size: 17px;
margin-top: 20px;
}

/* Icons */
.iconLogos{
display: flex;
justify-content: flex-start;
}

.icon{
width: 1263px;
height: 150px;
}

.iconText{
font-family: 'Roboto';
font-size: 30px;
font-weight: 400;
padding-left: 70px;
padding-right: 70px;
}

/* Footer */
.footer{
width: 1000px;
font-size: 25px;
text-align: center;
color: #232121;
border-top: solid 2px #eae6e6;
}

.textFooter{
text-align: center;
font-size: 25px;
color: #acacac;
font-weight:400;
margin-top: 20px;
}

.logosFooter{
display: flex;
justify-content: center;
}

.iconFooter{
height: 30px;
border: solid 2px #d4ceceaa;
border-radius: 30px;
padding: 5px;
margin-right: 10px;
margin-left: 10px;
}

.circle{
border: solid 1px #acacac;
border-radius: 20px;
padding: 0 4px 0 4px;
font-size: 15px;
}
88 changes: 86 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,98 @@
<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="style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<!-- Add your HTML markup here -->
<header class="header">

<a href="#">
<img src="favicon.ico"
alt="logo favorite icon"
class="header_logo">
</a>

<nav>
<ul class="navigation_list">
<li class="navigation_item">
<a class="navigation_link1" href="/index.html">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.html">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>
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<!-- All the images you need are in the 'img' folder -->
<main >

<section class="content1">
<div class="Introducing">
<h1 class="h1Introducing">Introducing Karma</h1>
<p class="pIntroducing">Bring WiFi with you, everywhere you go.</p>
<button class="btnLearn">Learn More</button>
</div>
</section>

<section class="Logos">
Copy link

@bunday bunday Oct 12, 2023

Choose a reason for hiding this comment

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

This section needs to be adjusted in such a way that The Image and the text box exist together in a single div like below.

<div>
  <img src="/img/icon-devices.svg" alt="device" class="icon">
  <h4 class="iconText">Internet for all devices</h4>
</div>

Copy link
Author

@OrlandoMoralesKuan OrlandoMoralesKuan Oct 14, 2023

Choose a reason for hiding this comment

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

I did the changes, put the images and the texts in the same div

<h2 class="h2Logos">Everyone needs a little Karma.</h2>
<div class="iconLogos">
<img src="/img/icon-devices.svg" alt="device" class="icon">
<img src="/img/icon-coffee.svg" alt="coffee" class="icon">
<img src="/img/icon-refill.svg" alt="refill" class="icon">
</div>
<div class="iconLogos">
<h4 class="iconText">Internet for all devices</h4>
<h4 class="iconText">Boost your productivity</h4>
<h4 class="iconText">Pay as You go</h4>
</div>
</section>

<section class="content2">
<div >
<img
src="/level-2/homepage-feature.png"
alt="girl drinking coffee"
class="imgDrinking">

</div>
<div class="content3">
<h3 class="h3Content3">
<span class="quotation">"</span>Wherever I am, I just don't worry about my connection anymore!<span class="quotation">"</span>
</h3>
<button class="btnGetKarma">Get Karma Today</button>
</div>
</section>

</main>
</body>
<footer>
<div class="footer">
<h4>Join us on</h4>
</div>
<div class="logosFooter">
<img src="/img/twitter-icon.svg" alt="twitter" class="iconFooter">
<img src="/img/facebook-icon.svg" alt="facebook" class="iconFooter">
<img src="/img/instagram-icon.svg" alt="instagram" class="iconFooter">
</div>
<div class="textFooter">
<h5 class="textFooter"><span class="circle">C</span> Karma Mobility, Inc.</h5>
</div>
</footer>
</html>
Loading