Hello! I am doing a task for the FCC and I can’t get along with the bootstrap grid in any way, help align this matter, attach the markup (CSS, HTML)
Grateful for any help!
So it looks now:
Need to make it look like this:
HTML:
<html lang="en"> <head> <meta charset="UTF-8"> <title>Tvarinsky Klondike</title> <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/bootstrap-theme.css" /> <link rel="stylesheet" href="css/font-awesome.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/scroll.js"></script> <script src="js/menu.js"></script> </head> <body> <div class="header"> <div class="topmenu"> <div class="col-xs-offset-1"> <div class="deactivatemenu"> <i class="fa fa-times"></i> <p class="mobiletext">Close</p> <div class="col-xs-12"> <a href="#home" class="mobilemenu">Home</a> <a href="#about" class="mobilemenu">About me</a> <a href="#portfolio" class="mobilemenu">Portfolio</a> <a href="#comments" class="mobilemenu">Comments</a> </div> </div> <div class="activatemenu"> <i class="fa fa-bars"></i> <p class="mobiletext">Menu</p> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12 col-xs-11"> <nav> <div class="col-md-2 col-xs-12"> <p class="onheader">TVARINSKY</p> </div> <div class="col-md-8 col-xs-12"> <!--Adaptive Menu--> <!--PC menu--> <div id="menu"> <a href="#home" class="top bottomline">Home</a> <a href="#about" class="top bottomline">About me</a> <a href="#portfolio" class="top bottomline">Portfolio</a> <a href="#comments" class="top bottomline">Comments</a> </div> <!--PC menu--> </div> <div class="col-md-2 col-xs-10"> <div class="icons"> <a href="https://vk.com/meowwiza" target="_blank"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a> <a href="https://twitter.com/I_Tvarinsky/" target="_blank"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a> <a href="https://www.facebook.com/budakovivan" target="_blank"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a> </div> </div> </nav> </div> <div class="col-md-6 col-xs-5 col-md-offset-4" id="home"> <h1 class="main">TVARINSKY</h1> </div> <div class="col-md-4 col-xs-12 col-md-offset-4"> <h3 class="main">Front-end developer <br>UI/UX designer</h3> </div> <div class="arrow"> <div class="col-xs-12 col-md-1 col-md-offset-5"> <a href="#about"><i class="fa fa-long-arrow-up bottomarrow fa-flip-vertical fa-2x" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> <div class="content" id="about"> <div class="row"> <div class="col-xs-12 col-md-9 col-md-offset-4"> <div class="col-xs-12 col-md-2"> <p class="main">About me</p> </div> <div class="col-xs-12 col-md-1"> <div class="line"></div> </div> <div class="col-xs-12 col-md-2"> <p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p> </div> </div> <div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3"> <div class="col-xs-4 col-md-3 col-md-offset-1"> <i class="fa fa-heart-o fa-3x" aria-hidden="true"></i> <p class="onblock">My life</p> </div> <div class="root col-xs-4 col-md-3 col-md-offset-1"> <i class="fa fa-toggle-on fa-3x"></i> <p class="onblock">It's worked</p> </div> <div class="root col-md-4 col-xs-4 col-md-3 col-md-offset-1"> <i class="fa fa-thumbs-o-up fa-3x" aria-hidden="true"></i> <p class="onblock">Seems good</p> </div> <div class="horizontal"></div> </div> <div class="col-xs-12 col-md-9 col-md-offset-4"> <div class="col-xs-12 col-md-2"> <p class="main">Portfolio</p> </div> <div id="portfolio"> <div class="col-xs-12 col-md-1"> <div class="line"></div> </div> <div class="col-xs-12 col-md-2"> <p class="text">Are provided below<br> the works performed by me.<br> You can estimate them.</p> </div> </div> </div> <div class="movegallery"> <div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3"> <img src="img\portfolio\2.png" class="galleryphoto small" alt=""> <img src="img\portfolio\3.png" class="galleryphoto small" alt=""> <img src="img\portfolio\4.png" class="galleryphoto small" alt=""> <img src="img\portfolio\7.png" class="galleryphoto small" alt=""> <img src="img\portfolio\6.png" class="galleryphoto small" alt=""> <img src="img\portfolio\5.png" class="galleryphoto small" alt=""> <img src="img\portfolio\1.png" class="galleryphoto small" alt=""> <img src="img\portfolio\8.png" class="galleryphoto small" alt=""> </div> </div> <div class="col-xs-12 col-md-9 col-md-offset-4 margin2"> <div class="col-xs-12 col-md-2"> <div ID="comments"></div> <p class="main pmargin">Testimonials</p> </div> <div class="col-xs-12 col-md-1"> <div class="line"></div> </div> <div class="col-xs-12 col-md-2"> <p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p> </div> </div> <div class="col-xs-12 col-md-6 col-md-offset-3"> <div class="horizontal2"></div> <h4 class="comments">Comments (2)</h4> <br><br> <textarea name="comment" placeholder="Input message text..." maxlength="300" wrap="hard"></textarea> <a href="#"><i class="fa fa-smile-o fa-2x" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i></a> <!-- Первый комментарий --> <p class="commentfont">Ekaterina</p> <p class="date">2017.02.11 18:33</p> <p class="comment">Excellent work, Ivan! I have executed everything even before the discussed terms,<br> I helped with the database, I imposed, the excellent adaptive web site!</p> <!-- Первый комментарий --> <!-- Второй комментарий --> <p class="commentfont">Nikita</p> <p class="date">2016.11.07 21:40</p> <p class="comment">Ivan is an excellent expert, I have made everything quickly<br> and qualitatively. PS The functionality has been in addition realized <BR>which was initially not discussed, but at the same time the performer has made <br>everything and didn't demand a payment top. I recommend! </p> <!-- Второй комментарий --> <!-- Показать еще --> <a href="#" class="vmore">View more</a> <!-- Показать еще --> <div class="horizontal2"></div> </div> </div> <div class="footer"> <div class="col-xs-12 col-md-2"> <b><p class="onfooter cmargin">TVARINSKY</p></b> <br><p class="copyright">© 2017 Tvarinsky dev.</p> <br><p class="end">Greetings, Traveler!</p> </div> </div> </div> <div id="scrollup"><i class="fa toparrow fa-long-arrow-up" aria-hidden="true"></i></div> </body> </html> CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto:100'); @import url('https://fonts.googleapis.com/css?family=Oswald'); @import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Raleway:200'); html, body { margin: 0; padding: 0; background: #fff; overflow-x: hidden; } :active, :hover, :focus { outline: 0; outline-offset: 0; } h1, h2, h3, h4, p { cursor: default; } ::selection { background: #f7f7f7; } ::-moz-selection { background: #f7f7f7; } .topmenu { position: absolute; width: 100%; height: 9rem; background: #000; opacity: 0.7; z-index: auto; } .onheader { font-family: 'Roboto', sans-serif; font-size: 2em; color: #eee; display: inline-block; position: relative; line-height: 1.5; margin-top: 15%; } h3.main { font-family: 'Roboto', sans-serif; font-size: 2.250em; color: #eee; display: inline-block; position: relative; line-height: 1.5; text-align: center; right: 3%; } h1.main { font-family: 'Oswald', sans-serif; position: relative; display: inline-block; font-size: 5em; color: #eee; line-height: 0.5; margin-top: 40%; letter-spacing: -2px; right: 1.5%; } .header { background: url('../img/header.png'); -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Современные браузеры */ background-repeat: no-repeat; height: 100%; } .bottomarrow { color: #eee; position: relative; left: 3.5%; margin-top: 20%; border: 1px solid #b1b1b1; padding-left: 12px; padding-right: 12px; padding-top: 5px; padding-bottom: 5px; transition: 0.35s } .toparrow { color: #404040; position: relative; left: 3.5%; margin-top: 20%; transition: 0.35s; font-size: 1.5em; } .bottomarrow:hover { color: #d1d1d1; border: 1px solid #249cce; position: relative; transition: 0.35s; } p.main { font-family: 'Raleway', sans-serif; font-size: 3.000em; color: #404040; letter-spacing: -2px; display: inline-block; position: relative; } .line { width: 1px; background-color: #626060; height: 75px; display: inline-block; position: relative; margin-bottom: 3%; } p.text { font-family: 'Raleway', sans-serif; font-size: 1.125em; color: #404040; display: inline-block; position: relative; text-align: center; } .pmargin { right: 15%; } .fa-heart-o { border: 5px solid #242424; padding: 10px; border-radius: 40px; border-width: thin; margin-top: 70px; transition: 0.25s; } .fa-heart-o:hover { color: #249cce; transition: 0.25s; border: 1px solid #249cce; } .fa-toggle-on { border: 5px solid #292929; padding: 10px; padding-left: 7px; border-radius: 40px; border-width: thin; margin-top: 70px; transition: 0.25s; } .fa-toggle-on:hover { color: #249cce; transition: 0.25s; border: 1px solid #249cce; } .fa-thumbs-o-up { border: 5px solid #292929; padding: 10px; padding-left: 15px; border-radius: 40px; border-width: thin; margin-top: 70px; text-align: center; transition: 0.25s; } .fa-thumbs-o-up:hover { color: #249cce; transition: 0.25s; border: 1px solid #249cce; } p.onblock { font-family: 'Raleway', sans-serif; font-size: 1.313em; color: #404040; display: block; position: relative; text-align: left; } .horizontal { width: 100%; background-color: #6a6a6a; height: 1px; display: inline-block; position: relative; left: 5%; margin-bottom: 10%; margin-top: 2%; } .horizontal2 { width: 100%; background-color: #6a6a6a; height: 1px; display: inline-block; position: relative; margin-bottom: 2%; margin-top: 2%; } .galleryphoto:hover { -webkit-filter: grayscale(0%) blur(0px); transition: 0.35s; } .galleryphoto { position: relative; -webkit-filter: grayscale(100%) blur(2px); transition: 0.35s; border: 1px solid #404040; margin-top: 15%; } .small { width: 14rem; height: 25rem; margin: 15px; } .medium { width: 14rem; height: 25rem; margin: 15px; } .big { width: 30rem; height: 40rem; margin: 15px; } .movegallery { margin-left: 2.5%; padding-top: 25%; } .margin { position: relative; margin-top: 25%; } .margin2 { position: relative; margin-top: 5.5%; } h4.comments { font-family: 'Oswald', sans-serif; font-size: 1.625em; color: #676666; display: inline-block; position: relative; border-bottom: 1px solid #676666; padding-bottom: 5px; left: 3%; } .fa-smile-o { position: relative; border: 1px solid #dddddd; padding: 12px; border-radius: 5px; bottom: 17px; color: #b1b1b1; transition: 0.35s; left: 3%; } .fa-smile-o:hover { color: #249cce; transition: 0.35s; } .fa-paper-plane { position: relative; border: 1px solid #dddddd; padding: 12px; border-radius: 5px; bottom: 17px; color: #b1b1b1; transition: 0.35s; left: 3%; } .fa-paper-plane:hover { color: #249cce; transition: 0.35s; } textarea { padding: 12px; position: relative; left: 3%; width: 80%; height: 53px; resize: none; border: 1px solid #dddddd; border-radius: 5px; font-size: 14px; color: #888585; font-family: 'TimesNewRoman', sans-serif; transition: 0.25s; overflow: hidden; } textarea:focus { border: 1px solid #ececec; color: #404040; transition: 0.25s; height: 83px; } .commentfont { position: relative; color: #249cce; font-size: 1.575em; font-family: 'Oswald', sans-serif; display: inline-block; left: 5%; margin-top: 2%; } .date { position: relative; color: #a4a4a4; font-size: 1.005em; font-family: 'Oswald', sans-serif; display: inline-block; left: 6%; margin-top: 2%; } .comment { position: relative; color: #676666; font-size: 1.000em; font-family: 'TimesNewRoman', sans-serif; display: block; left: 5%; } .vmore { border: 1px solid #575757; padding-left: 20px; padding-right: 20px; text-decoration: none; margin-top: 5%; left: 40%; position: relative; color: #575757; font-size: 1.250em; font-family: 'Oswald', sans-serif; display: inline-block; transition: 0.35s; } .vmore:hover { text-decoration: none; border: 1px solid #249cce; transition: 0.35s; color: #249cce; } .main2 { font-family: 'Raleway', sans-serif; font-size: 3.000em; color: #404040; letter-spacing: -1px; display: inline-block; position: relative; margin-top: 7%; left: 4%; } .iconmargin { margin-top: 20%; padding-left: 5%; } .topvk { color: #e1e1e1 !important; display: inline-block; position: relative; left: 5%; opacity: 0.6; transition: 0.35s; margin-left: 1.5%; font-size: 1.650em; } .topvk:hover{ transition: 0.35s; opacity: 1; } .vk { display: inline-block; position: relative; color: #404040; transition: 0.35s; font-size: 2.375em; opacity: 0.6; } .fa-vk:hover { transition: 0.35s; opacity: 1; } .facebook { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .fa-facebook:hover { transition: 0.35s; opacity: 1; } .twitter { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .fa-twitter:hover { transition: 0.35s; opacity: 1; } .github { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .fa-github:hover { transition: 0.35s; opacity: 1; } .envelope { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .envelope:hover { transition: 0.35s; opacity: 1; } .footer { margin-top: 7%; background: #323232; width: 100%; height: 150px; } .onfooter { position: relative; color: #b4b4b4; font-size: 2em; font-family: 'roboto', sans-serif; display: inline-block; left: 20%; text-decoration: none !important; margin-top: 20%; transition: 0.35s; } .copyright { position: relative; color: #b4b4b4; font-size: 1.1em; font-family: 'Oswald', sans-serif; display: inline-block; left: 25%; text-decoration: none !important; transition: 0.35s; } .cmargin { margin-top: 10%; } .onfooter:hover{ transition: 0.35s; color: #249cce; } .end { font-family: 'Georgia', sans-serif; position: relative; color: #b4b4b4; font-size: 0.9em; display: block; left: 32%; text-decoration: none !important; transition: 0.35s; } a.top { list-style-type: none; display: inline-block; margin-left: 6%; margin-top: 4%; color: #e6e6e6; font-size: 1.5em; font-family: 'Roboto', sans-serif; transition: 0.35s; text-decoration: none; } .mobiletext { display: inline-block; color: #e6e6e6; font-size: 1.5em; font-family: 'Oswald', sans-serif; transition: 0.35s; text-decoration: none; position: relative; } .mobilemenu { display: block; color: #e6e6e6 !important; font-size: 2em; font-family: 'roboto', sans-serif; transition: 0.35s; text-decoration: none !important; position: relative; border: 1px solid #404040; padding-right: 20%; padding-left: 20%; text-align: center; } .bottomline { position: relative; color: #ff3296; cursor: pointer; } .bottomline:after { display: block; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: #249cce; content: ""; transition: width 0.2s; } .bottomline:hover { color: #fff; } .bottomline:hover:after { width: 100%; } .fa-bars { text-decoration: none; color: #e6e6e6; position: relative; } .fa-times { text-decoration: none; color: #e6e6e6; position: relative; } .menubg { visibility: hidden; height: 100%; width: 100%; background: #404040; } .deactivatemenu { display: none; } .activatemenu { display: inline; } #scrollup { position: fixed; /* фиксированная позиция */ opacity: 0; /* прозрачность */ padding: 5px 15px 10px; /* отступы */ background: none; border: 1px solid #b1b1b1; border-radius: 40px; /* скругление углов */ -webkit-border-radius: 5px; -moz-border-radius: 5px; right: 15%; /* отступ слева */ bottom: 5%; /* отступ снизу */ display: none; /* спрятать блок */ cursor: pointer; } /* ПК */ @media (min-width: 1200px) { .fa-bars, .mobiletext { display: none; } } /* Планшеты */ @media (min-width: 768px) and (max-width: 979px) { a.top, .bottomline, .onheader { display: none; } a.top { display: block; } .line { display: inline; } nav { display: none; } .topmenu, .mobiletext, .icons { display: none; } } /* Телефоны и планшеты */ @media (max-width: 767px) and (min-width: 500px) { a.top, .bottomline, .onheader, .icons { display: none; } h1.main {margin-left:15%;} .header { -moz-background-size: 400%; /* Firefox 3.6+ */ -webkit-background-size: 400%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 400%; /* Opera 9.6+ */ background-size: 400%; /* Современные браузеры */ height: 100%;} .pmargin { right: 0%; } .line { display: none; } a.top{ margin-top: 15px; } .fa-heart-o, .fa-toggle-on .fa-thumbs-o-up { font-size: 2em; } } /* Маленькие телефоны */ @media (max-width: 480px) { a.top, .bottomline, .onheader, .icons { display: none; } h1.main { margin-left:5%; margin-top: 60%; font-size: 3em; text-align: left; } h3.main { font-size: 1.5em; margin-left:5%; text-align: left; } .header { -moz-background-size: 175%; /* Firefox 3.6+ */ -webkit-background-size: 175%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 175%; /* Opera 9.6+ */ background-size: 175%; /* Современные браузеры */ height: 40%;} .line { display: none; } .vmore { left: 32.5%; } .topmenu { height: 3rem; opacity: 1; } .fa-bars { font-size: 1.5em; z-index: 5; } .fa-times { font-size: 1.5em; z-index: 5; } .bottomarrow{ display: none; } .iconmargin { margin-left: 8%; } .pmargin { right: 0%; } .onheader { background: #303030; border-radius: 2px; padding-right: 10px; padding-left: 10px; } p.main { margin-top: 5%; font-size: 2.250em; margin-left: 5%; } p.text { margin-left: 10%; text-align: left; } .fa-heart-o, .fa-toggle-on, .fa-thumbs-o-up { font-size: 2em; } .horizontal { left: 0%; } .comment { max-width: 28rem; } textarea { width: 60%; } #scrollup { position: fixed; /* фиксированная позиция */ opacity: 0; /* прозрачность */ padding: 5px 15px 10px; /* отступы */ background: none; border: 1px solid #b1b1b1; border-radius: 40px; /* скругление углов */ -webkit-border-radius: 5px; -moz-border-radius: 5px; right: 10%; /* отступ слева */ bottom: 5%; /* отступ снизу */ cursor: pointer; } .root{ text-align:center; } .root p{ text-align:center; } 