Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<object type="image/svg+xml" data="ai15037414603.svg" width="100%" height="100%">
</object>
<nav>
		<ul class="main-nav">
				<li><a href="#" class="logo">Logo</a></li>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
				<li><a href="#">Menu 4</a></li>
		</ul>
</nav>



<!--コンテンツ-->
<div class="main">



  <section class="col-1">
    <h1>Affordances and Design</h1>
    <p>The word "affordance" was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). To Gibson, affordances are a relationship. They are a part of nature: they do not have to be visible, known, or desirable. Some affordances are yet to be discovered. Some are dangerous. I suspect that none of us know all the affordances of even everyday objects.</p>
  </section>
  
  
  
  <section class="col-2">
    <h1>Philosophy</h1>
    <p>
		 Philosophy (from Greek φιλοσοφία, philosophia, literally "love of wisdom"[1][2][3][4]) is the study of general and fundamental problems concerning matters such as existence, knowledge, values, reason, mind, and language.[5][6] The term was probably coined by Pythagoras (c. 570–495 BCE). Philosophical methods include questioning, critical discussion, rational argument and systematic presentation.[7][8] Classic philosophical questions include: Is it possible to know anything and to prove it?[9][10][11] What is most real? However, philosophers might also pose more practical and concrete questions such as: Is there a best way to live? Is it better to be just or unjust (if one can get away with it)?[12] Do humans have free will?[13]

Historically, "philosophy" encompassed any body of knowledge.[14] From the time of Ancient Greek philosopher Aristotle to the 19th century, "natural philosophy" encompassed astronomy, medicine and physics.[15] For example, Newton's 1687 Mathematical Principles of Natural Philosophy later became classified as a book of physics. In the 19th century, the growth of modern research universities led academic philosophy and other disciplines to professionalize and specialize.[16][17] In the modern era, some investigations that were traditionally part of philosophy became separate academic disciplines, including psychology, sociology, linguistics and economics.

Other investigations closely related to art, science, politics, or other pursuits remained part of philosophy. For example, is beauty objective or subjective?[18][19] Are there many scientific methods or just one?[20] Is political utopia a hopeful dream or hopeless fantasy?[21][22][23] Major sub-fields of academic philosophy include metaphysics ("concerned with the fundamental nature of reality and being"),[24] epistemology (about the "nature and grounds of knowledge [and]...its limits and validity" [25]), ethics, aesthetics, political philosophy, logic, philosophy of science and the history of Western philosophy.
	</p>
    <p>
		Since the 20th century, professional philosophers contribute to society primarily as professors, researchers and writers. However, many of those who study philosophy in undergraduate or graduate programs contribute in the fields of law, journalism, politics, religion, science, business and various art and entertainment activities. 
	</p>
<p>
  Early modern philosophy in the Western world begins with thinkers such as Thomas Hobbes and René Descartes (1596–1650).[36] Following the rise of natural science, Modern philosophy was concerned with developing a secular and rational foundation for knowledge and moved away from traditional structures of authority such as religion, scholastic thought and the Church. Major modern philosophers include Spinoza, Leibniz, Locke, Berkeley, Hume, and Kant.[37][38][39] 19th-century philosophy is influenced by the wider movement termed the Enlightenment, and includes figures such as Hegel a key figure in German idealism, Kierkegaard who developed the foundations for existentialism, Nietzsche a famed anti-Christian, J.S. Mill who promoted Utilitarianism, Karl Marx who developed the foundations for Communism and the American William James. The 20th century saw the split between Analytic philosophy and Continental philosophy, as well as philosophical trends such as Phenomenology, Existentialism, Logical Positivism, Pragmatism and the Linguistic turn.
    </p>
    <p>
      The regions of the fertile Crescent, Iran and Arabia are home to the earliest known philosophical Wisdom literature and is today mostly dominated by Islamic culture. Early wisdom literature from the fertile crescent was a genre which sought to instruct people on ethical action, practical living and virtue through stories and proverbs. In Ancient Egypt, these texts were known as sebayt ('teachings') and they are central to our understandings of Ancient Egyptian philosophy. Babylonian astronomy also included much philosophical speculations about cosmology which may have influenced the Ancient Greeks. Jewish philosophy and Christian philosophy are religio-philosophical traditions that developed both in the Middle East and in Europe, which both share certain early Judaic texts (mainly the Tanakh) and monotheistic beliefs. Jewish thinkers such as the Geonim of the Talmudic Academies in Babylonia and Maimonides engaged with Greek and Islamic philosophy. Later Jewish philosophy came under strong Western intellectual influences and includes the works of Moses Mendelssohn who ushered in the Haskalah (the Jewish Enlightenment), Jewish existentialism and Reform Judaism.

