D8 by @giorgio-g97 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

text/plainDefinisce un metodo di non codifica dei valori di un form
<textarea>Area di testo libero espandibile per form HTML
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<canvas>Tag per disegnare grafica dinamica su pagine web.
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

DEMO: Hi-Lo Game

Tastiera digitale

Array of Colors

ArteFORMA — Architectural Digita

I Nostri Servizi

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">

<head>
  	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D8</title>
</head>

<body>
    <header>
        <img class="header-logo" src="https://miro.medium.com/v2/resize:fit:8978/1*s986xIGqhfsN8U--09_AdA.png" alt="logo-medium">
        <div class="search-bar">
            <i class="fa-solid fa-magnifying-glass"></i>
            <i class="fa-regular fa-bookmark"></i>
            <i class="fa-regular fa-bell"></i>
          	<button>Resume membership</button>
            <div class="search-user"><span>T</span></div>
        </div>
    </header>
    <main>
        <div class="news">
            <div class="news-header">
                <span>FOLLOWING</span>
                <span>RECOMENDED FOR YOU</span>
            </div>
            <div class="news-main">
                <div class="news-cont">
                    <div class="news-title">
                      <div class="news-user">
                        <i class="fa-regular fa-circle-user"></i>
                        <span>Navoda Nilakshi</span>
                    </div>
                        <h1>React state management in 2022 - Return of the Redux</h1>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat exercitationem animi
                            nesciunt laudantium distinctio assumenda optio vitae itaque dolorem laboriosam nobis dolores
                            eligendi, ab explicabo quasi, quos a esse provident
                          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat exercitationem animi
                            nesciunt laudantium distinctio assumenda optio vitae itaque dolorem laboriosam nobis dolores
                            eligendi, ab explicabo quasi, quos a esse provident
                      	</p>
                      <div class="news-footer">
                        <div class="nf-left">
                          <span class="date">3 Dec</span>
                          <span class="time-to-read">4 min</span>
                          <span class="tag">React</span>
                          <span class="categ">Popular on Medium</span>
                        </div>
                        <div class="nf-right">
                            <i class="fa-regular fa-bookmark"></i>
                            <i class="fa-solid fa-ellipsis"></i>
                        </div>
                    </div>
                    </div>
                  <div class="news-img">
                        <img                    src="https://miro.medium.com/v2/resize:fill:200:134/1*VkgtPKbsGWtlRGT3VVCEsw.jpeg"
                            alt="news-img">
                  </div>
                </div>
              <div class="news-cont">
                    <div class="news-title">
                      <div class="news-user">
                        <i class="fa-regular fa-circle-user"></i>
                        <span>Navoda Nilakshi</span>
                    </div>
                        <h1>React state management in 2022 - Return of the Redux</h1>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat exercitationem animi
                            nesciunt laudantium distinctio assumenda optio vitae itaque dolorem laboriosam nobis dolores
                            eligendi, ab explicabo quasi, quos a esse provident
                          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat exercitationem animi
                            nesciunt laudantium distinctio assumenda optio vitae itaque dolorem laboriosam nobis dolores
                            eligendi, ab explicabo quasi, quos a esse provident
                      	</p>
                      <div class="news-footer">
                        <div class="nf-left">
                          <span class="date">3 Dec</span>
                          <span class="time-to-read">4 min</span>
                          <span class="tag">React</span>
                          <span class="categ">Popular on Medium</span>
                        </div>
                        <div class="nf-right">
                            <i class="fa-regular fa-bookmark"></i>
                            <i class="fa-solid fa-ellipsis"></i>
                        </div>
                    </div>
                    </div>
                  <div class="news-img">
                        <img                    src="https://miro.medium.com/v2/resize:fill:200:134/1*VkgtPKbsGWtlRGT3VVCEsw.jpeg"
                            alt="news-img">
                  </div>
                </div>
              <div class="news-cont">
                    <div class="news-title">
                      <div class="news-user">
                        <i class="fa-regular fa-circle-user"></i>
                        <span>Navoda Nilakshi</span>
                    </div>
                        <h1>React state management in 2022 - Return of the Redux</h1>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat exercitationem animi
                            nesciunt laudantium distinctio assumenda optio vitae itaque dolorem laboriosam nobis dolores
                            eligendi, ab explicabo quasi, quos a esse provident
                          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat exercitationem animi
                            nesciunt laudantium distinctio assumenda optio vitae itaque dolorem laboriosam nobis dolores
                            eligendi, ab explicabo quasi, quos a esse provident
                      	</p>
                      <div class="news-footer">
                        <div class="nf-left">
                          <span class="date">3 Dec</span>
                          <span class="time-to-read">4 min</span>
                          <span class="tag">React</span>
                          <span class="categ">Popular on Medium</span>
                        </div>
                        <div class="nf-right">
                            <i class="fa-regular fa-bookmark"></i>
                            <i class="fa-solid fa-ellipsis"></i>
                        </div>
                    </div>
                    </div>
                  <div class="news-img">
                        <img                    src="https://miro.medium.com/v2/resize:fill:200:134/1*VkgtPKbsGWtlRGT3VVCEsw.jpeg"
                            alt="news-img">
                  </div>
                </div>
            </div>
        </div>
        <div class="news-side">
            <div class="social">
              <div>
                <img src="https://cdn-icons-png.flaticon.com/512/5968/5968885.png" alt="medium-icon">
                <span>+</span>
                <img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter-icon">
              </div>
                <p>Discover Medium writers you already follow on Twitter</p>
                <button><span><img src="https://www.freepnglogos.com/uploads/twitter-logo-png/twitter-logo-vector-png-clipart-1.png" alt="twitter-icon"></span>Connect to Twitter</button>
                <p class="maybe">Maybe later</p>
            </div>
            <div class="recom">
                <p>Recomended Topics</p>
                <span>Technology</span>
                <span>Money</span>
                <span>Business</span>
            </div>
            <div class="follow">
                <p>Who to follow</p>
                <div class="follow-users">
                    <i class="fa-regular fa-circle-user"></i>
                    <h4>Lessig</h4>
                    <p>law professor, activist</p>
                </div>
                <div class="follow-button">
                    <button>Follow</button>
                </div>
            </div>
        </div>
    </main>
