сгибать-обертку: плед; не могу заставить их работать - PullRequest
Новая
       17

сгибать-обертку: плед; не могу заставить их работать

0 голосов
/ 24 июня 2018

Мне было поручено воссоздать следующий веб-сайт: https://plantanapp.com/learn

Я сделал некоторые вещи, но каждый раз, когда я решаю одну проблему, появляются две другие. Я новичок в HTML и CSS и не очень понимаю, что, где и почему должны работать элементы или нет.

Это HTML и CSS: http://jsfiddle.net/rvgxudt4/

body,html{
    margin: 0px; padding: 0px; border: 0px;
}
.whole {
    
    width:100%;
    font-family: sans-serif, Arial, Helvetica ;
    color: white;
    background-color: black;
    overflow: hidden;
    margin: 0 auto;
    
}

.Module_1{
    position: static;
    background-image: url(pixels.png);
    background-color: #0CBF99;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    max-width: 100%;
    
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
      
}

.logo {
    
    background-size:100%;
    background-repeat:no-repeat;
    background-position: center;
    background-image:url(papp-logo.png);
    width: 200px;
    height: 200px;
    position: relative;
    top: -10%;
    
    
}

.content {
    height: 40vh;
    width: 30vw;
    color:white;
    font-weight: 500;
    text-align: left;
    line-height: 4.5vh;
    vertical-align: middle;
    
    
}



#Buton1 {
    
    position: relative;
    background-color: #F47721;
    color:white;
    border: 0px;
    
    width: 15vw;
    height: 30px;
    
    min-width: 5vw;
    max-width: 20vw;
    
    border-radius: 5px;    
    line-height: 10px;
    margin: 10pt 0 5pt 0;
    
    text-decoration: none;
    cursor: pointer;
    
    
}


.Module_2{
    background-color: #12686A;    
    background-repeat: no-repeat;
    background-size: auto;
    max-width: 100%;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    
    
}