Pre-Islamic Iranian philosophy begins with the work of Zoroaster, one of the first promoters of monotheism and of the dualism between good and evil. This dualistic cosmogony influenced later Iranian developments such as Manichaeism, Mazdakism, and Zurvanism.

After the Muslim conquests, Early Islamic philosophy developed the Greek philosophical traditions in new innovative directions. This Islamic Golden Age influenced European intellectual developments. The two main currents of early Islamic thought are Kalam which focuses on Islamic theology and Falsafa which was based on Aristotelianism and Neoplatonism. The work of Aristotle was very influential among the falsafa such as al-Kindi (9th century), Avicenna (980 – June 1037) and Averroes (12th century). Others such as Al-Ghazali were highly critical of the methods of the Aristotelian falsafa. Islamic thinkers also developed a scientific method, experimental medicine, a theory of optics and a legal philosophy. Ibn Khaldun was an influential thinker in philosophy of history.

In Iran several schools of Islamic philosophy continued to flourish after the Golden Age and include currents such as Illuminationist philosophy, Sufi philosophy, and Transcendent theosophy. The 19th and 20th century Arab world saw the Nahda (awakening or renaissance) movement which influenced contemporary Islamic philosophy.
    </p>
    <p>
      Indian philosophy (Sanskrit: darśana; 'world views', 'teachings')[40] are philosophical traditions originating in the Indian subcontinent. Traditions of Indian philosophy are generally classified as either orthodox or heterodox – āstika or nāstika – depending on whether they accept the authority of the Vedas and whether they accept the theories of Brahman and Atman.[41][42] The orthodox schools generally include Nyaya, Vaisheshika, Samkhya, Yoga, Mīmāṃsā and Vedanta, and the common heterodox schools are Jain, Buddhist, Ajñana, Ajivika and Cārvāka. Some of the earliest surviving philosophical texts are the Upanishads of the later Vedic period (1000–500 BCE). Important Indian philosophical concepts include dharma, karma, samsara, moksha and ahimsa. Indian philosophers developed a system of epistemological reasoning (pramana) and logic and investigated topics such as metaphysics, ethics, hermeneutics and soteriology. Indian philosophy also covered topics such as political philosophy as seen in the Arthashastra c. 4th century BCE and the philosophy of love as seen in the Kama Sutra.

The commonly named six orthodox schools arose sometime between the start of the Common Era and the Gupta Empire.[43] These Hindu schools developed what has been called the "Hindu synthesis" merging orthodox Brahmanical and unorthodox elements from Buddhism and Jainism as a way to respond to the unorthodox challenges.[44] Hindu thought also spread east to the Indonesian Srivijaya empire and the Cambodian Khmer Empire.

Later developments include the development of Tantra and Iranian-Islamic influences. Buddhism mostly disappeared from India after the Muslim conquest in the Indian subcontinent, surviving in the Himalayan regions and south India.[45] The early modern period saw the flourishing of Navya-Nyāya (the 'new reason') under philosophers such as Raghunatha Siromani (c.1460–1540) who founded the tradition, Jayarama Pancanana, Mahadeva Punatamakara and Yashovijaya (who formulated a Jain response).[46]

