D8 by @giorgio-g97 - Codewith.it

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

References

methodDetermina il metodo di invio dei dati di un form al server
<meta>Definisce i meta dati di una pagina web.
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<canvas>Tag per disegnare grafica dinamica su pagine web.
<h6>Titolo di intestazione di sesto livello
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form

Users

Log in to search for users

Explore

Find inspiration

Esercio-selettori-di-relazione

La ricetta della torta della nonn

esercitazione n.1

copia di unfollow me

esercitazione 1

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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;
}