Skip to content

Barcelona - class-jul2024-1 - KOSTIANTYNKOVALCHUK - HTML/CSS - WEEK_3 #1

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

Barcelona - class-jul2024-1 - KOSTIANTYNKOVALCHUK - HTML/CSS - WEEK_3 #1

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
db1d34c
html-first-draft
kostiantynkovalchuk Oct 3, 2024
4c21a68
starting with css
kostiantynkovalchuk Oct 4, 2024
82c63ce
changes to css and html
kostiantynkovalchuk Oct 4, 2024
b4097f1
change title
kostiantynkovalchuk Oct 4, 2024
844dc33
html-first-draft
kostiantynkovalchuk Oct 4, 2024
9db20ed
files-updated
kostiantynkovalchuk Oct 4, 2024
3087df1
finalizing-code
kostiantynkovalchuk Oct 4, 2024
045fc8b
store code added
kostiantynkovalchuk Oct 4, 2024
e038d85
store.html path updated
kostiantynkovalchuk Oct 5, 2024
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
158 changes: 69 additions & 89 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,142 +1,122 @@
/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */

/**
* Add your custom styles below
*
* Remember:
* - Be organized, 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'
*/

/* General styles */

/* Basic body styling */
body {
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
}

.container {
/* Header Styling */
header {
display: flex;
justify-content: space-between;
padding: 1em 5em;
align-items: center;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo img {
width: 3em;
.karma-logo img {
height: 40px;
}

/* Navigation Styles */
header nav {
.navbar {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}

nav div a {
margin-left: 2em;
.navbar a {
text-decoration: none;
color: #000;
font-weight: 500;
color: #333;
}

nav div a:hover {
color: #ff6f61;
.navbar a:hover {
color: #f15a22;
}

/* Hero Section Styles */
.hero-image {
position: relative;
width: 100%;
height: auto;
}

.hero-image img {
width: 100%;
height: auto;
/* Hero Section */
.hero {
background-image: url("../img/first-background.jpg");
background-size: cover;
background-position: center;
padding: 100px 20px;
text-align: center;
color: #fff;
}

.hero-image h2 {
position: absolute;
top: 40%;
left: 5%;
color: white;
font-size: 3em;
font-weight: 500;
.hero-content h1 {
font-size: 48px;
font-weight: 300;
}

.hero-image p {
position: absolute;
top: 50%;
left: 5%;
color: white;
font-size: 1.2em;
.hero-content p {
font-size: 24px;
margin: 20px 0;
}

.hero-image button {
position: absolute;
top: 60%;
left: 5%;
background-color: #ff6f61;
color: white;
padding: 1em 2em;
.hero-button {
padding: 10px 30px;
background-color: #f15a22;
color: #fff;
border: none;
font-size: 1em;
font-size: 16px;
cursor: pointer;
}

.hero-image button:hover {
background-color: #ff5a45;
.hero-button :hover {
background-color: #e14e1b;
}

/* Features Section */
section {
main {
text-align: center;
padding: 4em 0;
padding: 40px 20px;
}

.columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0 5em;
main h2 {
font-size: 32px;
margin-bottom: 40px;
}

.column1,
.column2,
.column3 {
.columns {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

.column1 img,
.column2 img,
.column3 img {
width: 5em;
margin-bottom: 1em;
.column {
width: 30%;
}

.columns p {
font-size: 1.2em;
margin-top: 1em;
.column img {
width: 60px;
margin-bottom: 20px;
}

/* Footer */
.column p {
font-size: 18px;
}

/* Footer Section */
footer {
background-color: #f9f9f9;
padding: 20px;
text-align: center;
padding: 2em;
background-color: #f5f5f5;
}

footer h4 {
margin-bottom: 1em;
footer h5 {
font-size: 16px;
margin-bottom: 20px;
}

.social-media-icons img {
margin: 0 10px;
width: 30px;
}

.social-media-container img {
width: 2em;
margin: 0 1em;
footer p {
margin-top: 20px;
font-size: 14px;
color: #888;
}
95 changes: 38 additions & 57 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,69 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<!--Navigation Bar-->

<!-- Header Section -->
<header>
<nav class="container">
<div class="logo">
<img src="/img/karma-logo.svg" alt="karma logo" />
</div>
<div><a href="meet-karma.html">Meet Karma</a></div>
<div><a href="how-it-works.html">How it works</a></div>
<div><a href="store.html">Store</a></div>
<div><a href="blog.html">Blog</a></div>
<div><a href="help.html">Help</a></div>
<div><a href="login.html">Login</a></div>
<div class="karma-logo">
<img src="img/karma-logo.svg" alt="Karma Logo" />
</div>
<nav>
<ul class="navbar">
<li><a href="index.html">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="#">Login</a></li>
</ul>
</nav>
</header>

<!--Hero section-->

<hero>
<div class="hero-image">
<img
src="img/first-background.jpg"
alt="person behind the desk with gadgets"
/>
<h2>Introducing Karma</h2>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>Introducing Karma</h1>
<p>Bring WiFi with you, everywhere you go.</p>
<button>Learn more</button>
<a href="store.html"
><button class="hero-button">Get Karma today</button></a
>
</div>
</hero>

<!--Features section-->
</section>

<section>
<!-- Features Section -->
<main>
<h2>Everyone needs a little Karma.</h2>

<div class="columns">
<!--Columns start-->

<div class="column1">
<img src="img/icon-devices.svg" alt="different devices" />
<div class="column">
<img src="img/icon-devices.svg" alt="Internet for all devices" />
<p>Internet for all devices</p>
</div>

<div class="column2">
<img src="img/icon-coffee.svg" alt="coffee icon" />
<div class="column">
<img src="img/icon-coffee.svg" alt="Boost your productivity" />
<p>Boost your productivity</p>
</div>

<div class="column3">
<img src="img/icon-refill.svg" alt="fuel refill icon" />
<div class="column">
<img src="img/icon-refill.svg" alt="Pay as You Go" />
<p>Pay as You Go</p>
</div>
</div>
<!--Columns end-->
</section>

<!--Footer: social media icons-->
</main>

<!-- Footer Section -->
<footer>
<h4>Join us on</h4>

<div class="social-media-container">
<img src="img/twitter-icon.svg" alt="twitter icon" />
<img src="img/facebook-icon.svg" alt="facebook-icon" />
<img src="img/instagram-icon.svg" alt="instagram icon" />
<h5>Join us on</h5>
<div class="social-media-icons">
<a href="#"><img src="img/twitter-icon.svg" alt="Twitter" /></a>
<a href="#"><img src="img/facebook-icon.svg" alt="Facebook" /></a>
<a href="#"><img src="img/instagram-icon.svg" alt="Instagram" /></a>
</div>
<p>&copy; Karma Mobility, Inc.</p>
</footer>
</body>
</html>
Loading