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

LND10 | Adrian Ilovan | HTML-CSS-Coursework-Week1 #327

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

LND10 | Adrian Ilovan | HTML-CSS-Coursework-Week1 #327

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ad13e91
HTML Basic
AdrianIlovan Feb 1, 2023
e5be6ae
Navigation Bar HTML/CSS Complete
AdrianIlovan Feb 1, 2023
f35743e
Html Nav finished
AdrianIlovan Feb 1, 2023
e9707cb
Finish-but-no-footer
AdrianIlovan Feb 2, 2023
6e10547
No footer
AdrianIlovan Feb 2, 2023
da484a8
Merge branch 'master' of https://github.com/AdrianIlovan/HTML-CSS-Cou…
AdrianIlovan Feb 3, 2023
2d16da3
Final-Week-1
AdrianIlovan Feb 3, 2023
9fbcc91
Update index.html
AdrianIlovan Feb 3, 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
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 @@
{
"livePreview.defaultPreviewPath": "/index.html"
}
155 changes: 155 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,158 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap');

* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #202325;
}

li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: aliceblue;
text-decoration: none;
}

header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}

.logo {
cursor: pointer;
}

.navigation_links {
list-style: none;
}

.navigation_links li {
display: inline-block;
padding: 0px 20px;
}

.navigation_links li a {
transition:all 0.3s ease 0s;
}

.navigation_links li a:hover {
color: #202325;
}

button {
padding: 9px 25px;
background-color: rgb(48, 44, 44);
border: none;
border-radius: 40px;
cursor: pointer;
transition:all 0.3s ease 0s;
}

button:hover {
background-color: black;
}

li {
cursor: pointer;
}

.blog-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0px;
flex-wrap: wrap;
}

.blog-box {
width: 350px;
background-color: aliceblue;
border: 1px solid white;
margin: 20px;
}

.blog-img {
width: 100%;
height: auto;
}

.blog-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.blog-text {
padding: 19px;
display: flex;
flex-direction: column;

}

.blog-text span {
color: rgb(3, 3, 3);
font-size: 1.75rem;
}

.blog-text .blog-title {
font-size: 1.36rem;
font-weight: 500;
color: #efeff0;
}

.blog-text .blog-title:hover {
cursor: pointer;
color: blue;
transition: all ease 0.3s;
}

.blog-text p {
color: azure;
font-size: 1.1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin: 20px 0px;
}

.blog-text a {
color: black;
}

.blog-text a:hover {
color:rgb(48, 44, 44);
transition: all ease 0.3s;
}

.footer {
display: flex;
color: gray;
text-align:center;
justify-content: center;
text-align: center;
font-size: 2.5rem;
}

.footer-link {
display: flex;
text-align: center;
justify-content: center;
font-size: 2.5rem;

}

.footer-link:hover{
cursor: pointer;
color: blue;
transition: all ease 0.3s;
}
73 changes: 71 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,76 @@
<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>
<img class="logo" width="100" src="https://i.pinimg.com/originals/f8/7a/34/f87a343ec345a259afe68815fb7f59c4.jpg" alt="">
<nav>
<ul class="navigation_links">
<li><a href="#"></a>About Me</li>
<li><a href="#"></a>Github</li>
<li><a href="#"></a>Services</li>
</ul>
</nav>
<a class="cta" href="#"><button>Contact</button></a>
</header>


<section>
<div class="blog-container">
<!--Box one-->
<div class="blog-box">

<div class="blog-img">
<img src="https://www.highsnobiety.com/static-assets/thumbor/4JpD-OLrxWOySH-1XPugRYVlGAI=/1600x2000/www.highsnobiety.com/static-assets/wp-content/uploads/2015/08/07155433/eazy-e-death-conspiracy-4.jpg" alt="blog">
</div>
<div class="blog-text">
<span>Eazy-E 7.9.1964-26.3.1995</span>
<br>
<a href="#" class="blog-title">What happened to Eazy-E?</a>
<br>
<p>Conspirary theorists say that he has injected with HIV after a night out. Nobody knows exacly by who but explains the facts that he died so early from a disease that he had only for 3 months. RIP</p>
<a href="#">Read More</a>
</div>
</div>
<!--Box two-->

<div class="blog-box">

<div class="blog-img">
<img src="https://media.gettyimages.com/id/1317653374/photo/new-york-new-york-march-01-rapper-eazy-e-appears-in-a-portrait-taken-on-march-1-1990-in-new.jpg?s=612x612&w=gi&k=20&c=ZAVptoz7Eck8dQKZ36y6rgC0Haz182Yxug0vozjvKV0=" alt="blog">
</div>
<div class="blog-text">
<span>Eazy-E 7.9.1964-26.3.1995</span>
<br>
<a href="#" class="blog-title">What happened to Eazy-E?</a>
<br>
<p>Conspirary theorists say that he has injected with HIV after a night out. Nobody knows exacly by who but explains the facts that he died so early from a disease that he had only for 3 months. RIP</p>
<a href="#">Read More</a>
</div>
</div>
<!--Box three-->

<div class="blog-box">

<div class="blog-img">
<img src="https://www.highsnobiety.com/static-assets/thumbor/4JpD-OLrxWOySH-1XPugRYVlGAI=/1600x2000/www.highsnobiety.com/static-assets/wp-content/uploads/2015/08/07155433/eazy-e-death-conspiracy-4.jpg" alt="blog">
</div>
<div class="blog-text">
<span>Eazy-E 7.9.1964-26.3.1995</span>
<br>
<a href="#" class="blog-title">What happened to Eazy-E?</a>
<br>
<p>Conspirary theorists say that he has injected with HIV after a night out. Nobody knows exacly by who but explains the facts that he died so early from a disease that he had only for 3 months. RIP</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</section>
<footer>
<div class="footer">All Eazy E material is licensed please ask nicely if you want anything</div>
<div class="footer">!</div>
<br>
<div class="footer-link"><a href="https://www.youtube.com/watch?v=PIU07K_28ck">Eazy-E -- Boyz-n-The-Hood (Music Video)</a></div>

</footer>
</body>
</html>