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

London Class 9 - Karleen Richards - HTML/CSS Coursework - Week 1 #249

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

London Class 9 - Karleen Richards - HTML/CSS Coursework - Week 1 #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
1d255eb
Initial requirements added to web page
karleenmsrichards Oct 23, 2022
937d147
Added summary tags correctly
karleenmsrichards Oct 23, 2022
4d2d6e6
Added images and fixed structure of html
karleenmsrichards Oct 24, 2022
30a5a8e
added logo and header of the webpage
karleenmsrichards Oct 26, 2022
b3ec08b
changes made to main video and nav bar aligned centered
karleenmsrichards Oct 26, 2022
6de4416
changed position of the articles and added color to the background of…
karleenmsrichards Oct 26, 2022
299ff61
Update style.css
karleenmsrichards Oct 26, 2022
a989cce
Fixed articles columns
karleenmsrichards Oct 26, 2022
e421481
Final changes made
karleenmsrichards Oct 27, 2022
728ffcc
Structured html/css
karleenmsrichards Oct 27, 2022
f92c0a2
Rename elements and containers
karleenmsrichards Oct 27, 2022
f001001
Added a <a href> to an element
karleenmsrichards Oct 28, 2022
7728c89
Fixed semantic tags in html
karleenmsrichards Oct 29, 2022
3026035
Corrections made to HTML/CSS
karleenmsrichards Oct 30, 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
Binary file added Sewing Machine - 1111.mp4
View file
Open in desktop
Binary file not shown.
Binary file added Tailor - 1108.mp4
View file
Open in desktop
Binary file not shown.
217 changes: 217 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,220 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {
font-family: Georgia, 'Times New Roman', Times, serif;
margin: 0 100px 40px 100px;
}

/* Navigation Styles */

ul {
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 50px;
}

.nav-item {
color: rgb(104, 89, 89);
text-decoration: none;
font-weight: 600;
padding: 10px;
}

ul li a:hover {
color: black;
}

.border-bottom {
border-bottom: 1px solid black;
}

/* Hero Styles */

.left-container {
display: flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
background-image: url("https://images.pexels.com/photos/1879877/pexels-photo-1879877.jpeg?auto=compress&cs=tinysrgb&w=600");
background-position: cover;
background-repeat: no-repeat;
color: whitesmoke;
height: 700px;
width: 50%;
padding-bottom: 50px;
}

.h2 {
text-decoration: underline;
}

.h1 {
font-size: 1.876rem;
}

.date {
font-weight: 900;
}

/* General Styles - Top Container*/

.top-container {
padding: 5px;
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-bottom: 0;

}

.logo {
font-size: 5rem;
font-weight: bold;
padding-right: 68px;
text-decoration: underline;
}

.top-right {
display: flex;
flex-direction: row;
justify-content: center;
}

.top-right-p1 {
padding: 5px 0 0 100px;
font-weight: 600;
}

.top-right-p2 {
padding: 5px 0 0 10px;
font-weight: 600;
}

.hburger-img {
width: 60px;
height: 60px;
}

h4 {
color: rgb(88, 85, 85);
}

/* General Styles - Main container and aside container */
.main-container {
display: flex;
flex-direction: row;
height: 800px;
margin: 50px 0 10px 0;
}

.aside-container {
float: right;
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 100px;
}

.aside-border {
border: 1px solid rgb(180, 175, 175);
margin-bottom: 40px;
padding: 15px;
font-weight: bolder;
}
Comment on lines +126 to +131

@PeteLindsell PeteLindsell Oct 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

You could add this code to .aside-container preventing the need for an extra element to add a border


.stories {
color: black;
font-weight: 600;
display: flex;
justify-content: flex-start;
flex-direction: row;
margin: 15px 0 25px 0;
border-bottom: 1px solid black;
padding: 15px 0 25px 0;
}

/* Article Styles */

.article-container {
display: flex;
flex-direction: row;
border: 2px solid rgb(204, 200, 200);
border-radius: 4px;
padding: 20px;
}

article:first-child {
display: flex;
flex-direction: column;
flex: 0;
order: 2;

@PeteLindsell PeteLindsell Oct 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Very impressive to use the order property to answer the brief requirement of targeting the first child while also getting the look you wanted! In practice order is best avoided as it confuses the document flow for somebody tabbing through the page but impressive here

background-color: rgb(226, 238, 234);
height: 700px;
border-radius: 20px;
padding: 25px;
margin-right: 10px;
}

.article2 {
display: flex;
flex-direction: column;
flex: 2;
order: 1;
padding: 25px;
}

.article3 {
display: flex;
flex: 2;
flex-direction: column;
order: 3;
padding: 25px;
}
Comment on lines +166 to +180

@PeteLindsell PeteLindsell Oct 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

If you have lots of repeated code you can set that all with a generic selector such as article or create a class home-page-articles eg:

article {
    display: flex;
    flex: 2;
    flex-direction: column;
    padding: 25px;
}

and then just set the unique properties and values to the individual elements


.img-1 {
max-width: 300px;
max-height: 100%;
}


.img-2 {
max-width: 250px;
max-height: 100%;
}

.img-3 {
max-width: 300px;
max-height: 100%;

}

.link {
color: whitesmoke;
text-decoration: none;
}

