D8 by @giorgio-g97 - Codewith.it

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

References

accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
application-x-www-form-urlencodedCodifica dei caratteri di un form
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<td>Definisce una cella di una tabella HTML.
<video>Integra e controlla video in una pagina HTML
hrefDefinisce l'URL della risorsa/pagina di destinazione.

Users

Log in to search for users

Explore

Find inspiration

Conta vocali prof

Esercitazione n 1

Costruzione di tabella con html5

FREE NUTAKU CODES 2024 april

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