Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

London9-Oleh_Pysmenko-HTML-CSS-Coursework-Week3 #412

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

London9-Oleh_Pysmenko-HTML-CSS-Coursework-Week3 #412

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
983e74d
feat: initiate the project
Nov 7, 2022
ee3a7cc
feat: adding last changes
Nov 7, 2022
359c950
feat: add link
Nov 7, 2022
cf9dfda
feat: added hero section
Nov 8, 2022
7eba254
feat: mobile version
Nov 8, 2022
5cbc998
feat: small changes to mobile design
Nov 8, 2022
9fbfed0
feat: table mode done
Nov 8, 2022
8c570f2
feat:desktop version done
Nov 9, 2022
eb50343
feat: adding changes from commments of Dario
Nov 10, 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
Prev Previous commit
Next Next commit
feat: adding last changes
  • Loading branch information
MacOS committed Nov 7, 2022
commit ee3a7cccc6e73770e4bc9af4993998ca28df4b7a
41 changes: 25 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Cake webpage</title>
<link rel="stylesheet" href="style.css" />
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Cake webpage</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<body>
<header>
<div class="movile-navigation"></div>
</header>
<main class="homepage-main">
<section class="homepage-hero"></section>
<section class="homepage-feature"></section>
<section class="homepage-products"></section>
<aside class="homepage-aside"></aside>
<section class="homepage-hero"></section>
<section class="homepage-feature"></section>
<section class="homepage-products">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>
<div class="grid-item4">4</div>
</section>
<section class="homepage-footer"></section>
</main>
</body>

</html>
<span class="tip mobile">Mobile mode</span>
<span class="tip tablet">Tablet mode</span>
<span class="tip desktop">Desktop mode</span>
</body>
</html>
75 changes: 60 additions & 15 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
.homepage-main {
border: 1px solid black;

column-gap: 10px;
row-gap: 10px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 170px 140px 100px 80px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 150px 150px 150px 150px 150px;
/* grid-template-areas must follow the exact number of columns and rows defined above (4 columns and 4 rows) */
grid-template-areas:
"hero hero hero hero" /* one for each column */
"feature feature feature feature"
"product product product product"
"aside aside . ."; /* the dot is used to skip a column */
"hero hero" /* one for each column */
"feature feature"
"product product"
"footer footer"; /* the dot is used to skip a column */
}

.homepage-hero {
Expand All @@ -25,11 +26,55 @@
.homepage-products {
background-color: darkSeaGreen;
grid-area: product;
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 0.5fr);
grid-template-rows: 50px 50px;
grid-template-areas:
"product-item1 product-item2" /* one for each column */
"product-item3 product-item4"
;
}

.grid-item1 {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
grid-area: product-item1;
}

.grid-item2 {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
grid-area: product-item2;
}

.grid-item3 {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
grid-area: product-item3;
}

.grid-item4 {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
grid-area: product-item4;
}

.homepage-aside {
.homepage-footer {
background-color: darkTurquoise;
grid-area: aside;
grid-area: footer;
}

/*
Expand All @@ -52,8 +97,8 @@
/* our template now has 6 columns and 3 rows */
grid-template-areas:
"hero hero hero hero hero hero"
"feature feature feature . aside aside"
"product product product . aside aside";
"feature feature feature . footer footer"
"product product product . footer footer";
}

/*
Expand All @@ -75,8 +120,8 @@
/* All we're doing here is skipping the 1st and last columns so the content isn't too wide. */
grid-template-areas:
". hero hero hero hero ."
". feature feature . aside ."
". product product . aside .";
". feature feature . footer ."
". product product . footer .";
}

} /* end of desktop media query */
Expand Down Expand Up @@ -106,15 +151,15 @@
display: none;
}

@media screen and (min-width: 550px) {
@media screen and (min-width: 540px) {
.mobile, desktop {
display: none;
}
.tablet {
display: block;
}
}
@media screen and (min-width: 750px) {
@media screen and (min-width: 900px) {
.mobile, .tablet {
display: none;
}
Expand Down