.read-link {
background-color: black;
text-decoration: none;
color: whitesmoke;
width: 100px;
height: 20px;
padding: 10px;
}

/* Footer styles*/

footer {
left: 0;
bottom: 0;
Comment on lines +216 to +217

@PeteLindsell PeteLindsell Oct 28, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

These are not doing anything here. The footer is looking offset to the right because you are setting width: 100%; which the browser takes and then adds the padding to it. if you remove width the footer will naturaly fill the space

color: whitesmoke;
background-color: black;
text-align: center;
border-radius: 4px;
padding: 20px;

}

114 changes: 112 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,127 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
type="text/css"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<title>Virgo Fashion Magazine</title>
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<body>
<header>

<div class="top-container">
<p class="logo">VIRGO</p>
<div class="top-right">
<p class="top-right-p1">BRITAIN</p>
<p class="top-right-p2">SUBSCRIBE</p>
<img class="hburger-img" alt="site menu" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhhwlrve66B8GHVhBRth6kDr6ml2SQR73R5g&usqp=CAU">
</div>
</div>


<nav class="border-bottom">
<ul>
<li><a class="nav-item" href="#">HOME</a></li>
<li><a class="nav-item" href="#">FASHION</a></li>
<li><a class="nav-item" href="#">RUNWAY</a></li>
<li><a class="nav-item" href="#">BEAUTY</a></li>
<li><a class="nav-item" href="#">NEWS</a></li>
<li><a class="nav-item" href="#">SHOP</a></li>
</ul>
</nav>

</header>

<main>

<h3 class="stories" class="border-bottom">TOP STORY</h3>

<div class="main-container">


<div class="left-container">
<h2 class="h2">VIEWPOINT</h2>
<h1 class="h1"><a class="link" href="https://www.vogue.co.uk/fashion/article/ode-to-black">Black on Black trend continues</a></h1>
<h2 class="h2">BY: HEATHER MAY</h2>
<p class="date">23 October 2022</p>
</div>

<aside class="aside-container">

<h3 class="stories">MAIN HEADLINES</h3>
<details>
<summary class="aside-border">Top 3 outerwear choices this winter</summary>
<p>
<ol>
<li>Puffer Winter Coat</li>
<li>Wrapped Wool Coat</li>
<li>Fur Aviator Jacket</li>
</ol>
</p>
</details>
<details>
<summary class="aside-border">Extra pointed toe the new pick</summary>
<p>The rounded toe is no longer seen as the go to. The pointy toe has yet again been selected as the must wear for business and pleasure.</p>
</details>
<details>
<summary class="aside-border">Accessorize with this type of head wear</summary>
<p>The beanie has been around for ages, choose a color that's similar to your outfit or you can add a pop of color as well.</p>
</details>

</aside>

</div>


<h3 class="stories">FASHION NEWS</h3>

<section class="article-container">

<article>
<h1>Styling tips for the puffer</h1>
<p>There are various ways to style the puffer jacket but there are different rules which depends on numerous
factors. What's the length, what's the fit and what about the color. <strong>Author: Mishy Mish</strong></p>
<a class="read-link"
href="https://images.pexels.com/photos/6980982/pexels-photo-6980982.jpeg?auto=compress&cs=tinysrgb&w=600">READ
MORE</a>
</p>
<img alt="A couple huddles together wearing puffer jackets" class="img-2"
src="https://images.pexels.com/photos/10833037/pexels-photo-10833037.jpeg?auto=compress&cs=tinysrgb&w=600">
</article>

<article class="article2">
<h1>The utilitarian vibe</h1>
<img alt="A mother and daughter plays in the snow while wearing a puffer and a tracksuit" class="img-3"
src="https://images.pexels.com/photos/9385114/pexels-photo-9385114.jpeg?auto=compress&cs=tinysrgb&w=600">
<p><strong>Author: Lee-Lee Kay Rogers</strong> <br> A puffer paired with a tracksuit. This trend has walked it's way into yet another winter season as it's
favoritism has grown
over the past couple of years. I would be right to say that this trend is simple, comfortable but chic.</p>
<a class="read-link"
href="https://www.pexels.com/photo/three-men-wearing-winter-jackets-with-knit-hat-standing-on-seashore-7026413/">READ
MORE</a>
</a>
</article>

<article class="article3">
<h1>Hip to be a square</h1>
<img alt="A woman crossing a street in a shiny boxy puffer jacket" class="img-1"
src="https://images.pexels.com/photos/10265031/pexels-photo-10265031.jpeg?auto=compress&cs=tinysrgb&w=600">
<p> <strong>Author: Annie Pierre</strong> <br>Who would have ever thought that such an unflattering look would be on trend today, it really is. Boxy
jackets are the new must have. Paired with leather leggings and a bucket hat adds an effortless but sophisticated.</p>
<a class="read-link" href="#">READ MORE</a>
</article>

</section>
</main>
<footer>
<h4>Contact Virgo Fashion Magazine at virgo.fashion-magazine.org</h4>
<h4>@Copyright all rights reserved</h4>
</footer>
</body>
</html>
Binary file added pexels-cottonbro-7026473.mp4
View file
Open in desktop
Binary file not shown.
Binary file added pexels-michael-burrows-7140112.mp4
View file
Open in desktop
Binary file not shown.