The modern era saw the rise of Hindu nationalism, Hindu reform movements and Neo-Vedanta (or Hindu modernism) whose major proponents included Vivekananda, Mahatma Gandhi and Aurobindo and who for the first time promoted the idea of a unified "Hinduism". Due to the influence of British colonialism, much modern Indian philosophical work was in English and includes thinkers such as Radhakrishnan, Krishna Chandra Bhattacharya, Bimal Krishna Matilal and M. Hiriyanna.
    </p>
    <p>
      Buddhist philosophy begins with the thought of Gautama Buddha (fl. between sixth and fourth centuries BCE) and is preserved in the early Buddhist texts. Buddhist thought is trans-regional and trans-cultural. It originated in India and later spread to East Asia, Tibet, Central Asia, and Southeast Asia, developing new and syncretic traditions in these different regions. The various Buddhist schools of thought are the dominant philosophical tradition in Tibet and Southeast Asian countries like Sri Lanka and Burma. Because ignorance to the true nature of things is considered one of the roots of suffering (dukkha), Buddhist philosophy is concerned with epistemology, metaphysics, ethics and psychology. The ending of dukkha also encompasses meditative practices. Key innovative concepts include the Four Noble Truths, Anatta (not-self) a critique of a fixed personal identity, the transience of all things (Anicca), and a certain skepticism about metaphysical questions.

Later Buddhist philosophical traditions developed complex phenomenological psychologies termed 'Abhidharma'. Mahayana philosophers such as Nagarjuna and Vasubandhu developed the theories of Shunyata (emptiness of all phenomena) and Vijnapti-matra (appearance only), a form of phenomenology or transcendental idealism. The Dignāga school of Pramāṇa promoted a complex form of epistemology and Buddhist logic. After the disappearance of Buddhism from India, these philosophical traditions continued to develop in the Tibetan Buddhist, East Asian Buddhist and Theravada Buddhist traditions. The modern period saw the rise of Buddhist modernism and Humanistic Buddhism under Western influences and the development of a Western Buddhism with influences from modern psychology and Western philosophy.
    </p>
    <p>
      East Asian philosophical thought began in Ancient China, and Chinese philosophy begins during the Western Zhou Dynasty and the following periods after its fall when the "Hundred Schools of Thought" flourished (6th century to 221 BCE).[48][49] This period was characterized by significant intellectual and cultural developments and saw the rise of the major philosophical schools of China, Confucianism, Legalism, and Daoism as well as numerous other less influential schools. These philosophical traditions developed metaphysical, political and ethical theories such Tao, Yin and yang, Ren and Li which, along with Chinese Buddhism, directly influenced Korean philosophy, Vietnamese philosophy and Japanese philosophy (which also includes the native Shinto tradition). Buddhism began arriving in China during the Han Dynasty (206 BCE–220 CE), through a gradual Silk road transmission and through native influences developed distinct Chinese forms (such as Chan/Zen) which spread throughout the East Asian cultural sphere. During later Chinese dynasties like the Ming Dynasty (1368–1644) as well as in the Korean Joseon dynasty (1392–1897) a resurgent Neo-Confucianism led by thinkers such as Wang Yangming (1472–1529) became the dominant school of thought, and was promoted by the imperial state.

