D8 by @giorgio-g97 - Codewith.it

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

References

text/plainDefinisce un metodo di non codifica dei valori di un form
<div>Crea contenitori generici o sezioni in una pagina
<ol>Crea liste ordinate o numerate.
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
minImposta il valore numerico o temporale minimo per un elemento input
requiredRende obbligatorio un campo di input

Users

Log in to search for users

Explore

Find inspiration

Esercitazione Informatica

esercitazione 2

Esercitazione n.1

Esercizio 1 Html

“esercitazione4.html”

LB Campodarsego(2)(2)(2)

Review of Functions I

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