<html>
<head>
<style>
html,body{
margin: 0;
padding: 0;
overflow: hidden;
}
.main-container-pg{
color: #fff;
}
.main-container-pg:before{
content: '';
margin: 0;
padding: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url('https://i.ibb.co/c1cKTkc/bg-mid.png');
background-size: 104% 100% ;
background-repeat: no-repeat;
background-position: center;
display: block;
position: absolute;
z-index: -1;
}
.logo-box-pg{
width: 100%;
display: flex;
justify-content: center;
}
.logo-head-pg{
height: calc(100% - 82%);
}
.main-text-pg{
display: flex;
font-size: 1.4em;
margin: auto;
justify-content: center;
flex-direction: column;
align-items: center;
padding-top: 1em;
}
.input-pg-box{
padding-top: 3em;
display: flex;
justify-content: center;
}
.input-pg-box *{
font-size: 1em;
}
.input-pg-box .pg-button-icon{
background-color: #6BB9E6;
border: none;
width: 10.625em;
border-radius: 30px;
margin-left: 1em;
height: 3.5em;
outline: none;
display: flex;
align-items: center;
justify-content: space-around;
padding-left: 1em;
padding-right: 1em;
}
.drop-shadow{
filter: drop-shadow(10px 20px 15px rgba(0, 0, 0, 0.161));
}
.input-email-pg{
width: 25%;
height: 3.5em;
outline: none;
border: none;
border-radius: 30px;
color: #6BB9E6;
padding-left: 10px;
}
.text-width{
width: calc(10.625em + 22%);
}
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
.input-email-pg{
background-color: red;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
.input-email-pg{
background-color: green;
}
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
.input-email-pg{
background-color: blue;
}
/*
1. Logo Position
2. Text Position
3. input Field Postition
*/
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
.input-email-pg{
background-color: orange;
}
.main-container-pg:before{
background-size: 134% 100%;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
.input-email-pg{
background-color: black;
}
.main-container-pg:before{
background-size: 104% 100%;
}
}
</style>
</head>
<body>
<div class="main-container-pg">
<div class="logo-box-pg">
<img src="logo.png" class="logo-head-pg">
</div>
<div class="main-text-pg">
<div class="text-width">
<h2 class="">
Partyguru sta arrivando per <br /> rivoluzionare il mondo degli<br />eventi privati
</h2>
</div>
<div class="text-width">
<h2>
Vuoi saperne di più? <br />Iscriviti alla nostra newsletter
</h2>
</div>
</div>
<div class="input-pg-box">
<input type="email" placeholder="Indirizzo E-mail" class="input-email-pg drop-shadow"/>
<button class="pg-button-icon drop-shadow">
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.3942 22.005C19.1356 22.8099 18.9371 23.6328 18.8002 24.467C18.3922 26.533 17.9462 28.858 16.0792 30.726C15.2055 31.6005 14.1681 32.2942 13.0262 32.7675C11.8843 33.2409 10.6603 33.4845 9.42416 33.4845C8.18804 33.4845 6.96405 33.2409 5.82214 32.7675C4.68023 32.2942 3.6428 31.6005 2.76916 30.726C1.61617 29.5948 0.785058 28.1771 0.36117 26.6184C-0.062717 25.0598 -0.064092 23.4164 0.357173 21.857C0.777483 20.253 1.61619 18.7893 2.78756 17.6157C3.95894 16.442 5.42095 15.6004 7.02416 15.177L8.12417 19.209C7.22959 19.4445 6.41356 19.9132 5.75946 20.5673C5.10535 21.2214 4.63663 22.0374 4.40118 22.932C4.16711 23.7853 4.16795 24.686 4.40365 25.5388C4.63935 26.3917 5.10113 27.165 5.74017 27.777C6.22562 28.2637 6.80231 28.6498 7.43722 28.9133C8.07213 29.1767 8.75278 29.3123 9.44018 29.3123C10.1276 29.3123 10.8082 29.1767 11.4431 28.9133C12.078 28.6498 12.6547 28.2637 13.1402 27.777C14.0922 26.825 14.3772 25.365 14.7112 23.67C14.8352 23.027 14.9712 22.359 15.1442 21.691L19.3942 22.005Z"
fill="white" />
<path
d="M8.11506 19.1999C8.64706 19.0519 9.21506 18.9399 9.82206 18.8169C11.8881 18.3959 14.2221 17.9169 16.0691 16.0709C17.3851 14.7545 18.2813 13.0775 18.6443 11.2518C19.0074 9.42609 18.821 7.53375 18.1087 5.814C17.3964 4.09424 16.1902 2.62428 14.6426 1.58994C13.095 0.555595 11.2755 0.00332359 9.41407 0.00292969C9.27808 0.00292969 9.15408 0.0149236 9.01408 0.0279236C6.57833 0.12419 4.27553 1.16411 2.59272 2.92772C0.909922 4.69133 -0.0209178 7.04033 -0.00291755 9.47792C0.0103367 11.4978 0.676868 13.4592 1.89708 15.0689C2.99775 14.1597 4.25544 13.4595 5.60807 13.0029C4.92803 12.2867 4.46526 11.3921 4.2736 10.4232C4.08194 9.45431 4.16927 8.45092 4.5254 7.52969C4.88153 6.60847 5.49184 5.80725 6.28538 5.21922C7.07892 4.63119 8.02307 4.28051 9.00807 4.20793C9.14407 4.19593 9.26806 4.18292 9.40806 4.18292C10.0956 4.18093 10.7768 4.31551 11.4119 4.57884C12.0471 4.84217 12.6236 5.22903 13.1081 5.71693C14.0884 6.7006 14.6388 8.03271 14.6388 9.42143C14.6388 10.8102 14.0884 12.1423 13.1081 13.1259C12.1551 14.0779 10.6841 14.3749 8.97706 14.7339C8.33406 14.8699 7.67708 14.9939 7.02308 15.1789L8.11506 19.1999Z"
fill="white" />
<path
d="M30.7261 17.416C28.9608 15.6516 26.567 14.6604 24.0711 14.6604C21.5752 14.6604 19.1815 15.6516 17.4161 17.416C16.2809 18.6034 15.4936 20.0797 15.1401 21.684L19.4081 22.006C19.6067 21.3951 19.9407 20.8369 20.3851 20.373C21.3688 19.3927 22.7009 18.8423 24.0896 18.8423C25.4784 18.8423 26.8105 19.3927 27.7941 20.373C28.2807 20.8556 28.6668 21.4298 28.9301 22.0625C29.1934 22.6951 29.3286 23.3737 29.3281 24.059V24.071C29.3333 25.0876 29.0409 26.0835 28.4867 26.9359C27.9326 27.7882 27.1411 28.4597 26.2098 28.8675C25.2785 29.2753 24.2483 29.4015 23.2461 29.2307C22.2439 29.0598 21.3137 28.5993 20.5701 27.906C20.1569 29.2759 19.4896 30.5558 18.6031 31.679C20.1957 32.8473 22.12 33.4759 24.0951 33.473H24.1201C26.6119 33.4651 28.9989 32.47 30.7585 30.7057C32.5181 28.9414 33.5068 26.5518 33.5081 24.06V24.048C33.4939 21.5569 32.4932 19.1729 30.7251 17.418"
fill="white" />
<path
d="M23.045 0.0249023H18.876C18.8813 3.89756 20.422 7.6101 23.1604 10.3485C25.8988 13.0869 29.6113 14.6276 33.484 14.6329V10.4649C30.7153 10.4644 28.0601 9.36429 26.1024 7.40652C24.1446 5.44876 23.0445 2.7936 23.044 0.0249023"
fill="white" />
</svg>
<span style="color: #fff;"> iscriviti </span>
</button>
</div>
</div>
</body>
</html>
I already use media query in this design but not working with my code
When I am testing this on multiple devices then its shows different results please help me to make it responsive
when width of screen is changed then the buttons color will change help me to resolve this
I am new to web designing please help me to resolve this
Related
I am begginer in web-developing. Nevertheless I hope for aid.
I have one layout that has to be performed as webpage by me. It has header, footer, main. There are one static image in main, one menu and content part in main. All elements situates in correct position if the user does not change the scale in own browser. There's one requirement: footer, header and menu must be painted with some colors, but all content of them must contain in rectangles width of which is 1000px. And don't forget about padding-left and padding-right 10px. If the scale is increased there's horizontal scrollbar and some elements occur in right side.
My requirements:
all components must fit in the first 100% of width. There must not be any need to scroll horizontally.
this vertical scrollbar must disappear
body
{
font-family: PT Sans;
font-size: 14px;
line-height: 22px;
color: grey;
max-width: 100%;/*
overflow-x: hidden;*/
}
#correct_width_header_footer
{
background-color: #D3D3D3;
width: 100%;
clear: left;
}
#internal_width
{
width: 1000px;
margin: auto;
padding-right: 10px;
padding-left: 10px;
}
.header_sect
{
padding-bottom: 65px;
padding-top: 65px;
box-sizing: inherit;
}
#Left_header
{
height: 100px;
}
.phones
{
text-align: right;
font-size: 2em;
}
.menu_width
{
width: 100%;
background-color: grey;
}
.menu
{
color: white;
font-size: 20px;
text-align: center;
padding-bottom: 15px;
padding-top: 15px;
}
.menu a
{
text-decoration: none;
cursor: pointer;
}
.slider
{
width: 100%;
text-align: center;
margin-bottom: 30px;
}
.NewsBlock
{
width: 350px;
color: white;
background-color: grey;
padding-left: 35px;
padding-top: 20px;
padding-bottom: 100px;
margin-right: 60px;
float: left;
}
.article_right
{
width: 510px;/*
border: 1px solid;*/
float: left;
}
.height_lowerSect
{
/*display: inline-block;*/
/*margin-bottom: 700px;*/
}
.footer_sect
{
/*background-color: black;*/
position: relative;
}
#left_footer
{
float: left;
}
#left_footer li
{
list-style-type: none;
}
footer
{
background-color: grey;
width: 100%;
height: 160px;/*
margin-top: 65px;*/
}
.Underline li
{
text-decoration: underline;
}
.Underline
{
/*margin: auto;*/
/*display: block;
margin-left: auto;
margin-right: auto;*/
position: absolute;
left: 350px;
}
.Last
{
position: absolute;
right: 0%;
top: 15px;
}
<body>
<header id="correct_width_header_footer">
<section id="internal_width" class="header_sect">
<img src="logo.png" alt="logo" title="логтотип компании" id="Left_header" style="float: left;">
<section class="phones">
<br>+7(499)777-77-77</br>
<br>+7(499)777-77-77</br>
</section>
</section>
</header>
<main>
<section class="menu_width">
<div id="internal_width" class="menu">
<a>Главная</a> |
<a>Каталог</a> |
<a>Доставка и оплата</a> |
<a>Прайс-лист</a> |
<a>Контакты</a>
</div>
</section>
<img src="slider.jpg" class="slider" alt="slider">
<section class="height_lowerSect" id="internal_width">
<div class="NewsBlock">
<h1>Новости</h1>
<div>
<p>14 сентября 2013 г.
<br>Редизайн веб-сайта архитектурного бюро.
</div>
<div>
<p>14 сентября 2013 г.
<br>Раскрутка интернет-магазина декоративных стикеров и виниловых наклеек.
</div>
<div>
<p>14 сентября 2013 г.
<br>SEO-продвижение сайта поставщика дизельных генераторов.
</div>
<div>
<p>14 сентября 2013 г.
<br>Поисковое продвижение веб-сайта поставщика гидрооборудывания.
</div>
</div>
<section class="article_right">
<h1>Компания "Пиксель-Плюс"</h1>
<p>
Найстарішим з них є перший варіант. До початку вестернізації Японії у середині 19 століття ним позначали будь-який одяг. Ще у 16 столітті португальські місіонери-єзуїти повідомляли у звітах до Європи, що японці називають одяг словом «кімоно» (Kimono). Ця назва перекочувала у більшість іноземних мов, і в українську зокрема. Хоча у домодерній Японії «кімоно» було аналогом універсального поняття «одяг», у Європі та Америці воно стало асоціюватися саме з японським вбранням.
</p>
<p>
Наприкінці 19 століття у Японії збільшилась кількість тих, хто заходився носити західний стрій. Відмінність західного і японського костюму змушувала японців виокремити останній з загального поняття «кімоно». Виник неологізм для позначення традиційного одягу — «вафуку»[3] . До кінця Другої світової війни це слово стало основним для означення японського вбрання. Однак у післявоєнні часи, під впливом американського «розуміння» японської дійсності, універсальний термін «кімоно» почали застосовувати як один з синонімів «вафуку».
</p>
<p>
Відповідно, у сучасній японській мові «кімоно» отримало два значення. У широкому розумінні — це загальний термін для окреслення будь-якого одягу, а вузькому — різновид вафуку.
</p>
</section>
</section>
</main>
<footer id="correct_width_header_footer">
<section id="internal_width" class="footer_sect">
<div id="left_footer">
<ul>
<li>2012-2013 ЗАО "Комания"</li>
<li>info#name.ru</li>
</ul>
</div>
<div id="left_footer" class="Underline">
<ul>
<li>Главная</li>
<li>Каталог</li>
<li>Доставка и оплата</li>
<li>Прайс-лист</li>
<li>Контакты</li>
</ul>
</div>
<div id="left_footer" class="Last">
<u>Разработка сайта</u> -
<br> компания "Пиксель-Плюс"
</div>
</section>
</footer>
</body>
Adding CSS media queries would really help in your case. I would create a media query where your 1000px width's will be set to 100% if the resolution becomes to small. Here's a quick example on how to approach it:
/* Screens that are less then 1020px wide */
#media screen and (max-width: 1020px) {
#internal_width {
width: 100%;
}
}
I think you also need to lose some of the other hardcode widths and make them percentage based or give them an automatic width by using flexbox in combination with flex-grow. This would make them smaller when the screen width is smaller. But it will keep the aspect ratio of your content. I would also remove the floats in your code. For example if you want to have more flexibility in the main content you can do it like this:
#internal_width {
display: flex;
width: 1000px;
margin: auto;
padding-right: 10px;
padding-left: 10px;
}
.NewsBlock {
width: 350px;
color: white;
background-color: grey;
padding: 20px 0 100px 35px;
margin-right: 60px;
}
.article_right {
flex-grow: 1;
}
It set's the .NewsBlock content to 350px and the .article_right element next to it will just take up the space that it can have (until the combined value reaches 1000px). You can also apply this approach to your other elements as well.
This is what the site is like when in desktop mode:
Now in mobile mode:
You can see that there is now extra space on the bottom. I make sure to erase margins everywhere but the space still remained there.
Pertinent css code:
.grid-container{
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 5rem 1fr 3rem;
height: 100%;
}
.main {
grid-area: main;
background-image: url("res/background_min.jpg");
overflow: hidden
}
/*Home Screen*/
.home{
display: flex;
}
.menu-list{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
}
.menu-list a {
padding: 0rem;
flex: 0 1 50rem;
margin: 1.5rem;
height: 100%;
width: 100%;
display: flex;
text-decoration: none;
color: white;
}
.menu-list li
{
display: flex;
list-style-type: none;
text-decoration: none;
align-items: center;
justify-content: center;
width: 100%;
height: 10%;
}
.menu-list p {
font-size: 2vw;
}
.section a {
color: #ffffff;
font-weight: bold;
font-size: 2vw;
text-decoration: none;
}
.about {
background-image: linear-gradient(to right, cyan, magenta);
}
.contacts {
background-image: linear-gradient(to right, fuchsia, turquoise);
}
.projects{
background-image: linear-gradient(to right, turquoise, fuchsia);
}
.question-box {
background-image: linear-gradient(to right, magenta, aqua);
}
.home-main-image{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 45%;
}
.home-main-image img{
max-width: 99%;
}
.fade-in {
animation: fadeIn ease 2s;
}
.button{
background-image: linear-gradient(to right, cyan, magenta);
border: none;
text-align: center;
color: white;
text-decoration: none;
font-size: 1vw;
padding: .5rem;
}
Menu list is the vertical column of buttons that should occupy most of the screen on the left, and home-main-image is the giant terminal logo plastered on the right.
Note that the issue happens with a real mobile device too.
Edit: For clarification, this is the extra space:
Edit: added react html:
App.js
function App() {
const [lang, setLang] = useLanguage();
const handleLanguageChange = () => {
if (lang.lang === 'eng'){
setLang('fr')
} else {
setLang('en')
}
}
return (
<BrowserRouter>
<div className="grid-container">
<header className="header">
<div className="brand">
<Link to="/" >
Eduardo Breton
</Link>
</div>
<div className="header-side">
{lang.subtitle}
</div>
<div className="header-right">
<button className="button" onClick={() => handleLanguageChange()}>{lang.traduction} </button>
</div>
<div>
</div>
</header>
<main className="main">
<div className="content">
<Route path="/" exact={true} component={HomeScreen} />
<Route path="/about" component={AboutScreen}/>
<Route path="/contact" component={ContactScreen}/>
<Route path="/project" component={ProjectScreen}/>
<Route path="/question" component={QuestionScreen}/>
</div>
</main>
<footer className="footer">
© 2020 Eduardo Breton
</footer>
</div>
</BrowserRouter>
);
}
HomeScreen.js:
const { Link } = require("react-router-dom");
function HomeScreen() {
const [lang, setLang] = useLanguage();
return <div className="home">
<ul className="menu-list">
<Link to="/about">
<li className="fade-in section about" >
{lang.about}
</li>
</Link>
<Link to="/contact">
<li className="fade-in section about" >
{lang.contact}
</li>
</Link>
<Link to="/project">
<li className="fade-in section about" >
{lang.projects}
</li>
</Link>
<Link to="/question">
<li className="fade-in section about" >
{lang.question}
</li>
</Link>
</ul>
<div className="home-main-image fade-in">
<img src={terminalImage} />
</div>
</div>
}
export default HomeScreen;
Checked answer with the discussion has fixed the issue, changing flex-direction to column on a media screen on main has allowed me to center correctly the contents:
the first thing you need to do is add a meta description for mobile view in the head. These in particular
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Next you need to make your site responsive by adding media queries so that the home main image and your buttons become responsive. You should increase the size of the menu buttons and set them to
#media screen and (max-width:650px) {
.menu-list li {
flex-direction:column;
}
}
That way your buttons will be bigger, aligned in the center, AND in a column (this will look better on mobile). You should also change the flex direction of the main image. Also, try adding some padding between the buttons in mobile view, this should also help in taking up the space.
i want to create an interactive wiki with html & css by using a semicircle and dividing the circle into different pieces for each topic. I had the following draft in mind:
https://i.stack.imgur.com/f9Oqp.png
I haven't done html and css in the context of creating own SVGs with animations.
Currently i am using this example as a starting point:
<ul class="menu">
<li class="one">
<a href="#">
<span class="icon">Category 1</span>
</a>
</li>
<li class="two">
<a href="#">
<span class="icon">Category 2</span>
</a>
</li>
<li class="three">
<a href="#">
<span class="icon"> Category 3</span>
</a>
</li>
<svg height="0" width="0">
<defs>
<clipPath clipPathUnits="objectBoundingBox" id="sector">
<path fill="none" stroke="#111" stroke-width="1" class="sector" d="M0.5,0.5 l0.5,0 A0.5,0.5 0 0,0 0.75,.066987298 z"></path>
</clipPath>
</defs>
</svg>
$base: #A5E2F3;
.menu {
padding: 0;
list-style: none;
position: relative;
margin: 30px auto;
width: 70%;
height: 0;
padding-top: 70%;
}
#media all and (max-width: 320px) {
.menu {
width: 230px;
height: 230px;
padding: 0;
}
}
#media all and (min-width: 700px) {
.menu {
width: 500px;
height: 500px;
padding: 0;
}
}
.menu li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: url(#sector);
/* try this one in Chrome/Opera/Safari */
/* clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%); */
a {
display: block;
width: 100%;
height: 100%;
}
&:hover {
background-color: gold;
}
}
.one {
background-color: $base;
transform: rotate(0deg);
}
.two {
background-color: darken($base, 7%);
transform: rotate(-60deg);
}
.three {
background-color: darken($base, 14%);
transform: rotate(-120deg);
}
.icon {
position: absolute;
/* exact values here depend on what you are placing inside the items (icon, image, text, etc.) */
right: 15%;
top: 30%;
/* make sure it it rotated enough; angle of rotation = angle of the sector itself */
transform: rotate(60deg);
/* style further as needed */
color: darken($base, 60%);
font-family: Indie Flower;
font-size: 25px;
}
p {
text-align: center;
width: 80%;
margin: 0 auto;
}
These are my question about this task:
1) How can i create interactive buttons
- click on the button will make the remaining buttons disappear
- 1/3 semicircle will expand to a 1/4 semicicircle
2) How can i improve the clicks with animations
- Button Grows from 1/3 to 1/4 semicircle
Thank you in advance!
To answer your questions:
1). An interactive button can be created in many ways, personally I would do something like this in HTML:
<button type="button" data-toggle="menuItem">Toggle</button>
and then in JavaScript (using jQuery) you can check for when this button is clicked:
$("button[data-toggle='menuItem']").on("click", function () {
// - Do your toggle logic in here
// - Do '.hide()' on all buttons that aren't '$(this)'.
// - Add class to '$(this)' to make it expand.
});
2). It really depends on how you're creating your semi-circles but I would say your best cross-browser solution would be to look into the CSS 'transition' property a bit more: W3Schools CSS transition Property
I hope this helps, let me know if you don't understand something I've said.
I'm working with SCSS trying to create a responsive site. I'm using Koala to compile my code, and I have a styles.scss that is importing my other partial stylesheets. Certain styles do work dynamically on my site when changing the width, but with my display: flex; things aren't changing to what I want them to.
I've tried changing the media queries to nest inside of themselves, but nothing is working properly.
styles.scss
#import "reset";
#import "variables";
// #media only screen and (min-width: 1em) {
#import "small-default";
// }
//35em is also 560px (if basefont is 16px)
#media only screen and (min-width: 560px) {
#import "medium";
}
//64em is also 1028px (if basefont is 16px)
#media only screen and (min-width: 1028px) {
#import "large";
}
index.html
<div class="footer">
<footer>
<div class="info">
<div class="contact">
<h2>Contact Us</h2>
<p>CABOT CRUIZES</p>
<p>23 South Main St. Suite 16</p>
<p>Lexington, VA 24450</p>
<br>
<h2>Phone:</h2>
<p>1-800-555-1234</p>
<br>
<h2>Hours of Operation:</h2>
<p>Monday - Friday 9am - 4pm</p>
</div>
<div class="newsletter">
<h2>News Letter</h2>
<p>Subscribe to our email list and stay up-to-date with our hottest offers and latest specials.</p>
<div class="subscribe">
<input type="email" name="" id="subscribeEmail">
<button type="submit">Subscribe</button>
</div>
</div>
</div>
<div class="why">
<h2>Why Cabot Cruises?</h2>
<p>Cabot Cruises is a travel agency providing the best cruise deals on our online travel website. We can help you with all inclusive vacations including discounted cruises.</p>
<br>
<p>We do not sell travel to residents of Deleware, Iowa, Florida, Hawaii and Washington state because those states are just wierd. If you are a resident of one of these states, call your congressman and tell them to change the regulations. </p>
</div>
</footer>
</div>
_small-default.scss
.footer {
background-color: $secondaryColor;
footer {
max-width: 1024px;
margin: 0 $gutter;
padding: 1rem 0;
color: $thirdColor;
.info {
margin: 0 auto;
color: $thirdColor;
display: flex;
flex-direction: column;
.contact, .newsletter, .why {
padding: .5rem 0;
}
.contact {
}
.newsletter {
display: flex;
flex-direction: column;
justify-content: center;
.subscribe {
display: flex;
flex-direction: column;
justify-content: center;
input{
height: 35px;
margin-bottom: .2rem;
}
button {
height: 44px;
background-color: #666;
border-radius: 10px;
color: #fff;
}
}
}
.why {
}
h2{
margin-bottom: .75rem;
}
input {
margin-top: .6rem;
}
}
}
}
_medium.scss
(I'm just trying to do a simple direction change to the layout, but nothing is working.)
footer {
.info {
flex-direction: row;
}
}
would be
.footer {
footer {
.info {
flex-direction: row;
}
}
}
or
.footer footer .info {
flex-direction: row;
}
if you would like to call it the same way you did in your medium.scss
Please help me. I need 3 li element like in image those I downloaded (icon+text), but they have wrong behavior.
I need like this
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
border: 1px solid purple;
height: 123px;
margin: 0;
padding: 0;
}
.advantages > * {
margin-left: 92px;
}
<ul class="advantages">
<li class="icon-equipment">Поставка оборудования<br> и запчастей<br><span>От 11 ведущих производителей</span><li>
<li class="icon-payment">Рассрочка платежа<br><span>До 45 дней с оформления заказа</span></li>
<li class="icon-delivery">Доставка товаров<br><span>Международная и междугородняя<br>в срок до 10 дней</span></li>
</ul>
The main thing to understand here is how to set-up a good hierarchy, so that you may have control over it. What I mean is, you have to separate your item into sections, which can be arranged easily using your model of choice (flexbox in this case).
Just take a look at the html that I have provided, see how it is structured. You have a container, within that container you have two elements, a left-side element (icon) and a right-side element (texts).
Styles are also a thing to notice, you will need some prefixing as well.
Since this is your first time on stackoverflow, I will give you this code ready for use. Usually you have to provide some code that you have been working on, and then seek assisstance for it. Whatever you do, please DO NOT expect this for future problems that you post here on Stack. Read the rules, follow the rules.
html {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
/* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
}
.advantages .advantages-item {
display: flex;
align-items: flex-start;
background: #000;
color: #fff;
padding: 1rem;
max-width: 300px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.advantages .advantages-item:last-of-type {
margin-right: 0;
}
.advantages .advantages-item .item-right {
display: flex;
flex-direction: column;
padding-left: 1rem;
}
.advantages .advantages-item .item-right .right-text {
font-weight: bold;
text-transform: uppercase;
margin: 0;
margin-bottom: 1rem;
}
<ul class="advantages">
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
</ul>