In the Modern era, Chinese thinkers incorporated ideas from Western philosophy. Chinese Marxist philosophy developed under the influence of Mao Zedong, while a Chinese pragmatism under Hu Shih and New Confucianism's rise was influenced by Xiong Shili. Modern Japanese thought meanwhile developed under strong Western influences such as the study of Western Sciences (Rangaku) and the modernist Meirokusha intellectual society which drew from European enlightenment thought. The 20th century saw the rise of State Shinto and also Japanese nationalism. The Kyoto School, an influential and unique Japanese philosophical school developed from Western phenomenology and Medieval Japanese Buddhist philosophy such as that of Dogen.
    </p>
    <p>
      African philosophy is philosophy produced by African people, philosophy that presents African worldviews, ideas and themes, or philosophy that uses distinct African philosophical methods. Modern African thought has been occupied with Ethnophilosophy, with defining the very meaning of African philosophy and its unique characteristics and what it means to be African.[50] During the 17th century, Ethiopian philosophy developed a robust literary tradition as exemplified by Zera Yacob. Another early African philosopher was Anton Wilhelm Amo (c. 1703–1759) who became a respected philosopher in Germany. Distinct African philosophical ideas include Ujamaa, the Bantu idea of 'Force', Négritude, Pan-Africanism and Ubuntu. Contemporary African thought has also seen the development of Professional philosophy and of Africana philosophy, the philosophical literature of the African diaspora which includes currents such as black existentialism by African-Americans. Modern African thinkers have been influenced by Marxism, African-American literature, Critical theory, Critical race theory, Postcolonialism and Feminism.
    </p>
    <p>
      Indigenous American philosophy is the philosophy of the Indigenous people of the Americas. There is a wide variety of beliefs and traditions among these different American cultures. Among some of the Native Americans in the United States there is a belief in a metaphysical principle called the "Great Mystery" (Siouan: Wakan Tanka, Algonquian: Gitche Manitou). Another widely shared concept was that of Orenda or "spiritual power". According to Peter M. Whiteley, for the Native Americans, "Mind is critically informed by transcendental experience (dreams, visions and so on) as well as by reason."[51] The practices to access these transcendental experiences are termed Shamanism. Another feature of the indigenous American worldviews was their extension of ethics to non-human animals and plants.[51][52]

In Mesoamerica, Aztec philosophy was an intellectual tradition developed by individuals called Tlamatini ('those who know something') [53] and its ideas are preserved in various Aztec codices. The Aztec worldview posited the concept of an ultimate universal energy or force called Ometeotl which can be translated as "Dual Cosmic Energy" and sought a way to live in balance with a constantly changing, "slippery" world. The theory of Teotl can be seen as a form of Pantheism.[54] Aztec philosophers developed theories of metaphysics, epistemology, values, and aesthetics. Aztec ethics was focused on seeking tlamatiliztli (knowledge, wisdom) which was based on moderation and balance in all actions as in the Nahua proverb "the middle good is necessary".[54]

The Inca civilization also had an elite class of philosopher-scholars termed the Amawtakuna who were important in the Inca education system as teachers of religion, tradition, history and ethics. Key concepts of Andean thought are Yanantin and Masintin which involve a theory of “complementary opposites” that sees polarities (such as male/female, dark/light) as interdependent parts of a harmonious whole.
    </p>
  </section>
  
 
  
  <section class="col-3">
    <h1>psychology</h1>
    <p>
		Psychology is the science of behavior and mind, embracing all aspects of conscious and unconscious experience as well as thought. It is an academic discipline and a social science which seeks to understand individuals and groups by establishing general principles and researching specific cases.[1][2]

In this field, a professional practitioner or researcher is called a psychologist and can be classified as a social, behavioral, or cognitive scientist. Psychologists attempt to understand the role of mental functions in individual and social behavior, while also exploring the physiological and biological processes that underlie cognitive functions and behaviors.

Psychologists explore behavior and mental processes, including perception, cognition, attention, emotion (affect), intelligence, phenomenology, motivation (conation), brain functioning, and personality. This extends to interaction between people, such as interpersonal relationships, including psychological resilience, family resilience, and other areas. Psychologists of diverse orientations also consider the unconscious mind.[3] Psychologists employ empirical methods to infer causal and correlational relationships between psychosocial variables. In addition, or in opposition, to employing empirical and deductive methods, some—especially clinical and counseling psychologists—at times rely upon symbolic interpretation and other inductive techniques. Psychology has been described as a "hub science",[4] with psychological findings linking to research and perspectives from the social sciences, natural sciences, medicine, humanities, and philosophy.

