how can I make a paragraph format look like this
using this code?
Thank you! :)
<div class="col-sm-6 col-md-7 col-lg-7 sec-about-text">
<p> Healthy Endings came to life with the best intentions to create all natural snacks, organic when possible, raw and vegan with absolutely no preservatives. We love to snack periodically through out the day and we're always working on creating the most delicious and nutritious snacks to satisfy those cravings. "What fun is snacking if the snacks donít taste orgasmically good!"</p>
<p> Cherie Spencer, the founder and creator
of Healthy Endings snacks received her
certification as a Health Educator from
the world renowned Hippocrates Health
Institute in West Palm Beach, Florida and holds a Bachelors in Healthcare Administration from Florida Atlantic University. She also received a culinary certification from Atlantic County VoTech and holds a SafeServ Food Manager Certification/License. She is a holistic chef specializing in raw, living foods and loves to prepare and share healthy food with family and friends.</p>
</div>
Here is a jsfiddle showing the basic process: https://jsfiddle.net/jq16sfjg/
.floated {
margin: 10px;
float: right;
}
I will leave it up to you to style the font, whitespace, and colors.
Basically, you just need to float the text that breaks the paragraph to the right.
Related
I am trying to line up 3 different columns under the same class using flexbox.
But when i enter the HTML on my browser, all the content in the different containers are lined in a single line from top too bottom, instead of having the columns beside each other from left to right, and the items inside goes from top to bottom.
Here is the relevant part of the HTML code(all inside the body tag.)
<div class="container">
<article class="text item">
<a href="https://www.foxnews.com/category/person/joe-biden">President
Biden</a> is set to meet with Ukrainian President Volodymyr Zelensky
at the White House on Wednesday – a visit that is expected to build on
and amplify the bilateral relationship, and to underscore the United
States’ "ironclad" commitment to Ukraine’s security and sovereignty,
senior administration officials said.
</article>
<p class="text item">
The two leaders have spoken twice by phone – once in April, and once in
June before <a href="https://www.shorturl.at/puMQX">Biden met with
Russian President Vladimir Putin in Geneva</a>.
</p>
<p class="text item">
Senior administration officials said Biden and Zelensky will chair an
expanded bilateral meeting with their key advisers, and will later
transition to a one-on-one conversation, giving them "the space to
communicate with one another more directly."
</p>
</div>
<a href="#" class="text seperator">FLASHBACK: BIDEN ASSURES ZELENSKY HE WILL STAND UP FOR
UKRAINE SOVEREIGNTY IN PUTIN SUMMIT
</a>
<div class="container">
<p class="text items">
Officials said Biden will convey his <em>"ironclad commitment"</em> to
Ukraine’s security, sovereignty and Euro-Atlantic aspirations. Biden
is also expected to discuss the security situation that Ukraine is
facing, as the nation continues to see <a href="#">acts of Russian
aggression</a> in the region.
</p>
<p class="text items">
Biden also will discuss ways in which the U.S. could continue to provide
security assistance to Ukraine, officials said – noting that the U.S
. will provide a new $60 million security assistance package for Ukraine
that will include additional Javelin anti-armor systems and other
defensive lethal and non-lethal capabilities.
</p>
<p class="text items">
So far, the U.S. has committed $2.5 billion in support of Ukraine forces
since 2014, including more than $400 million in 2021 alone.
</p>
<p class="text items">
As for reform, Biden is set to discuss the ways in which Ukraine has made
"progress on governance, rule of law, and anti-corruption reforms since
2014." Biden, while serving as vice president for former President
Obama, was tasked with overseeing the administration’s Ukraine policy.
</p>
<p class="text items">
The president is also expected to discuss cooperation efforts to bolster
collaboration on shared energy and climate goals, including through a
reinvigorated Strategy Energy and Climate Dialogue, which officials say
would give a "strong" platform to "advance energy security objectives,
enhance economic ties, and achieve ambitious climate targets."
</p>
</div>
BIDEN SAYS UKRAINE HAS NOT MET NATO MEMBERSHIP CRITERIA
<div class="container">
<p class="text items">
As for the <a href="https://www.shorturl.at/lxCF2">coronavirus pandemic
</a>, officials said the U.S. has "stood shoulder-to-shoulder" with the
Zelensky administration, and has already provided $55 million in
COVID-related assistance, and donated nearly 2.2 million doses of COVID
vaccines to Ukraine.
</p>
<p class="text items">
"We intend to continue providing assistance to Ukraine, including cold
chain storage support and an additional $12.8 million in COVID
-related assistance," an official said.
</p>
<p class="text items">
Officials said the U.S. will also provide an additional $45 million in
humanitarian assistance to help address Ukrainians who remain impacted
by the crisis with Russia.
</p>
<p class="text items">
Meanwhile, senior administration officials said that after the meeting,
the U.S. and Ukraine will announce the reinvigoration of the Strategic
Partnership Commission, which they say has not met in three years.
</p>
<p class="text items">
Senior administration officials said they anticipate a meeting this fall
between Secretary of State Antony Blinken and Ukraine’s foreign minister
to approve a new charter between the U.S. and Ukraine that will "set
out the parameters for how we can work closely together to meet these
21st-century challenges."
</p>
</div>
and here is the relevant CSS included.
CSS:
.container
{
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-items: stretch;
align-content: center;
}
.items
{
flex-grow: 1;
flex-shrink: 3;
align-self: auto;
}
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
How do you fix the size of the image in this code?
If you see it in my project,this is coming just in the middle of my footer,between the instagram icon nd my h6.
I also would like to ask some tips for the title,I find it bit boring,could you help me with this please guys!
<!DOCTYPE html>
<html>
<head>
<title>This is London</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
</head>
<body>
<div id="nav">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Getting around</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!-- End of nav -->
<div id="header">
<div id="header-text">
<h2>
Visiting London has never been easier with these ideas.
</h2>
<p>The capital of the United Kingdom is a thriving multicultural metropolis. The contrast between the spectacular historic sights and the lively cultural scene makes a visit to London an interesting and exciting adventure. </p>
</div> <!-- End of header-text -->
</div> <!-- End of header -->
<div id="middle">
<div id="mid-text">
<h1>- Getting around in London -</h1>
<h5>One of the world's most visited cities, London has something for everyone: from history and culture to fine food and good times.</h5>
<p>Immersed in history, London's rich seams of eye-opening antiquity are everywhere. The city's buildings are striking milestones in a unique and beguiling biography, and a great many of them – the Tower of London, Westminster Abbey, Big Ben – are instantly recognisable landmarks. There’s more than enough innovation (the Shard, the Tate Modern extension, the Sky Garden) to put a crackle in the air, but it never drowns out London’s seasoned, centuries-old narrative. Architectural grandeur rises up all around you in the West End, ancient remains dot the City and charming pubs punctuate the historic quarters, leafy suburbs and river banks. Take your pick.
Art & Culture
A tireless innovator of art and culture, London is a city of ideas and the imagination. Londoners have always been fiercely independent thinkers (and critics), but until not so long ago people were suspicious of anything they considered avant-garde. That’s in the past now, and the city’s creative milieu is streaked with left-field attitude, whether it's theatrical innovation, contemporary art, pioneering music, writing, poetry, architecture or design. Food is another creative arena that has become a tireless obsession in certain circles.
Diversity
This city is deeply multicultural, with one in three Londoners foreign-born, representing 270 nationalities and 300 tongues. The UK may have voted for Brexit (although the majority of Londoners didn't), but for now London remains one of the world's most cosmopolitan cities, and diversity infuses daily life, food, music and fashion. It even penetrates intrinsically British institutions; the British Museum and Victoria & Albert Museum have collections as varied as they are magnificent, while the flavours at centuries-old Borough Market run the full global gourmet spectrum.
A Tale of Two Cities
London is as much about wide-open vistas and leafy landscape escapes as it is high-density, sight-packed urban exploration. Central London is where the major museums, galleries and most iconic sights congregate, but visit Hampstead Heath or the Queen Elizabeth Olympic Park to flee the crowds and frolic in wide open green expanses. You can also venture further out to Kew Gardens, Richmond or Hampton Court Palace for beautiful panoramas of riverside London followed by a pint in a quiet waterside pub.</p>
<div id="img-mid">
<a href="https://goo.gl/maps/PSDhvQ25fRZBqWHC8" target="_blank">
<img src="images/Feature-images.jpg" alt="Map">
</a>
</div><!-- End of img-mid -->
</div> <!-- End of mid-text -->
</div> <!-- End of middle -->
<div id="footer">
<div class="credits">
<div class="credits_left">
<h6> Designed by Alba Heidari</h6>
</div>
<div class="credits_right"><img src="https://www.arct.cam.ac.uk/images/instagram-icon/image" class="social_icon">
</div>
</div> <!-- End of footer -->
</body>
</html>
Add this to your css file:
#img-mid{
height: 300px;
width: 300px;
}
#img-mid img{
max-width: 100%;
max-height: 100%;
min-height: 100%;
min-width: 100%;
object-fit: cover;
}
How to make
look like
All I want to do is put the line-breaks in the correct place as it is in the second image. I also tried to use display options, as well as text-align... Maybe I am doing it the wrong way. I would be greatful if you guys could help.
<html>
<head>
<title>Tribute page</title>
<style type="text/css">
html,body{
font-family:"Trebuchet MS", Helvetica, sans-serif;
text-align:center;
min-width:260px;
color:#333;
}
#main{
margin:30px auto;
padding:15px;
border:0px solid;
border-radius:5px;
background:#eee;
}
#image{
max-width: 100%;
display: block;
height: auto;
margin: auto;
}
#img-div{
margin:-5px;
margin-top:20px;
width:100%;
border:5px solid white;
background:white;
}
#img-caption{
margin:15px;
}
#headline{
margin-top:50px;
text-align:left;
}
ul{
max-width:550px;
margin: 0 auto;
text-align:left;
}
li{
margin: 10px;
}
h3{
}
blockquote{
font-style: italic;
}
</style>
</head>
<body>
<div id="main">
<h1 id="title">Dr Norman Borlaug</h1>
<div>The man who saved a billion lives</div>
<div id="img-div">
<img src="C:\Users\User\Desktop\Freecodecamp\Tributepage\norman.jpg" id="image">
<div id="img-caption">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>
</div>
<div id="tribute-info">
<ul>
<h3 id="headline">Here's a time line of Dr. Borlaug's life:</h3>
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
<li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
<li><strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
<li><strong>1937</strong> - Finishes university and takes a job in the US Forestry Service</li>
<li><strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
<li><strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.</li>
<li><strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology</li>
<li><strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and flies to Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000 different strains of disease resistent
wheat - including different varieties for each major climate on Earth.</li>
<li><strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
<li><strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American breed, creating a strain that responds well to fertalizer. It goes on to provide 95% of Mexico's wheat.</li>
<li><strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian subcontinent in time to help mitigate mass starvation due to a rapidly expanding population</li>
<li><strong>1970</strong> - receives the Nobel Peace Prize</li>
<li><strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum yields</li>
<li><strong>1984</strong> - becomes a distinguished professor at Texas A&M University</li>
<li><strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that genetically modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM crops are not inherently dangerous
because "we've been genetically modifying plants and animals for a long time. Long before we called it science, people were selecting the best breeds."</li>
<li><strong>2009</strong> - dies at the age of 95.</li><br><br>
<blockquote>
<p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and
scientific vision can make to human peace and progress."</p>
<div>-- Indian Prime Minister Manmohan Singh</div>
</blockquote>
<h3>If you have time, you should read more about this incredible human being on his Wikipedia entry.</h3>
</ul>
</div>
</div>
</body>
</html>
You are close :)
If you pull the <blockquote> and the <h3> out of the <ul> and insert after the </div>beneath it, you would have your result the way you want it.
Like this:
</ul>
</div>
<blockquote>
<p>"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, persistence and
scientific vision can make to human peace and progress."</p>
<div>-- Indian Prime Minister Manmohan Singh</div>
</blockquote>
<h3>If you have time, you should read more about this incredible human being on his Wikipedia entry.</h3>
</div>
</body>
</html>
There are some other "rule of thumb" things wrong with your code, but like you said you are new, and I won't bother you with it :)
Welcome, and hope you like coding.
EDIT: Also, if you would like the line to break the exact same places as in your example, you can make a <div>around the two elements (the blockquote and the h3) and set a width on the div with CSS or add padding to the div, so that it would match exactly.
It looks like you just need to add a width or max-width to the elements attribute (in this case the <p> and <div> inside <blockquote>. Then you can use margin to center the element.
blockquote p {
width: 600px; //this could be a percent or max-width
margin: 0 auto; //margin top/bottom & margin left/right
}
One thing to note, the exact location of line breaks will vary between monitors, browsers, and devices as the "size" of the font will vary a bit. You can either fight that and try to be super exact or you can embrace the fluid nature of the web.
I am trying to accomplish something like this:
The can't seem to emulate the one above where the centered image is being surrounded by texts. I've tried using floats but something is just lacking and I have no idea what.
And this is what I currently have:
here is my code:
https://jsfiddle.net/eqs6e1db/
section{
text-align: center;
}
section p{
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
-o-column-count: 3;
column-count: 3;
text-align: justify;
}
section article:first-child{
float: left;
}
section article:last-child{
float: right;
}
Well, you can not achieve really your layout. But you can hack it a little bit.
For each column, you can set a spacer, a filler, and another spacer.
The first spacer reserves space from the top, just to push the filler to the required position. The filler really reserves the space. And the reamining spacer consumes the remaining space so that we go the other column.
You need to have a height set on the container
.base {
width: 100%;
height: 1000px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.pushtop {
background-color: rgba(200,0,0,0.2);
width: 10px;
height: 17%;
float: right;
clear: both;
}
.pushbottom {
background-color: rgba(200,0,0,0.2);
width: 10px;
height: calc(83% - 200px);
float: right;
clear: both;
}
.insert {
background-color: lightblue;
height: 200px;
clear: both;
margin: 0px 10px;
}
.insertleft {
width: 100px;
float: right;
}
.insertcenter {
width: 100%;
float: right;
}
.insertright {
width: 100px;
float: left;
}
.container {
width: 735px;
position: relative;
}
.image {
position: absolute;
border: solid blue 1px;
width: 485px;
height: 200px;
left: 123px;
top: 170px;
}
<div class="container">
<div class="image"></div>
<div class="base">
<div class="pushtop"></div>
<div class="insert insertleft"></div>
<div class="pushbottom"></div>
<div class="pushtop"></div>
<div class="insert insertcenter"></div>
<div class="pushbottom"></div>
<div class="pushtop"></div>
<div class="insert insertright"></div>
<div class="pushbottom"></div>
<p>Another 4-storey structure will soon be under construction to add new classrooms and laboratories for the High School and Grade School.</p>
<p> Part of the reason for this attention to the North Campus is to help FU’s marketing strategy for the high school in response to the implementation of the K to 12 Program. First, we want to attract more enrollees. Second, we invest in the facilities in our aim to increase not just the quality of our education but to boost our enrollment capacity from 700 students to 1500 students. And of Course, thanks to our new solar panel installation, we will also be providing all the new classrooms with air conditioning for those sweltering months.</p>
<p>Corporate Social Responsibility or CSR, as viewed by the University, should also have a significant space in the academe's achievements and obligations.</p>
<p>Estudio Damgo, for instance, is now on its third iteration of touching people's lives through sustainable and life-changing architecture. Its buildings and designs, since its first project in 2013, serve as prototype structures that cater to the various needs of society. The University sees Estudio Damgo as a catalyst for creating a transformed, more developed, and more meaningful way of living not just in Dumaguete but through out the Philippines. Read more about the current project here. (note to Entheos; link the word “here” to full Estudio Damgo article)</p>
<p>In terms of agriculture, FU's Aquaponics sets the example in the use of completely natural and organic farming techniques, which enhance not only the environment's safety but boost farmers' production capabilities and livelihood as well. Aquaponics provides agriculturists the answer to sustainable food production and a sustainable ecosystem for both fish and plants. For more specifics on our organic farm click here. (Note to Entheos: Link the word “here” to full organic farming article)</p>
<p>A forest and wildlife protection program called “Ayungon Forest Reserve” has also been pushed by the College of Arts and Sciences in partnership with local government units and the Department of the Environment and Natural Resources (DENR). The program calls for protecting the natural resources of the Reserve from causes of declining population, degradation of wildlife habitat, deterioration of soil and river quality, and the cave’s carrying capacity.</p>
<p>The College of Business Administration (CBA), on the other hand, is seriously pursuing a strong “Entrepreneurship Program” that caters to all levels of participants from students to MSMEs (Micro, Small, Medium Enterprises). In fact, the CBA in partnership with DTI will soon launch an “Entrep Hub”—a one-stop business center for start-up entrepreneurs—during the University Expo in which high school students will compete for the best business plan. The prize will be an Incubation Program for the winning plan to become a real business.</p>
<p>The University Expo, formerly the Digital Expo, of the College of Computer studies is a major University event that showcases innovative technology. The annual event, which includes robotic challenges, quiz bowls, film festivals, etc., is an avenue for students from different academic institutions to participate in and learn from the latest IT breakthroughs.</p>
<p>Barangay constituents also have the opportunity to learn computer skills such as basic PC operations, Internet use, word processing, spreadsheet and presentation through the university's Computer Literacy Program for adopted barangays.</p>
<p>Moreover, “The Queue” coffee shop, run by the College of Hospitality Management ‘s Culinary Arts students, draws customers from in and outside the campus because of its delicious food and beverages.</p>
</div>
</div>
Note that the filler and spacer elements should not be visible. I have given the a background and a width (in the case of the push elements) so that you can see how it works
CSS as it stands, cannot do this yet (reliably). However, there is in working, a CSS Shapes Module that can do this.
http://demosthenes.info/blog/898/Wrapping-Text-Around-A-Curved-Image-With-CSS-Shapes
Only supported in Chrome and Safari it seems:
http://caniuse.com/#feat=css-shapes
I have created my own method to make your style image in centre of page so i made this following method
note: check this in you page here in demo it doesn't works
div{
margin: 15px
}
p{
float:left;
margin: 10px;
}
.left{
float:left;
width:30%;
}
.centre{
display: inline-block;
width:30%;
}
.right{
float:right;
width:30%;
}
.right, .centre, .left p{
text-align:justify
}
<div class="left">
<p>Another 4-storey structure will soon be under construction to add new classrooms and laboratories for the High School and Grade School.</p>
<p>In terms of agriculture, FU's Aquaponics sets the example in the use of completely natural and organic farming techniques, which enhance not only the environment's safety but boost farmers' production capabilities and livelihood as well. Aquaponics provides agriculturists the answer to sustainable food production and a sustainable ecosystem for both fish and plants. For more specifics on our organic farm click here. (Note to Entheos: Link the word “here” to full organic farming article)</p>
<p>Have you also heard of Greyhound Events and Tours? Well, it is Foundation University’s student-run functional travel agency that caters to the travel needs of both the FU community and outside clients.</p>
<p>Integrating CSRs in the various programs is our chance to give back to the community as well as gain the respect of the members of the society, young and old. It also helps garner the public's appreciation for the importance of community involvement by producing tangible projects everybody can benefit from.</p>
<p>Expanding the University’s Information Technology (IT) to meet the demands of a digital age is another factor in FU’s “micro” to “macro” plan. Aside from the existing iPad program, the University is determined to create digital classrooms that can be accessed by local towns like Bacong, Dauin and Zamboangita. There is also a movement to encourage students, even at the high school level, to learn useful skills such as computer programming so they can be competitive in an IT driven world.</p>
<p>On the infrastructure side, FU is also updating the “bare bones” of FUs communication network to fiber optic cables and high-end routers and equipment. You can read a comprehensive explanation of these updates in a separate article in this issue of CQ here.
(Note to Entios: link the word “here” to full IT article)</p></div>
<div class="centre">
<p> Part of the reason for this attention to the North Campus is to help FU’s marketing strategy for the high school in response to the implementation of the K to 12 Program. First, we want to attract more enrollees. Second, we invest in the facilities in our aim to increase not just the quality of our education but to boost our enrollment capacity from 700 students to 1500 students. And of Course, thanks to our new solar panel installation, we will also be providing all the new classrooms with air conditioning for those sweltering months.</p>
<p>Estudio Damgo, for instance, is now on its third iteration of touching people's lives through sustainable and life-changing architecture. Its buildings and designs, since its first project in 2013, serve as prototype structures that cater to the various needs of society. The University sees Estudio Damgo as a catalyst for creating a transformed, more developed, and more meaningful way of living not just in Dumaguete but through out the Philippines. Read more about the current project here. (note to Entheos; link the word “here” to full Estudio Damgo article)</p>
<img src="http://animalia-life.com/data_images/cat/cat4.jpg" style="height:300px;width:100%;" alt="">
<p>The College of Business Administration (CBA), on the other hand, is seriously pursuing a strong “Entrepreneurship Program” that caters to all levels of participants from students to MSMEs (Micro, Small, Medium Enterprises). In fact, the CBA in partnership with DTI will soon launch an “Entrep Hub”—a one-stop business center for start-up entrepreneurs—during the University Expo in which high school students will compete for the best business plan. The prize will be an Incubation Program for the winning plan to become a real business.</p>
<p>The University Expo, formerly the Digital Expo, of the College of Computer studies is a major University event that showcases innovative technology. The annual event, which includes robotic challenges, quiz bowls, film festivals, etc., is an avenue for students from different academic institutions to participate in and learn from the latest IT breakthroughs.</p>
<p>Aside from all the projects mentioned above, our overview of the 2015 Master Plan wouldn’t be complete if we didn’t tell you about one more core component.</p>
</div>
<div class="right">
<p>Corporate Social Responsibility or CSR, as viewed by the University, should also have a significant space in the academe's achievements and obligations.</p>
<p>A forest and wildlife protection program called “Ayungon Forest Reserve” has also been pushed by the College of Arts and Sciences in partnership with local government units and the Department of the Environment and Natural Resources (DENR). The program calls for protecting the natural resources of the Reserve from causes of declining population, degradation of wildlife habitat, deterioration of soil and river quality, and the cave’s carrying capacity.</p>
<p>Barangay constituents also have the opportunity to learn computer skills such as basic PC operations, Internet use, word processing, spreadsheet and presentation through the university's Computer Literacy Program for adopted barangays.</p>
<p>Moreover, “The Queue” coffee shop, run by the College of Hospitality Management ‘s Culinary Arts students, draws customers from in and outside the campus because of its delicious food and beverages.</p>
<p>It needs to be emphasized that at the core of the FU Master Plan is the campaign for everyone’s right to quality education. This advocacy, started by Foundation University’s founder Dr. Vicente G. Sinco, has been passed down to each new FU president. It is why FU is proud to be known as a school that caters to students with financial challenges to hurdle as they work towards their educational goals.</p>
</div>
if this work happy
https://jsfiddle.net/x0ugLbo4/
i have the following content
<div class="venue-description">
<h4>Description</h4>
Nandi Hills are currently undergoing a multi-crore development, including a one crore renovation of the Tipu Fort, via private-public partnership to transform the hills into a tourist hub. The Department of Horticulture is setting up a food court modeled after one in Singapore at a cost of nearly one crore at the hill station.Various varieties of vegetarian and continental food, beverages, bakery products, ice-creams and fresh fruit juices will be available.
view more
</div>
I want to move the a tag to a new line. Using display: block will create a full width link which is bad for usability.
i do not want to use a <br/> tag
DEMO
a::before {
content:'';
display:block;
}
Why dont you just put
<br/>
after
<h4>Description</h4>
Nandi Hills are currently undergoing a multi-crore development, including a one crore renovation of the Tipu Fort, via private-public partnership to transform the hills into a tourist hub. The Department of Horticulture is setting up a food court modeled after one in Singapore at a cost of nearly one crore at the hill station.Various varieties of vegetarian and continental food, beverages, bakery products, ice-creams and fresh fruit juices will be available.