</body>

</html>

html {
  font-family: 'Roboto', sans-serif;
}

body {
  margin: 0 45px;
  background-color: #f2f2f2;
}

header {
    position: fixed;
    width: 100%;
    height: 60px;
    background: white;
    top: 0px;
    left: 0;
    display: flex;
    justify-content: space-between;
}

.header-logo {
    position: relative;
    left: 40px;
}

.search-bar {
    position: relative;
    right: 40px;
    width: 400px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

button {
  background-color: white;
  border: 1px solid black;
  border-radius: 24px;
  padding: 0.5rem;
}

.search-user {
  background-color: darkorange;
  color: white;
  border-radius: 50%;
  height: 33px;
  width: 33px;
  /* c'è un'alternativa che abbiamo già visto a lezione a line-height? */
  line-height: 33px;
  text-align: center;
}

main {
  display: flex;
}

.news {
  width: 70%;
  margin-top: 130px;
}

.news-header {
  width: 90%;
  color: gray;
  margin-bottom: 3rem;
  border-bottom: 1px solid #bababa;
  padding-bottom: 1rem; /* imposto lo stesso padding-bottom a span per far coincidere la linea */
}

.news-header span {
  padding-bottom: 1rem;
  margin-right: 1rem;
}

.news-header span:nth-child(2) {
  color: black;
  font-weight: bold;
  border-bottom: 1px solid #303030;
}

.news-main {
  width: 90%
}

.news-cont {
  display: flex;
  align-items: center;
}

.news-title {
  width: 70%;
  margin-right: 1rem;
  margin-bottom: 2rem;
}

.news-title span, p {
  color: gray;
}
.news-title p {
  /* Test wrap ellipsis */
  /*text-overflow: ellipsis;
  overflow:hidden;
  white-space: normal;*/
}

.news-user span {
  color:black;
  font-weight: bold;
}

.news-footer {
  display: flex;
  justify-content: space-between;
}

.nf-left{
    width: 55%;
    display: flex;
    justify-content: space-between;
  	align-items: center;
}

.nf-left span:nth-child(3) {
    background-color: lightgray;
    padding: 0.4em;
    border-radius: 24px;
}

.nf-right {
    display: flex;
    width: 10%;
    justify-content: space-around;
}

.news-img {
  width: 30%;
}

.news-img img {
  width: 100%;
}

.news-side {
  margin-top: 80px;
  width: 30%;
}

.social {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  	align-items: center;
    height: 33%;
    text-align: center;
    font-size: 1.3rem;
}

.social div {
    display: flex;
    height: 33%;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.social div span {
  font-size: 2em;
}

.social div img {
    height: 50%;
    margin: 0 0.5em;
}

.social button {
    width: 250px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social button span {
  width: 10%;
}

.social button span img {
  width: 100%;
  height: 100%;
}

.maybe{
  text-decoration: underline;
}