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

NW5-Manchester- Mustafa Acar-HTML-CSS-Coursework-Week1 (Articles) #227

Open
MustafaAcar-sys wants to merge 1 commit into
base: master
Choose a base branch
from
Open

NW5-Manchester- Mustafa Acar-HTML-CSS-Coursework-Week1 (Articles) #227

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
70 changes: 67 additions & 3 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,70 @@
/**
* Add your custom styles below
*
body {
font-family: "Mochiy Pop One", sans-serif;
margin: 0;
font-size: larger;
}
/* HEADER*/
.header {
background-color: #4268CC;
text-align: center;
color: white;
padding: 30px;
margin: 30px;
}

main {
height: 100%;
padding: 2rem;
}
.section1 {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
font-size: 12px;
padding: 15px;
margin: 10px;

}
.article {
color: white;
width: 50%;
background-color: #4268CC;
padding: 15px;
margin: 10px;
}
.section2 {
background-color: #ebc621;
padding: 10px;
}

.article2 {
margin: 50px;
background-color: #bcbcbce9;
padding: 50px;
text-align: center;
}
.buttonarticle{
text-decoration: none;
background-color:hsl(27, 96%, 40%);
color:white;
border-radius: 5px;
padding: 0.5rem 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;


}

/* FOOTER */
.footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
* Remember:
* - Be organised, use comments and separate your styles into meaningful chunks
* for example: General styles, Navigation styles, Hero styles, Footer etc.
Expand Down
104 changes: 103 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,107 @@
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
<header class="header">
<h1>Positive Psychology</h1>
<p>
Positive psychology is a branch of psychology focused on the character strengths
and behaviors that allow individuals to build a life of meaning and purpose—to move
beyond surviving to flourishing.
Theorists and researchers in the field have sought to identify the elements of a good life.
They have also proposed and tested practices for improving life satisfaction and well-being.
</p>
</header>

<main>
<section class="section1">
<article class="article">
<h2>What Is Positive Psychology?</h2>
<p>
Positive psychology is one of the newest branches of psychology to emerge.
This particular area of psychology focuses on how to help human beings prosper
and lead healthy, happy lives. While many other branches of psychology
tend to focus on dysfunction and abnormal behavior, positive psychology is centered
on helping people become happier.
</p>
<p>Positive psychology is designed to "complement and extend the problem-focused
psychology that has been dominant for decades," explained the late Christopher Peterson,
author of "A Primer in Positive Psychology" and professor at the University of Michigan,
in a 2008 article published in Psychology Today.
</p>
<button class="buttonarticle">Read More</button>
</article>
<article class="article">
<h2>Levels</h2>
<p>
Positive psychology is often referred to three different levels such as subjective level,
individual level and group level.
</p>
<p>
Positive psychology is often referred to three different levels such as subjective level,
individual level and group level.
</p>
<p>
Positive psychology is often referred to three different levels such as subjective level,
individual level and group level.
</p>
<button class="buttonarticle">Read More</button>
</article>
<article class="article">
<h2>Uses</h2>
<p>
Positive psychology can have a range of real-world applications in areas including education,
therapy, self-help, stress management, and workplace issues.
Using strategies from positive psychology, teachers, coaches, therapists, and employers
can motivate others and help individuals understand and develop their personal strengths.
Some of the major topics of interest in positive psychology include:
<ul>
<li>Gratitude</li>
<li>Hope</li>
<li>Optimism</li>
<li>Positive thinking</li>
<li>Resilience</li>
</ul>
</p>
<button class="buttonarticle">Read More</button>
</article>
</section>

<section class="section2">
<article class="article2">
<h2>History</h2>
<p>
After the Second World War, the focus of psychology was on treating abnormal
behaviors and the resulting mental illnesses.
</p>
<p>
Dissatisfied with this approach, humanist psychologists, such as Abraham Maslow,
Carl Rogers, and Eric Fromm helped renew interest in the more positive
aspects of human nature.
</p>
</article>
<article class="article2">
<h2>Popularity</h2>
<p>
It's one of the most desired web frameworks currently in use.
Multiple industry-leading apps are built with React.
</p>
<p>
It's a proven technology that's capable of producing
enterprise-class solutions.
</p>
</article>
</section>
</main>

<footer class="footer">
<p>&copy; Mustafa's ınterest!</p>

<a
href="https://ppc.sas.upenn.edu/"
>POSITIVE PSYCHOLOGY CENTER</a
>
</footer>


</body>
</html>