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

London 9 - Sahar Naderi - HTML/CSS - WEEK 1 #271

Open
SaharNaderi wants to merge 1 commit into
base: master
Choose a base branch
from
Open

London 9 - Sahar Naderi - HTML/CSS - WEEK 1 #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
}
101 changes: 101 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,104 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header{
width: 100%;

}
nav{
width: 100%;
background-color: rgba(0,0,0,0,0.5);
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px;
}
nav .logo{
width: 25%;

font-size: 22px;
font-weight: bold;
padding: 40px;
}
nav .menu{
width: 40%;
font-weight: bold;
display: flex;
}

nav .menu a{
width: 25%;
color: black;
font-size: 22px;
text-decoration: none;
}

nav .menu a:hover {
color: blue;
}


section:nth-child(1){
color: #fff;
margin: 5px;
padding: 6rem 2rem;
text-align: center;
font-weight: bold;
background-image: url(/home\ decor.jpeg);
background-repeat: no-repeat;
background-size: cover;
}
section h1{
font-size: 50px;
margin-top: 5px;
text-shadow: 3px 1px black;
}
section h3{
font-size: 20px;
margin-top: 5px;
text-shadow: 3px 1px black;
}

.second-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

article {
display: flex;
flex-direction: column;
margin: 5px;
border: 1px solid black;
border-radius: 5px;
padding: 2rem 1rem;
}

article:first-child {
background-color: yellow;
}

.article-summery {
font-size: 20px;
}

span {
Copy link

@ehwus ehwus Nov 11, 2022

Choose a reason for hiding this comment

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

I would use a class here, applying a blanket styling rule to a span element is pretty dangerous as we want them to be flexible parent containers for other elements.

cursor: pointer;
color: blue;
margin-top: 5px;
}

span:hover {
text-decoration: underline;
}

footer {
margin-top: 50px;
display: flex;
justify-content: center;
}
Binary file added home decor.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 39 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,44 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<nav>
<div class="Logo">
<h1>Interior</h1>
</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">About Us</a>
<a href="#">Project</a>
</div>
</nav>
</header>
<main>
<section>
<h3>INNTERIOR DESIGN COMPANY</h3>
<h1>EXPERIENCE INTERIOR<br>DESIGN</h1>
</section>
<section class="second-section">
<article>
<h1 class="article-title">Home Color</h1>
<p class="article-summery">Lorem ipsum dolor sit amet, consectetur adipisicing elit.?</p>
<span class="read-more">Read More</span>
</article>
<article>
<h1 class="article-title">Home Decor</h1>
<p class="article-summery">Lorem ipsum dolor sit amet, consectetur adipisicing elit.?</p>
<span class="read-more">Read More</span>
</article>
<article>
<h1 class="article-title">Home Design</h1>
<p class="article-summery">Lorem ipsum dolor sit amet, consectetur adipisicing elit.?</p>
<span class="read-more">Read More</span>
</article>
</section>
</main>
<footer>
<p>Sahar Naderi LTD</p>
</footer>
</body>
</html>