While psychological knowledge is often applied to the assessment and treatment of mental health problems, it is also directed towards understanding and solving problems in several spheres of human activity. By many accounts psychology ultimately aims to benefit society.[5][6] The majority of psychologists are involved in some kind of therapeutic role, practicing in clinical, counseling, or school settings. Many do scientific research on a wide range of topics related to mental processes and behavior, and typically work in university psychology departments or teach in other academic settings (e.g., medical schools, hospitals). Some are employed in industrial and organizational settings, or in other areas[7] such as human development and aging, sports, health, and the media, as well as in forensic investigation and other aspects of law. 
	</p>
  <p>
   Western philosophy is the philosophical tradition of the Western world and dates to Pre-Socratic thinkers who were active in Ancient Greece in the 6th century BCE such as Thales (c. 624–546 BCE) and Pythagoras (c. 570–495 BCE) who practiced a "love of wisdom" (philosophia)[33] and were also termed physiologoi (students of physis, or nature). Socrates was a very influential philosopher, who insisted that he possessed no wisdom but was a pursuer of wisdom.[34] Western philosophy can be divided into three eras: Ancient (Greco-Roman), Medieval philosophy (Christian European), and Modern philosophy.

The Ancient era was dominated by Greek philosophical schools which arose out of the various pupils of Socrates, such as Plato who founded the Platonic Academy, and was one of the most influential Greek thinkers for the whole of Western thought.[35] Plato's student Aristotle was also extremely influential, founding the Peripatetic school. Other traditions include Cynicism, Stoicism, Greek Skepticism and Epicureanism. Important topics covered by the Greeks included metaphysics (with competing theories such as atomism and monism), cosmology, the nature of the well-lived life (eudaimonia), the possibility of knowledge and the nature of reason (logos). With the rise of the Roman empire, Greek philosophy was also increasingly discussed in Latin by Romans such as Cicero and Seneca.

Medieval philosophy (5th – 16th century) is the period following the fall of the western Roman empire and was dominated by the rise of Christianity and hence reflects Judeo-Christian theological concerns as well as retaining a continuity with Greco-Roman thought. Problems such as the existence and nature of God, the nature of faith and reason, metaphysics, the problem of evil were discussed in this period. Some key Medieval thinkers include St. Augustine, Thomas Aquinas, Boethius, Anselm and Roger Bacon. Philosophy for these thinkers was viewed as an aid to Theology (ancilla theologiae) and hence they sought to align their philosophy with their interpretation of sacred scripture. This period saw the development of Scholasticism, a text critical method developed in medieval universities based on close reading and disputation on key texts. The Renaissance (1355–1650) period saw increasing focus on classic Greco-Roman thought and on a robust Humanism. 
</p>
  </section>
</div>

<section style="text-align:center; font-size:14px;">
   <cite>the source the authority "Wikipedia"</cite>
  </section>

              
            
!

CSS

              
                body {
	margin: 0;
}
.main-nav li {
	list-style:none;
}
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
  display: block;
  padding: 15px;
  text-decoration: none;
}
.main-nav .logo {
  background: #4584b1;
}
.main-nav {
  display: flex;
  justify-content: space-between;
}


/*コンテンツ*/
.main section {
  -webkit-flex: 1;
  flex: 1;
  margin: 10px;
  border-radius: 5px;
  background: #F5F0CF;
  padding: 15px;
}
.main h1 {
  color: #E6AC27;
  font-size: 1.5rem;
}
.main p {
  margin-top: 10px;
}
.main {
  display: flex;
  width:100%;
	background:#f00;
	justify-content: space-between;
}
.main-nav, .main {
  display: -webkit-flex;
  display: flex;
}
.main-nav li:first-child {
  margin-right: auto;
}
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  background: #60B99A;
  color: #fff;
    display: block;
    padding: 15px;
    text-decoration: none;
}
.main-nav .logo {
  background: #4584b1;
}
.main .col-2 {
  -webkit-flex: 2;
  flex: 2;
}
/* Mobile */
@media screen and (max-width: 700px) {
    .main {
        -webkit-flex-direction: column;
    flex-direction: column;
    }
}

              
            
!

JS

              
                
              
            
!
999px

Console