Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file added .DS_Store
Binary file not shown.
Binary file added Img/.DS_Store
Binary file not shown.
Binary file added Img/HTML logo.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/css design.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/cyf_brand.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Img/github.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
99 changes: 91 additions & 8 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,91 @@
/**
* Add your custom styles below
*
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
body {
font-family: "roboto", Times, serif;
}

/* ** Header Start ** */
.header__title {
color: rgb(176, 19, 1);
font-size: 30px;
}

.header__desc {
font-size: 17px;
}

.header__navbar {
margin-left: 50px;
margin-right: 50px;
padding-left: 15px;
padding-right: 15px;
max-width: max-content;
background-color: #efefef;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}

.navigation:hover {
color: rgb(176, 19, 1);
}

/* ** Header End ** */

/* ** Article Start ** */
.article {
padding-left: 50px;
padding-right: 50px;
margin-top: 30px;
}

.article__img {
max-width: 100%;
width: 700px;
height: 400px;
max-height: 100%;
border-radius: 15px;
object-fit: cover;
}
section:nth-child(1) {
color: blueviolet;
width: 50%;
}

.article__text {
max-width: 100%;
width: 700px;
}

h3 {
color: rgba(107, 107, 107, 0.794);
font-size: 12px;
font-weight: 400;
}
.articleBtn {
border: none;
border-radius: 5px;
background-color: rgb(176, 19, 1);
color: white;
font-weight: 500;
padding: 10px;
}

.articleBtn:hover {
background-color: rgb(249, 249, 249);
color: rgb(176, 19, 1);
border: none solid rgb(176, 19, 1);
}
/* ** Article End ** */

/* ** Footer Start ** */
.footer {
padding-left: 50px;
padding-right: 50px;
}

.footer__copyright {
text-align: center;
font-size: 15px;
color: rgba(107, 107, 107, 0.794);
}
/* ** Footer End ** */
49 changes: 46 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>CodeYourFuture News</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -16,7 +16,50 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
Comment thread
Miladepour marked this conversation as resolved.
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<!-- ** Header ** -->
<header class="header">
<nav class="header__navbar">
<h1 class="header__title">CodeYourFuture News</h1>
<p class="header__desc" >CYF students are trained in full-stack web development by volunteers from the tech industry, putting a strong emphasis on collaboration and product development through tech projects.
</p>
</nav>
</header>
<!-- ** Header ** -->
<!-- ** Main ** -->
<main class="main">
<!-- ** Article ** -->
<article>
<section class="article">
<h2 class="article__title">CSS Week 1</h2>
<img class="article__img" src="Img/css design.jpg" alt="css design">
<p class="article__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto excepturi eveniet eius recusandae neque aliquid a delectus itaque dolor dignissimos? Maxime adipisci ratione qui beatae quam provident dolorum facilis amet!</p>
<h3>Date: 27 July 2022</h3>
<a href="https://syllabus.codeyourfuture.io/html-css/"><button class="articleBtn">Learn more ...</button></a>
</section>
<section class="article">
<h2 class="article__title">HTML Week 1</h2>
<img class="article__img" src="Img/HTML logo.jpg" alt="html logo">
<p class="article__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto excepturi eveniet eius recusandae neque aliquid a delectus itaque dolor dignissimos? Maxime adipisci ratione qui beatae quam provident dolorum facilis amet!</p>
<h3>Date: 27 July 2022</h3>
<a href="https://syllabus.codeyourfuture.io/html-css/"><button class="articleBtn">Learn more ...</button></a>
</section>
<section class="article">
<h2 class="article__title">Git and Github</h2>
<img class="article__img" src="Img/github.jpg" alt="github">
<p class="article__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iusto excepturi eveniet eius recusandae neque aliquid a delectus itaque dolor dignissimos? Maxime adipisci ratione qui beatae quam provident dolorum facilis amet!</p>
<h3>Date: 27 July 2022</h3>
<a href="https://syllabus.codeyourfuture.io/git/overview"><button class="articleBtn">Learn more ...</button></a>
</section>
</article>
<!-- ** Article ** -->
</main>
<!-- ** Main ** -->
<!-- ** Footer ** -->
<footer class="footer">
<hr class="footer__solid-line">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum cum ipsa obcaecati, consequatur sapiente porro numquam atque perferendis est earum ratione voluptate aperiam non maiores odio ex eaque deserunt suscipit alias nobis, illum neque eius amet? Quos repellendus, sapiente vitae, sit dolore eaque tenetur ab, saepe ex voluptates incidunt hic.</p>
<p class="footer__copyright">© All rights reserved | CodeYourFuture</p>
</footer>
<!-- ** Footer ** -->
</body>
</html>