.Module_3{
    position:relative;
    background-color: #0CBF99;
    background-image: url(example-apps.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    max-width: 100%;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;    
    align-items: center;
}

.Module_4{
    position: relative;
    background-image: url(rules-bg.jpg);
    background-color: #12686A;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;    
    justify-content: center;
    
    
}

.the_rules {
    position:relative;  
    color:black;
    text-align: center;
    
    font-weight: bolder;
    align-self:flex-start;
    left:35%;
    bottom:0%;
    
}

.container_4 {
    position: relative;
    bottom: 90px;
    width: 70%;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-self: center;
    top:10%;
    
    
}

.img_nr_1 {
    position: relative;
    background-image:url(1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 230px;
    height: 300px;
    align-self: center;
}

.content_pg4_1 {
    
    
    height: 15vh;
    width: 26vw;
    color:black;
    
    font-weight: 200;
    text-align: left;
    line-height: 40px;
    align-self: center;
    
    
    
}



.Module_5{
    position: static;
    background-color: #12686A;
    background-image: url(rules-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
}
    
.Module_6 {
    position: static;
    background-color: #12686A;
    background-image: url(rules-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    display:flex;
    flex-direction: row;
    justify-content: center;
    
    
}

.Module_7 {
  position: static;
    background-color: #12686A;
    background-image: url(rules-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    
    
    
}

.Module_8{
    background-color: #12686A;
    margin: 0 auto;
    width: 100%;
    height: 100vh;

}

.Module_9{
    position: static;
    background-color: #0CBF99;  

    width: 100%;
    height: 100vh;

}

.Module_10{
    background-color: #12686A;    
    margin: 0 auto;
    width: 100%;
    height: 100vh;
}

.rectangle {
    position:absolute;
    color:white;
	margin: 0 auto;
    line-height: 30px;
    
    width: 30vw;
    height: 80px;
    
    min-width: 5vw;
    
    
    
	background: #F47721;    
    bottom:0;
    text-align: center;
    vertical-align: middle;
    top: 75%;
    
    
    
    
}

.center_title {
    position:relative;
    
    width: 40%;
    padding: 10px;
    text-align: center;
    
    color:white;
    top:80px;
        
}

#chat_bubble {
    background-color: #1ABC9C;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(chat-bubble-circle-3-512.png);
    background-size: cover;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: 0px 5px 12px -3px black ;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    left: 94%;
    bottom: -10px;
    transform: translate(-50%, -50%);
    cursor: pointer;
}


#take_me_directly {
    font-size: 13px;
    font-weight: 850;
    color: white;
    text-decoration: none;   
    
}

.what_is {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(whatis.png);
    width:400px;
    height:300px;
}



.img_nr_2 {
    position: relative;
    background-image: url(2.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 230px;
    height: 300px;
    align-self:center;
}



.img_plant_2 {
    background-image: url(plant-2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    width:16vw;
    height: 26vh;
    position: relative;
    align-self: flex-end;
    left:-5%;
    top:16%;
    
    
}



.content_pg5 {
    position: relative;
    height: 15vh;
    width:30vw;
    color:black;
    
    text-align:left;
    line-height: 40px;
    align-self: center;
    
    
    
}



.img_nr3 {
    position: relative;
    background-image:url(3.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
     width: 230px;
    height: 300px;
    align-self: center;
}

.content_pg6 {
    position: relative;
    text-align: left;
    color: black;
    width: 27vw;
    height: 35vh;
    
    line-height: 40px;
    align-self: center;
    
}

#paragraf_pg6 {
    font-size:1.4vw;
}

.img_plant_3 {
    background-image: url(plant-3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    width:16vw;
    height: 55vh;
    position: relative;
    align-self: flex-end;
    left: 6.5%;
    bottom: -3%;
}

.img_nr4 {
    background-image: url(4.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 230px;
    height: 300px;
    align-self: center;
    
    
}

.content_pg7 {
    color: black;
    width:30vw;
    height: 25vh;
    
    text-align: left;
    align-self: center;
    line-height: 40px;
}

.img_plant_4 {
    background-image: url(plant-4.png);
    background-repeat:no-repeat;
    background-size: 100%;
    background-position: bottom;
    width:16vw;
    height: 200vh;
    position: absolute;
    align-self: flex-end;
    right:5%;
}



.container_5 {
    position: relative;
    width: 690px;
    height: 300px;
    display:flex;
    flex-wrap:wrap;
    justify-content: center;  
    left:2%;
    
}

.container_6 {
    position: relative;
    width: 60vw;
    height: 35vh;
    display:flex;
    flex-wrap:wrap;
    justify-content: center; 
    align-self: center;
    left: 9%
    
}

.container_7 {
    
    width:50vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    
    
}

.img_plant_1 {
    background-image: url(plant-1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    width:17vw;
    height: 20vh;
    
    position: absolute;
    bottom:-7%;
    right: 2%;
    
}

.sign_up {
    
}

.container_9 {
    position: static;
    display: flex;
    
    
}

.container_1 {
    position: relative;
    height: 70vh;
    width: 50vw;
    color:white;
    font-size: 1.7vw;
    font-weight: 500;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}



.text_1 {
    margin: 0;
    padding: 0;
    max-width: 39vw;
    text-align: left;
    
    
}
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css' rel='stylesheet'>
        
        <link href="Style.css" type="text/css" rel="stylesheet">
        <link href="media_query_sheet.css" type="text/css" rel="stylesheet">
        
        <title>PlantAnApp</title>
    </head>

    <body>
        
        <div class="whole">
            
        <div class="Module_1">
            
                <div class="logo"></div>
                <div class="text_1">
                <h1>Think an app.</h1>
                <h1><b>Plant an app.</b></h1>
                <h1>Grow an app.</h1>
                <b>Are you up to the challenge of building your own web-app</b> with mentor gudance between July 1<sup>st</sup> and July 31 <sup>st</sup> ?
                    
                <br>
                <a href="#Module2"><button type="button" id="Buton1"> READ ON</button></a>
                <p><a href="#form1" id="take_me_directly">Take me directly to the sign-up form</a></p>
                </div>
            
        </div>
    
        <div class="Module_2" >
            <a name="Module2"></a>
            <div class="what_is"></div>
            <div class="content">
            <h1>What is</h1>
            <h1>Plant an App?</h1>
            Plant an App is a platform that empowers you to build and customize epic web apps, fast and with low/no code requirements.
                </div>
                
            </div>
        
    
        <div class="Module_3">
            <div class="center_title"><h1>WHAT CAN YOU BUILD ? </h1></div>
            <div class="rectangle"><h1>BASICALLY,</h1>
                <p><b>ANYTHING YOU CAN THINK OF</b></p></div>
        </div>
         
        <div class="Module_4">
            
            <div class="the_rules"><h1>THE RULES</h1></div>
            <div class= "container_4">
            <div class="img_nr_1"></div>
            <div class= "content_pg4_1">Grab a team mate. This is a learning experience for 2 !</div>
            
            </div>
            <div class="img_plant_1"></div>
          
        </div>
        
        <div class="Module_5">
            <div class= "container_5">
            <div class="img_nr_2"></div>
            
            <div class="content_pg5" >Register your team and idea until the 25 <sup>th</sup> of June.</div>
            
            </div>
            <div class="img_plant_2"></div>
            
            
           
        </div>
        
        <div class="Module_6">
            <div class="container_6">
            <div class="img_nr3"></div>
            <div class="content_pg6"><p >Build your web-app with mentor guidance between July 1<sup>st</sup> and July 31<sup>st</sup>.</p>
             <p id="paragraf_pg6">*some occasional visits to the PlantAnApp office are required</p></div>
                </div>
            <div class="img_plant_3"></div>
            
        </div>
        
        <div class="Module_7">
            <div class="container_7">
            <div class="img_nr4"></div>
            <div class="content_pg7"><b>See your app grow, have a great learning experience</b> and reap awesome prizes for doing a great job.</div>
            </div>
            <div class="img_plant_4"></div>
            
            
        </div>
        
        <div class="Module_8">
            
            
        </div>
        
        <div class="Module_9">
            <div class="container_9">
                <div class="sign_up"><h1><b>SIGN UP</b></h1></div>
                <div class="button_pg9">LIMITED SLOTS. MAY LUCK BE ON YOUR SIDE !</div>
                <div class="form_1">
                    <a name="form1"></a>
                        <form>
                            <h4>The team</h4>
                            <input type="text" name="Team_Name" placeholder="Your team name" maxlength="20"> <br>
                            <h4>You</h4>
                            <input type="text" name="Full_Name_1" placeholder="Your Full Name" maxlength="30"> <br>
                            <input type="text" name="mail_1" placeholder="Your E-Mail" maxlength="40"> <br>
                            <input type="text" name="Education_1" placeholder="Your University, Specialization & Year" maxlength="40"> <br>
                        </form>
                </div>
         </div>   
        </div>
        
        <div class="Module_10">
            
            
        </div>
            
            
            
    
<button id="chat_bubble"></button>
                
            
        </div>
    </body>

</html>

Кроме того, это "media_query_sheet" (я только что добавил это):

http://jsfiddle.net/3qhbuypz/

/* Media Query */




/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {

    .img_plant_1{
        display: none;
    }
    .img_plant_2{
        display: none;
    }
    .img_plant_3{
        display: none;
    }
    .img_plant_4{
        display: none;
    }
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 600px) {
    .whole{
        font-size: 4vw; 
    }
    .logo{
        width:25vw;
        height: 25vh;
    }
    .text_1{
        width: 40vw;
        line-height: 40px;
    }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) {
    .whole{
        font-size: 2vw; 
    }
    .logo{
        width:20vw;
        height: 25vh;
    }
    .text_1{
        width: 40vw;
        line-height: 40px;
    }
} 

/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) {
    .whole{
        font-size: 2vw;; 
    }
    .logo{
        width:20vw;
        height: 25vh;
    }
    
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
    .whole{
        font-size: 1.85vw; 
    }
    .logo{
        width:300px;
        height: 300px;
    }
}

У меня есть некоторые проблемы с пониманием:

  1. Полагаю, я неправильно использовал классы и понятия не имею, как их лучше использовать! 2. Элементы не центрируются как оригинальный сайт.
  2. flex-wrap: обертка работает только когда окно очень маленькое Пример: https://s33.postimg.cc/pen7ggevj/Capture.jpg
  3. Текст такой неприятности. Я не могу получить одинаковую высоту строки при изменении размера; Я не могу заставить его правильно изменить размер: он всегда слишком большой или слишком маленький
  4. Дивы не остаются там, где я хочу, чтобы они оставались!
  5. Посмотрите на маленькую кнопку сообщения в правом нижнем углу! Он должен быть исправлен независимо от размера окна, но угадайте, что: он двигается !!!

Пожалуйста, помогите мне! Я работаю над этим уже несколько дней, но я не могу понять, где или что я делаю неправильно, и я также не нахожу учебники с тем, что мне нужно. Все учебники, которые я нахожу, являются типичной фигней!

Вот как это должно выглядеть: https://media.giphy.com/media/8PySLM55qjM0uWP2B8/giphy.gif

Вот как это выглядит: https://media.giphy.com/media/2tKCZBAUfxIYBWNfjj/giphy.gif

Спасибо!

Я изучаю только HTML и CSS. У меня нет знаний о JSS или любом другом языке Java.

1 Ответ

0 голосов
/ 24 июня 2018

Ваш вопрос немного «слишком общий», может быть, вам стоит начать читать некоторые книги, которые дадут вам основу для выполнения этой работы.В любом случае я постараюсь предложить вам кое-что, что может вам помочь:

  1. имя класса должно быть дидактическим, например, контейнер, раздел, оболочка, ecc ... Мне нравится использовать метод БЭМ для создания чего-либомногоразовый и интуитивно понятный.http://getbem.com/
  2. С самого начала Flexbox может быть немного сложнее, но через некоторое время все становится проще.Я предлагаю вам в любом случае начать с базы (блок, встроенный блок, встроенный, ecc ...), прежде чем начать с этим.Этот канал Youtube может дать вам несколько советов: https://www.youtube.com/watch?v=G7EIAgfkhmg
  3. Это не лучшая практика, но для текста мне нравится использовать только значение «px», не забывайте, что у каждого тега есть свой собственный стандарт и шрифт-размерный размер.
  4. Div никогда не оставайтесь там, где вы хотите, если вы не уверены в том, что делаете: D
  5. Движется не кнопка, а ваш контейнер в зависимости от размерана высоте, вы должны использовать min-height: 100vh вместо фиксированной высоты 100vh, потому что таким образом высота будет зависеть от высоты окна.

Также у исходного сайта есть эта проблема, если вы измените размервысота окна, элемент внутри каждого раздела будет нависать до следующего раздела.

Я предлагаю забыть об абсолютной позиции и, используя только flexbox, вы можете сделать почти весь сайт с одним типом макета, который может быть таким:

/* Reset all browsers default values */
* {
  padding: 0;
  margin: 0;
  }
img {
  border:none;
  }

/* Style */

.section {
  align-items: center; /* Vertical center first row of flex element, default value is STRETCH */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  min-height: calc(100vh - 80px); /* Remove padding 40px top and bottom */
  background-color: #45BB94;
  padding: 40px 0; /* Prevent the content to touch the border of the section when window height is resized */
}
.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 70%;
  background-color: #424242; /* Use background could help you understand what happen to the element */
  margin: 0 auto; /* Horizontal centering div */
}
.img-container {
  display flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 20%; /* this could be img width */
  min-height: 100%;
  background: lightblue;
}
.logo {
  display: block;
  max-width: 100%;
  height: auto;
  /* This code will transform image to responsive */
}
.text-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  min-height: 100%;
  background-color: lightcoral;
}
    <div class="section">
        <div class="wrapper">
            <div class="img-container">
                <img class="logo" src="https://plantanapp.com/Portals/_default/Skins/PlantanappLanding/Landing/papp-logo.svg">
            </div>
            <div class="text-container">
               <p>Lorem ipsum dolor sit amet
               Lorem ipsum dolor sit amet
               Lorem ipsum dolor sit amet
               Lorem ipsum dolor sit amet
               </p>
            </div>
        </div><!--wrapper-->
    </div><!--section-->

<!--use comment at the end of an element help you understand what tag is-->

Я надеюсь помочь вам.

...