D8 by @giorgio-g97 - Codewith.it

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

References

acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<em>Formatta il testo in corsivo/italico enfatizzato
<embed>Tag per l'incorporamento di contenuti multimediali
classDefinisce una o più classi per elemento
<br>Inserisce uno spazio vuoto tra due elementi HTML.
dirnameInvia informazioni sulla direzione di scrittura da un elemento input

Users

Log in to search for users

Explore

Find inspiration

Il mio primo file HTML

Color Assigment

Il mondo della tecnologia

APEX Flux - Enhance your Atmospere

Quiz ristrutturazione

Architettura del Successo | Consul

TEST COLSPAN ROWSPAN

Italiano-Cinema [Bacheca]

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